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

Você gostaria de exibir um botão de compra da Stripe após a mensagem de confirmação? O WPForms permite criar formulários de pagamento no WordPress. No entanto, o formulário que você criar usará o botão de envio padrão do WPForms. Com um trecho de PHP personalizado, você pode customizar seu formulário para exibir o botão de compra que você criou em sua conta Stripe.

Neste tutorial, mostraremos como adicionar o botão de compra da Stripe no WPForms.

Criação do Formulário

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

Desativando o AJAX para o Formulário

O próximo passo é desativar o envio de formulários via AJAX. Para fazer isso, vá para Configurações » Geral e clique em Avançado para abrir as configurações avançadas.

Aqui, desative a opção Ativar envio de formulários AJAX. Esta etapa é crucial porque, quando ativada, impede que a página detecte a ação. Como resultado, seu botão não será exibido.

Ativando a 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 esta etapa (que é totalmente opcional), navegue até Configurações » Confirmações. Aqui, ative a opção Mostrar pré-visualização da entrada após a mensagem de confirmação para a posição ligada.

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

Adicionando o Snippet

Agora é hora de adicionar o snippet que adicionará este botão após o envio do formulário. Se precisar de ajuda sobre como e onde adicionar snippets ao seu site, por favor, confira 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 snippet acima, há algumas coisas que você precisará atualizar para corresponder ao seu próprio site. Por favor, atualize o 3116 para corresponder ao ID do seu próprio formulário. Por favor, veja nosso tutorial se precisar de ajuda encontrando o ID do seu formulário.

Você também precisará atualizar o buy-button-id e a pulishable-key no snippet acima para garantir que você receba esses pagamentos. O ID do botão será gerado automaticamente para você ao criar um botão de compra personalizado em 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, eles verão a mensagem de confirmação, as informações de pré-visualização da entrada e um botão que se conecta à Stripe para um pagamento/doação.

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

Em seguida, você gostaria de alterar a estilização da mensagem de confirmação? Confira nosso tutorial sobre Como Remover a Estilização da Caixa de Mensagem de Confirmação.

Relacionado

Referência de Ação: wpforms_frontend_output_success