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...'})

Nota: Para completar el pago, no olvides el paso 3.

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')

Nota: Para completar el pago, no olvides el paso 3.

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')

Nota: Para completar el pago, no olvides el paso 3.

3. El cliente completa el pago

Una vez el usuario finalice el pago, se enviará un evento sobre la propia página con alguno de los siguientes valores que deberá ser tratado por el comercio:

Response
redirect	URL hacia la que redirigir al usuario con el resultado del pago OK/KO
render	Contenido HTML para renderizar en la página. Esto sucede porque se requiere la intervención del usuario de nuevo, generalmente para completar el 3DS. El tamaño mínimo recomendado es de 500x600
error	Contenido HTML con el error ocurrido.

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)
    }
  }, [])

Nota: Esto no será necesario si se ha utilizado la función redirect del SDK. En este caso, el SDK se encargará de 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.