@ribpay/react-payline v0.3.4

react-payline

This is an unofficial repository

This package provides a small layer between Payline and your React application. It removes the need of including js and css files, the use of window.Payline to access the API and the burden of declaring/removing global functions to use the event handlers.

And if you're a TypeScript user: this package is written in TypeScript and bundles type definitions 😘.

How to use

Required: before using Payline you will need to put the PaylineProvider somewhere high in your component tree. Follow this guide

PaylineWidget

Integrates the Payline widget

import { PaylineWidget } from 'react-payline';

function Payment(props) {
  return (
    <PaylineWidget
      token="the token obtained in doWebPayment Response"
      template="column"
      embeddedRedirectionAllowed={false}
      onFinalStateHasBeenReached={({ state }) => {
        if (state === 'PAYMENT_SUCCESS') {
          props.onSuccess();
          return true;
        }
      }}
    />
  );
}

The parameter props follow the documentation, except they are camelCased and don't include the data- prefix. You can also use any callback but the naming is also changed, for example: data-event-didshowstate will be onDidShowState.

If you need more info, please refer to the documentation (FR): https://docs.payline.com/pages/viewpage.action?pageId=747145714

Payline API

Integrates the Payline API

import { useEffect } from 'react';
import { usePayline } from 'react-payline';
import Payment from './Payment';

function PaymentWrapper(props) {
  const paylineApi = usePayline();
  useEffect(() => {
    if (props.show) {
      paylineApi.show();
    } else {
      paylineApi.hide();
    }
  }, [show]);

  return <Payment onSuccess={() => console.log('celebrate!')} />;
}

Every documented functions is available using the hook.

If you need more info, please refer to the documentation (FR): https://docs.payline.com/display/DT/API+JavaScript

Setup

The package depends on React >16.8 because it uses hooks and context. There are two ways you can embed the Payline lib

Using PaylineProvider

Wrap your application with the PaylineProvider component. If you omit the production prop, you will use the "homologation" environment.

import { PaylineProvider } from 'react-payline';

ReactDOM.render(
  <PaylineProvider production>
    <App />
  </PaylineProvider>,
  document.getElementById('#root')
);

You can also use a HOC to wrap your application. The first argument of the function is the production flag.

import { withPayline } from 'react-payline';

const EnhancedApp = withPayline(true)(App);

ReactDOM.render(<EnhancedApp />, document.getElementById('#root'));

Under the hood it uses react-helmet to add the script and stylesheet to the document.head.