Saiba como incorporar um formulário de pagamento personalizado do WooshPay em seu site ou aplicativo. O código do lado do cliente e do servidor cria um formulário de checkout com elementos para concluir um pagamento usando vários métodos de pagamento.

Fluxo de pagamento #

Há algumas etapas para usar o WooshPay SDK:

Criar um PaymentIntent #

Adicione um ponto de extremidade em seu servidor que crie um PaymentIntent. Um PaymentIntent rastreia o ciclo de vida do pagamento do cliente, mantendo o controle de todas as tentativas de pagamento fracassadas e garantindo que o cliente seja cobrado apenas uma vez. Retorne o segredo do cliente do PaymentIntent (número do PaymentIntent, neste caso) na resposta para concluir o pagamento no cliente. Habilitamos cartões para você por padrão.

Carregar wooshpay.js #

Use o wooshpay.js para manter a conformidade com a PCI, garantindo que os detalhes de pagamento sejam enviados diretamente para o WooshPay sem atingir seu servidor. Sempre carregue o wooshpay.js em js.wooshpay.com para manter a conformidade. Não inclua o script em um pacote nem o hospede você mesmo.

Inicialização dos elementos WooshPay #

Inicialize a biblioteca de interface do usuário do WooshPay Elements com o segredo do cliente. O Elements gerencia os componentes da interface do usuário necessários para coletar detalhes de pagamento.

Concluir o pagamento no cliente #

Concluir o pagamento
Chamada confirmPayment()passando o PaymentElement e um return_url para indicar para onde o WooshPay deve redirecionar o usuário depois que ele concluir o pagamento. Para pagamentos que exigem autenticação, o WooshPay exibe um modal para autenticação 3D Secure ou redireciona o cliente para uma página de autenticação, dependendo do método de pagamento. Depois que o cliente concluir o processo de autenticação, ele será redirecionado para a página return_url.

Tratamento de erros #

Se houver algum erro imediato (por exemplo, o cartão do cliente foi recusado), o wooshpay.js retornará um erro. Mostre essa mensagem de erro ao seu cliente para que ele possa tentar novamente.

Mostrar uma mensagem de status de pagamento #

Quando o WooshPay redireciona o cliente para o return_url, o payment_intent_client_secreté anexado pelo wooshpay.js. Use-o para recuperar o PaymentIntent para determinar o que mostrar ao seu cliente.

Obter uma demonstração #

Você pode fazer o download aqui Download da demonstração do JS SDK