Añadir un botón de compra de Stripe después de la confirmación

¿Desea mostrar un botón de compra de Stripe después del mensaje de confirmación? WPForms le permite crear formularios de pago en WordPress. Sin embargo, el formulario que cree utilizará el botón de envío predeterminado de WPForms. Con un fragmento de código PHP personalizado, puede personalizar su formulario para mostrar el botón de compra que ha creado en su cuenta de Stripe.

En este tutorial, le mostraremos cómo añadir el botón de compra de Stripe en WPForms.

Creación del formulario

Para empezar, cree un formulario nuevo o edite uno existente para acceder al creador de formularios. En el creador de formularios, añada sus campos al formulario. Para nuestro ejemplo, crearemos un formulario de inscripción de voluntarios para recopilar información sobre los usuarios que deseen ser voluntarios.

Desactivar AJAX para el formulario

El siguiente paso es desactivar el envío de formularios AJAX. Para ello, vaya a Ajustes » General y haga clic en Avanzado para abrir los ajustes avanzados.

Una vez aquí, desactive la opción Activar envío de formularios AJAX. Este paso es crucial porque, cuando está activado, impide que la página detecte la acción. Como resultado, su botón no se mostrará.

Activar vista previa de la entrada (opcional)

Para este tutorial, queremos mostrar la vista previa de la entrada después de enviar el formulario. Para completar este paso (que es completamente opcional), navegue a Ajustes » Confirmaciones. Aquí, active la opción Mostrar vista previa de la entrada después del mensaje de confirmación a la posición de activado.

Asegúrese de guardar sus cambios después de actualizar su formulario.

Añadir el fragmento

Ahora es el momento de añadir el fragmento de código que añadirá este botón después de enviar el formulario. Si necesita ayuda sobre cómo y dónde añadir fragmentos de código a su sitio, 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 );

Es importante recordar que en el fragmento de código anterior, hay algunas cosas que deberá actualizar para que coincidan con su propio sitio. Por favor, actualice el 3116 para que coincida con el ID de su propio formulario. Consulte nuestro tutorial si necesita ayuda para encontrar el ID de su formulario.

También deberá actualizar el buy-button-id y la pulishable-key en el fragmento de código anterior para asegurarse de que recibe estos pagos. El ID del botón se generará automáticamente al crear un botón de compra personalizado en su cuenta de Stripe. Para saber cómo crear un botón de compra, consulte la documentación de Stripe.

Ahora, cuando se envíe el formulario, verán el mensaje de confirmación, la información de la vista previa de la entrada y un botón que enlaza a Stripe para un pago/donación.

¡Eso es todo! Ahora ha aprendido a añadir un botón de compra de Stripe a las confirmaciones de formularios en WPForms.

¿A continuación, le gustaría cambiar el estilo del mensaje de confirmación? Consulte nuestro tutorial sobre Cómo eliminar el estilo de la caja del mensaje de confirmación.

Relacionado

Referencia de acción: wpforms_frontend_output_success