Skip to main content

Integration using a React Component

Paylands offers a TypeScript React component that eases the Paylands' checkout integration in React web applications. This component is in charge of managing the communication to the Paylands server and displaying the checkout.

In order to use the component it will be necessary to have previously generated a payment order in Paylands. This order must contain the uuid of the previously created checkout. For more information on how to generate an order with checkout, see section Integration via API.

1. Installation​

To integrate Paylands Checkout into your React application, install the paylands-checkout-react package:

npm i paylands-checkout-react

2. Usage​

Redirect​

Import the redirect method and call it providing the order token.

import { redirect } from 'paylands-checkout-react'

await redirect({token: '9fdade323e7...'})

Rendering​

Import the render method and call it indicating the ID of the element where the Checkout will be rendered and the token.

import { render } from 'paylands-checkout-react'

await render('payment-container', {token: '9fdade323e7...'})

Google Pay​

Import the googlePay method and call it indicating the ID of the element where the button will be rendered, the token and the language.

import { googlePay } from 'paylands-checkout-react'

await render('payment-container', {token: '9fdade323e7...'}, language: 'es')

Apple Pay​

Import the applePay method and call it indicating the ID of the element where the button will be rendered, the token and the language.

import { applePay } from 'paylands-checkout-react'

await render('payment-container', {token: '9fdade323e7...'}, language: 'es')

3. Customer completes payment​

Once the customer has completed the payment, Paylands will redirect the customer to the corresponding redirection URL according to the result of the transaction:

  • If the payment has been successfully completed it redirects to the url specified in the url_ok field of the order.
  • In any other case it will redirect to the url specified in the url_ko field of the order.