Integrar el SDK en el lado de la aplicación

Después de instalar el SDK e inicializarlo:

1. Inicialice la interfaz de usuario de pago especificando el ID del método de pago y la URL de redireccionamiento:
   • El método headlessCheckout.form.init devuelve un objeto que se utiliza para la posterior interacción con la interfaz de pago.
   • La URL de redireccionamiento se usa para redirigir al usuario, por ejemplo, después de realizar la verificación 3-D Secure.

await headlessCheckout.form.init({
  paymentMethodId: ID,
  returnUrl: 'returnUrl',
});

2. Agregue al marcado HTML de la interfaz de pago los siguientes componentes:
   • Componentes obligatorios:
     • psdk-legal - para mostrar información sobre documentos legales.
     • psdk-total - para mostrar el importe total de la compra.
   • Componentes del formulario de pago. Puede utilizar el componente psdk-payment-form integrado o crear manualmente elementos de interfaz de pago usando los componentes predefinidos.
   • El componente de botón de pago: psdk-submit-button.

<psdk-legal></psdk-legal>
<psdk-total></psdk-total>


<psdk-payment-form></psdk-payment-form>
<psdk-submit-button text="Pay"></psdk-submit-button>

3. Agregue el control del evento check_status para el cambio del estado de pago.

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'check_status': {
      showStatus = true;
    }
  }
});

4. Agregue el componente psdk-status al marcado HTML de la interfaz de pago para mostrar un estado de pago.

@if (showStatus) {
  <psdk-status></psdk-status>
}