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.

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

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.

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. Adicione a manipulação do evento check_status para a alteração de status do pagamento.

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

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

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