Aggiungere un pulsante Acquista Stripe dopo la conferma

Desideri visualizzare un pulsante Acquista Stripe dopo il messaggio di conferma? WPForms ti consente di creare moduli di pagamento in WordPress. Tuttavia, il modulo che crei utilizzerà il pulsante di invio predefinito di WPForms. Con uno snippet PHP personalizzato, puoi personalizzare il tuo modulo per mostrare il pulsante di acquisto che hai creato sul tuo account Stripe.

In questo tutorial, ti mostreremo come aggiungere il pulsante Acquista Stripe in WPForms.

Creazione del modulo

Per iniziare, crea un nuovo modulo o modifica uno esistente per accedere al generatore di moduli. Nel generatore di moduli, procedi e aggiungi i tuoi campi al modulo. Per il nostro esempio, creeremo un modulo di iscrizione volontari per raccogliere informazioni sugli utenti che desiderano fare volontariato.

Disabilitare AJAX per il modulo

Il passo successivo è disabilitare l'invio del modulo tramite AJAX. Per farlo, vai su Impostazioni » Generali e fai clic su Avanzate per aprire le impostazioni avanzate.

Una volta qui, disattiva l'opzione Abilita invio modulo AJAX. Questo passaggio è fondamentale perché, quando è abilitato, impedisce alla pagina di rilevare l'azione. Di conseguenza, il tuo pulsante non verrà visualizzato.

Abilitare l'anteprima della voce (facoltativo)

Per questo tutorial, vogliamo mostrare l'anteprima della voce dopo l'invio del modulo. Per completare questo passaggio (che è completamente facoltativo), vai su Impostazioni » Conferme. Qui, attiva l'opzione Mostra anteprima voce dopo il messaggio di conferma in posizione attiva.

Assicurati di salvare le modifiche dopo aver aggiornato il tuo modulo.

Aggiunta dello Snippet

Ora è il momento di aggiungere lo snippet che aggiungerà questo pulsante dopo l'invio del modulo. Se hai bisogno di aiuto su come e dove aggiungere snippet al tuo sito, dai un'occhiata a questo 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 ricordare che nello snippet sopra, ci sono alcune cose che dovrai aggiornare per adattarle al tuo sito. Aggiorna il 3116 per corrispondere all'ID del tuo modulo. Consulta il nostro tutorial se hai bisogno di aiuto per trovare l'ID del tuo modulo.

Dovrai anche aggiornare il buy-button-id e la pulishable-key nello snippet sopra per assicurarti di ricevere questi pagamenti. L'ID del pulsante ti verrà generato automaticamente quando crei un pulsante Acquista personalizzato sul tuo account Stripe. Per sapere come creare un pulsante Acquista, consulta la documentazione di Stripe.

Ora, quando il modulo viene inviato, vedranno il messaggio di conferma, le informazioni sull'anteprima della voce e un pulsante che collega a Stripe per un pagamento/donazione.

Ecco fatto! Ora hai imparato come aggiungere un pulsante Acquista Stripe alle conferme dei moduli in WPForms.

Successivamente, desideri anche modificare lo stile del messaggio di conferma? Dai un'occhiata al nostro tutorial su Come rimuovere lo stile della casella del messaggio di conferma.

Correlati

Riferimento azione: wpforms_frontend_output_success