Ajouter un bouton d'achat Stripe après la confirmation

Souhaitez-vous afficher un bouton d'achat Stripe après le message de confirmation ? WPForms vous permet de créer des formulaires de paiement dans WordPress. Cependant, le formulaire que vous créez utilisera le bouton de soumission par défaut de WPForms. Avec un extrait de code PHP personnalisé, vous pouvez personnaliser votre formulaire pour afficher le bouton d'achat que vous avez créé sur votre compte Stripe.

Dans ce tutoriel, nous vous montrerons comment ajouter le bouton d'achat Stripe dans WPForms.

Création du formulaire

Pour commencer, créez un nouveau formulaire ou modifiez-en un existant pour accéder au constructeur de formulaires. Dans le constructeur de formulaires, ajoutez vos champs au formulaire. Pour notre exemple, nous allons créer un formulaire d'inscription de bénévoles pour recueillir des informations sur les utilisateurs qui souhaitent faire du bénévolat.

Désactivation de l'AJAX pour le formulaire

L'étape suivante consiste à désactiver la soumission AJAX du formulaire. Pour ce faire, allez dans Paramètres » Général et cliquez sur Avancé pour ouvrir les paramètres avancés.

Une fois ici, désactivez l'option Activer la soumission AJAX du formulaire. Cette étape est cruciale car, lorsqu'elle est activée, elle empêche la page de détecter l'action. Par conséquent, votre bouton ne sera pas affiché.

Activation de l'aperçu des entrées (facultatif)

Pour ce tutoriel, nous voulons afficher l'aperçu des entrées après la soumission du formulaire. Pour effectuer cette étape (qui est entièrement facultative), naviguez vers Paramètres » Confirmations. Ici, activez l'option Afficher l'aperçu des entrées après le message de confirmation.

N'oubliez pas de sauvegarder vos modifications après avoir mis à jour votre formulaire.

Ajout de l'extrait

Il est maintenant temps d'ajouter le code qui ajoutera ce bouton après la soumission du formulaire. Si vous avez besoin d'aide sur comment et où ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

/*
 * 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 );

Il est important de se rappeler que dans l'extrait de code ci-dessus, il y a quelques éléments que vous devrez mettre à jour pour qu'ils correspondent à votre propre site. Veuillez mettre à jour le 3116 pour qu'il corresponde à l'ID de votre propre formulaire. Veuillez consulter notre tutoriel si vous avez besoin d'aide pour trouver l'ID de votre formulaire.

Vous devrez également mettre à jour le buy-button-id et la clef publiable dans l'extrait de code ci-dessus pour vous assurer que vous recevez ces paiements. L'ID du bouton sera généré automatiquement pour vous lors de la création d'un bouton d'achat personnalisé sur votre compte Stripe. Pour savoir comment créer un bouton d'achat, veuillez consulter la documentation de Stripe.

Maintenant, lorsque le formulaire sera soumis, les utilisateurs verront le message de confirmation, les informations de l'aperçu des entrées et un bouton qui renvoie vers Stripe pour un paiement/don.

C'est tout ! Vous avez maintenant appris comment ajouter un bouton d'achat Stripe aux confirmations de formulaire dans WPForms.

Ensuite, souhaitez-vous également modifier le style du message de confirmation ? Consultez notre tutoriel sur Comment supprimer le style de la boîte de message de confirmation.

Articles associés

Référence d'action : wpforms_frontend_output_success