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 { usePaylineApi } from 'react-payline';
import Payment from './Payment';

function PaymentWrapper(props) {
  const paylineApi = usePaylineApi();
  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.

Using PaylineHead

If you're using SSR (with Next.JS or Remix for example) you probably want to handle document.head yourself. Use PaylineHead component to render only the JS and CSS needed.

import { PaylineProvider } from 'react-payline';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <PaylineHead production />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Keywords

FAQs

What is react-payline?

Is react-payline popular?

Is react-payline well maintained?

Last updated on 13 Jun 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install