Saltar al contenido principal

Integración a través de un Componente de React

Paylands ofrece un componente de React en TypeScript que facilita la integración del Checkout en aplicaciones web desarrolladas con React. Este componente se encarga de gestionar la comunicación con el servidor de Paylands y de mostrar el checkout.

Para poder utilizar el componente será necesario previamente haber generado una orden en Paylands del lado de servidor. Esta orden deberá contener el uuid del checkout creado previamente. Para más información sobre cómo generar una orden con checkout, consulta la sección Integración via API.

1. Instalación​

Para integrar el Checkout de Paylands en tu aplicación de React, instala el paquete paylands-checkout-react:

npm i paylands-checkout-react

2. Uso​

Redirección​

Importa la función redirect y llámala indicando el token para redirigir al usuario al Checkout.

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

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

Renderizado​

Importa la función render y llámala indicando el ID del elemento donde se renderizará el Checkout y el token.

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

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

Google Pay​

Importa la función googlePay y llámala indicando el ID del elemento donde se renderizará el botón, el token y el idioma.

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

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

Apple Pay​

Importa la función applePay y llámala indicando el ID del elemento donde se renderizará el botón, el token y el idioma.

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

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

3. El cliente completa el pago​

Una vez el cliente ha completado el pago, Paylands redirigirá al cliente a la URL de redirección correspondiente según el resultado de la operación:

  • Si se ha efectuado el pago correctamente se redirige a la url especificada en el campo url_ok de la orden.
  • En cualquier otro caso se redirige a la url especificada en el campo url_ko de la orden.