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.

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

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.

1<psdk-legal></psdk-legal>
2<psdk-total></psdk-total>
3
4
5<psdk-payment-form></psdk-payment-form>
6<psdk-submit-button text="Pay"></psdk-submit-button>

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

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'check_status': {
4      showStatus = true;
5    }
6  }
7});

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

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