Adicionar um Botão de Compra Stripe Após Confirmação

Pretende exibir um botão de compra Stripe após a mensagem de confirmação? O WPForms permite criar formulários de pagamento no WordPress. No entanto, o formulário que criar usará o botão de envio padrão do WPForms. Com um trecho de código PHP personalizado, pode personalizar o seu formulário para mostrar o botão de compra que criou na sua conta Stripe.

Neste tutorial, vamos mostrar como adicionar o botão de compra Stripe no WPForms.

Criação do Formulário

Para começar, crie um novo formulário ou edite um existente para aceder ao construtor de formulários. No construtor de formulários, adicione os seus campos ao formulário. Para o nosso exemplo, criaremos um formulário de inscrição de voluntários para recolher informações sobre os utilizadores que desejam ser voluntários.

Desativar AJAX para o Formulário

O próximo passo é desativar o envio de formulários AJAX. Para tal, vá a Definições » Geral e clique em Avançadas para abrir as definições avançadas.

Aqui, desative a opção Ativar envio de formulários AJAX. Este passo é crucial porque, quando ativado, impede que a página detete a ação. Como resultado, o seu botão não será exibido.

Ativar Pré-visualização de Entrada (opcional)

Para este tutorial, queremos mostrar a pré-visualização da entrada após o envio do formulário. Para completar este passo (que é totalmente opcional), navegue até Definições » Confirmações. Aqui, ative a opção Mostrar pré-visualização da entrada após a mensagem de confirmação.

Certifique-se de guardar as suas alterações após atualizar o seu formulário.

Adicionar o Trecho

Agora é hora de adicionar o trecho de código que adicionará este botão após o envio do formulário. Se precisar de ajuda sobre como e onde adicionar trechos de código ao seu site, consulte este tutorial.

/*
 * Add Stripe buy button embed code after form is submitted
 *
 * @link  https://wpforms.com/developers/how-to-add-a-stripe-buy-button-after-confirmation/
 */
     
   
function wpf_dev_add_stripe_embed_button(  $form_data, $fields, $entry_id ) {
      
    // Below, we restrict output to 3116
    // This ID will need to be updated
    if ( absint( $form_data[ 'id' ] ) !== 3116 ) {
        return;
    }
 
// Below starts the JavaScript needed to create your button
// Remember to replace the button ID and publishable key to match your own Stripe account
// https://stripe.com/docs/payment-links/buy-button
?>
 
<script async
  src="https://js.stripe.com/v3/buy-button.js">
</script>
 
<stripe-buy-button
  buy-button-id="buy_btn_unique_to_your_own_stripe_account"
  publishable-key="pk_test_vbMx6qBxSR49z9231ZNYVP7o00euSPrTfx"
>
</stripe-buy-button>
  
<?php
      
}
add_action( 'wpforms_frontend_output_success', 'wpf_dev_add_stripe_embed_button', 10, 3 );

É importante lembrar que, no trecho de código acima, há algumas coisas que precisará de atualizar para corresponder ao seu próprio site. Atualize o 3116 para corresponder ao ID do seu próprio formulário. Consulte o nosso tutorial se precisar de ajuda para encontrar o ID do seu formulário.

Também precisará de atualizar o buy-button-id e a pulishable-key no trecho de código acima para garantir que recebe estes pagamentos. O ID do botão será gerado automaticamente para si ao criar um botão de compra personalizado na sua conta Stripe. Para saber como criar um botão de compra, consulte a documentação da Stripe.

Agora, quando o formulário for enviado, verão a mensagem de confirmação, as informações de pré-visualização da entrada e um botão que liga à Stripe para um pagamento/doação.

É isso! Aprendeu agora como adicionar um botão de compra Stripe às confirmações de formulário no WPForms.

Em seguida, gostaria também de alterar o estilo da mensagem de confirmação? Consulte o nosso tutorial sobre Como Remover o Estilo da Caixa de Mensagem de Confirmação.

Relacionado

Referência de Ação: wpforms_frontend_output_success