Comment intégrer avec les boutons et tableaux de prix SeedProd

Ce document vous montrera comment faire fonctionner les tableaux de prix ou les boutons individuels de SeedProd avec les formulaires Overlay de WP Simple Pay et les pages de paiement Stripe externes.

Préparez vos formulaires WP Simple Pay + Récupérez les shortcodes à utiliser

Pour suivre ce tutoriel, vous devez avoir vos formulaires de paiement déjà créés. Nous supposons également que votre bouton ou tableau de prix SeedProd est prêt.

Pour terminer cette configuration, vous devrez copier le shortcode du formulaire depuis l'administration WP Simple Pay → Formulaires de paiement.

Lier les boutons SeedProd à WP Simple Pay

Dans le menu SeedProd → Pages de destination, sélectionnez la page avec le tableau de prix/bouton que vous souhaitez utiliser, ce qui chargera l'éditeur glisser-déposer.

Ensuite, ajoutez un Bloc de shortcode sous chaque bouton du tableau de prix. Ici, nous allons travailler avec le bouton « Acheter le forfait Argent ». Localisez le Bloc de shortcode dans la liste de gauche, faites-le glisser sous le bouton approprié et déposez-le.

Cliquez sur le texte Entrez votre shortcode dans la zone orange mise en surbrillance qui a été créée. Cela ouvrira l'éditeur de Bloc de shortcode.

La zone de texte du shortcode sera vide au début. Collez maintenant simplement le shortcode que vous avez copié au début de cet article. Votre shortcode contiendra très probablement un numéro d'ID différent de celui montré ici.

Vous voudrez alors copier et coller le code suivant sur une nouvelle ligne sous le shortcode :

<script> 
( function( $ ) {
var ids = [ '24' ];

// Do not modify.
ids.forEach( function( id ) { $( 'a[href~="#form-' + id + '"]' ).click( function( e ) { e.preventDefault(); $( '.simpay-form-' + id + ' .simpay-payment-btn' ).click(); $( '#simpay-modal-control-' + id ).click(); }); });
})( jQuery );
</script>
<style> 
.simpay-form-wrap { display: none; } 
</style>

Assurez-vous que le numéro d'ID de votre shortcode a été saisi dans la zone var ids comme indiqué.

Plus qu'une seule étape et vous avez terminé !

Cliquez sur le bouton du tableau de prix que vous souhaitez utiliser ; dans cet exemple, le bouton « Acheter le forfait Argent » – ce qui ouvrira le panneau des paramètres de ce bouton.

Entrez #form-24 dans le champ Lien du bouton. Dans l'exemple ci-dessous, vous devrez remplacer 24 par l'ID de votre formulaire.

Une fois terminé, cliquez sur le gros bouton vert Enregistrer dans le coin supérieur droit.

Lorsque vous avez répété le processus ci-dessus pour chaque bouton du tableau de prix, vous pouvez cliquer sur la flèche vers le bas à droite de Enregistrer et choisir Publier. Votre tableau de prix est maintenant en ligne.

Vos boutons sont configurés pour lancer vos formulaires WP Simple Pay.