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