Bouton d'achat custom pour ouvrir Stripe

Quartier général
1

J’ai une question sûrement bin facile pour certains. J’essaie de faire apparaitre le formulaire d’achat Stripe normal avec un bouton custom (au lieu du bleu traditionnel). Mon thème est Squared avec Thrive Themes et j’utilise le plugin Simple Pay Pro pour linker le tout.

Ici, l’équipe de Simple Pay Pro dit qu’il faut un petit code jQuery pour faire apparaitre le formulaire Stripe à partir d’un bouton custom. J’ai inventé un id aux boutons à partir de Thrive Architect et j’ai mis le code jQuery dans le footer avec le plugin Insert Headers and Footers. Mais ça marche pas. Ça me met le code en bas de ma page.

Svp me dire ce qui fonctionne pas, sinon une autre méthode plus efficace? Merci!

code en bas.png1275×564 43.7 KB
code footer.png1273×581 83.5 KB

2

Ça va me prendre l’url de la page en question pour pouvoir vérifier la console!

3

Je suis en train de refaire une refonte complète de la page de vente mais voici l’ancienne : https://www.proteinov.com/kit/ … J’ai remis le jQuery avec le id du premier bouton du kit “collation”. Merci!

4

Voici l’erreur:

image.png1801×355 29.4 KB

Tu n’as pas jquery de chargé lors de l’exécution de ton script.

Peut-être installer ça?

Tu fais CTRL+Shift+J pour la console!

5

J’ai installé le plugin, semble pas avoir fonctionner. Pour mac, c’est quoi pour la console?

6

Ici, ça fonctionne pourtant…

image.jpg857×1119 88.7 KB

7

Oui tu cliques sur le bouton bleu traditionnel de Stripe. Ce que je veux c’est rajouter un bouton custom avec mes couleurs et tout qui va aussi faire poper le formulaire de Stripe. J’ai mis un bouton vert sur le premier kit. Son id est collation et je l’ai mis dans mon code jQuery. Mais ça link pas.

8

J’ai retranscris ton code dans la console pour tester, et à première vue, c’est parce que tu n’as pas l’élément #stripe-collation sur ta page!

jQuery('#stripe-collation').click(function(e){e.preventDefault(); jQuery('#simpay-form-5936').find('.simpay-payment-btn').click();});

Voici le code de ton bouton:

<a href="#table" class="tcb-button-link"> <span class="tcb-button-texts"><span class="tcb-button-text thrv-inline-text" data-css="tve-u-15f9416388b"><span data-css="tve-u-15f96aa4f39" style="font-family: Quicksand; font-weight: 400;">PRÉ-COMMANDEZ MON KIT</span></span></span> </a>

Ta balise <a> devrait avoir id="stripe-collation"

9

Bizarre. Je pensais qu’en rajoutant l’id #stripe-collation à partir de Thrive Architect ça allait faire ce travail. Comment je fais alors pour l’ajouter à la balise?

10

Au pire, tu peux utiliser le href de tes liens pour déclencher ton code!

Remplace '#stripe-collation' par 'a[href$="#table"]' où #table est le champ d’url (celui de ton bouton en haut en l’occurence).

11

Ça marche pas plus! Anyway le code apparait toujours en bas de la page, est ce que le plugin fait la job d’exécuter le script? Comment je fais pour voir la console que tu parles?

12

Je n’avais pas vu que le code apparaissait en bas de la page! Dans ce cas, c’est certain à 100% que ça ne fonctionnera pas même si ton code est bon.

Essaie ce plug-in pour mettre ton code:

https://en-ca.wordpress.org/plugins/jquery-in-posts-pages/

Mais ton code n’est pas plus bon… Tu as:

jQuery( '#table' ).click( function( e ) { e.preventDefault();jQuery( '#simpay-form-5936' ).find( '.simpay-payment-btn' ).click(); });

Tu devrais avoir:

jQuery('a[href$="#table"]').click( function( e ) { e.preventDefault();jQuery( '#simpay-form-5936' ).find( '.simpay-payment-btn' ).click(); });

Quand je le colle dans la console, ça fonctionne.

Tu utilises Chrome ou Safari?

C’est CMD + Shift + J sur Chrome.

Voici un post qui explique plus sur mac:

https://www.wickedlysmart.com/hfjsconsole/

J’ai également fait une vidéo ici: https://www.latranchee.com/cours/deboguer-app-web

13

J’ai des erreurs qui se sont rajoutés héhé mais le code n’apparait plus en base de la page

Capture d’écran 2017-11-09 à 15.05.18.png716×471 56.5 KB

14

Oh et by the way! Je me sens un peu niaiseux de ne pas l’avoir vu avant. Mais ton premier screenshot où tu as “Script in footer”

La raison pourquoi ton code apparaissait sur ta page est simple, tu dois wrapper ton code dans une balise <script>!

De sorte que ça fasse:

<script>

// TON CODE JQUERY

</script>
15

Oui c’est vrai! Mais anyway même avec le plugin, le code n’apparait plus mais le bouton marche pas plus! :frowning:

16

On va l’avoir! Ne décourage pas :slight_smile:

Dans le script sur ta page, tu as une faute!

jQuery(document).ready(function($) {jQuery( a[href$="#table"] ).click( function( e ) {
  e.preventDefault();

  jQuery( '#simpay-form-5936' ).find( '.simpay-payment-btn' ).click();
} );});

Tu dois mettre des single quotes autour de a[href$="#table"] !

Fais un copier collé tel quel de ce que je t’ai donné. Pour vérifier si ça fonctionne, colle dans la console et fais “enter” pour appliquer ton script. Ensuite, tu peux cliquer sur les éléments de ta page pour voir si ça a fonctionné.

17

@Francois.Douville m’a confié ses accès et j’ai pu trouver la solution!

Il s’agissait d’ajouter le code à travers le bloc HTML du Thrive Architect:

image.png517×1415 39 KB

Et de ne pas utiliser de plugin :slight_smile: