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 user completes the payment, an event will be sent on the page itself with one of the following values to be handled by the merchant:

Response
redirect	URL to redirect the user with the payment result OK/KO
render	HTML content to render on the page. This happens because user intervention is required again, usually to complete the 3DS. Minimum recomended size is 500x600.
error	HTML content with the error occurred.

useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      if (event.data.redirect) {
        window.location.href = event.data.redirect
      } else if (event.data.render) {
        document.getElementById('root')!.innerHTML = event.data.render
        const submitButton = document.getElementById(
          'submitBTN'
        ) as HTMLInputElement
        if (submitButton) {
          submitButton.click()
        } else {
          const form = document.querySelector('form')
          if (form) {
            form.submit()
          }
        }
      } else if (event.data.error) {
        setError(event.data.error)
      }

      event.stopImmediatePropagation()
    }

    window.addEventListener('message', handleMessage, true)

    return () => {
      window.removeEventListener('message', handleMessage, true)
    }
  }, [])

Note: This is not necessary if you have used the redirect function of the SDK. In this case, the SDK will redirect the client to the corresponding redirect URL according to the result of the operation:

• If the payment has been made successfully it is redirected to the url specified in the url_ok field of the order.
• In any other case it redirects to the url specified in the url_ko field of the order.