Integre o SDK no lado do aplicativo

Depois de instalar e inicializar o SDK:

1. Inicialize a interface de pagamento especificando o ID do método de pagamento e URL de redirecionamento:
   • O método headlessCheckout.form.init retorna um objeto usado para ter mais interação com a interface de pagamento.
   • O URL de redirecionamento é usado para redirecionar o usuário, por exemplo, depois de concluir a verificação 3-D Secure.

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

2. Adicione os seguintes componentes à marcação HTML da interface de pagamento.
   • Componentes obrigatórios:
     • psdk-legal — Para exibir informações sobre documentos legais.
     • psdk-total — Para exibir a quantia total da compra.
   • Componentes do formulário de pagamento. Você pode usar o componente psdk-payment-form integrado ou criar elementos da interface de pagamento manualmente usando componentes de uso pronto.
   • O componente do botão de pagamento — 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. Adicione a manipulação do evento check_status para a alteração de status do pagamento.

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

4. Adicione o componente psdk-status à marcação HTML da interface de pagamento para exibir um status de pagamento.

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