Leadpages et Stripe

Quartier général
,
#1

Avant de garrocher mon ordinateur dans le banc de neige pour la soirée…

J’ai fait une landing page avec Leadpages. Les gens sont invités à réserver (places limitées) en payant d’avance en utilisant Stripe. Je veux pouvoir me servir par la suite du courriel utilisé lors du paiement pour l’ajouter également à ma liste courriel sur MailChimp via Zapier.

J’ai commencé l’intégration de Checkout -simple- sur ma page avec un drop «HTML», mais la customisation du bouton ne fonctionne pas quand je passe par le custom CSS de Leadpages… Du coup, je me demande si je n’aurai pas à passer obligatoirement par Checkout -custom- pour faire les modifications sur le bouton d’origine (et changer le texte du bouton également)…

Bref, je ne suis pas certaine que je fais ça comme il faut…

Votre avis ? Vos idées ?

1 « J'aime »
#2

En théorie, tu devrais pouvoir changer le bouton! Shoot le code que tu prends sur ta LeadPages stp :slight_smile:

#3

Ce que je mets dans le drop HTML sur ma page:

Dans le custom CSS de Leadpages:

.stripe-button {
background-color:#bd081c;
color:#ffffff;
}

Si je change la class stripe-button par autre chose, j’ai plus de bouton du tout… Et je ne vois pas comment je pourrais plus changer le texte de mon bouton… :confused:

#4

Ajoute la valeur “data-label” dans la liste de tes paramètres! C’est pour personnaliser le texte du bouton :slight_smile:

#5

Pourrais-tu me dire si c’est la façon dont je l’insère dans ma Leadpage qui fait que ça pourrait ne pas fonctionner ?

Je ne suis pas capable de faire changer le texte du bouton même en l’ajoutant dans les paramètres. J’ai essayé avec un autre paramètre data-allow-remember-me et le changer pour false ne fonctionne pas non plus…

Peut-être qu’elle est là, la cause de tous les problèmes (customisation du style du bouton inclus)…

J’ajoute un drag and drop HTML et j’ajoute le code HTML. Il y aurait une autre façon de faire ?

Merci de m’aider Olivier !

#6

Non tu le fais bien comme il faut!

<form action="/your-server-side-code" method="POST">
	<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
		data-key="DATA KEY"
		data-amount="999"
		data-name="Alpagas Fibrefine"
		data-description="Widget"
		data-image="https://s3.amazonaws.com/stripe-uploads/acct_187x9wKsRt1sne1vmerchant-icon-1462545421718-fibrefinelogoimage.jpg"
		data-locale="auto"
		data-label="Texte de ton bouton ici"
		data-currency="cad">
	</script>
</form>

Tu dois bien sûr remplacer la valeur DATA KEY par ta clef d’API publique.

#7

C’est exactement ce que j’ai fait…

Je n’ai pas remplacé ma clé encore parce que je suis encore en test, mais j’ai testé voir si c’était parce que j’étais en preview (des fois que…)… mais ça fonctionne pas plus quand la page est publiée… :cry:

#8

J’ai testé avec le code «custom» et je peux modifier mon bouton…
Est-ce qu’ils pourraient avoir bloqué la customisation pour les boutons avec la méthode -simple- ?

C’est ça qui me fait peur pour l’intégration custom:
«The custom integration allows you to use any HTML element or JavaScript event to trigger Checkout. The custom integration requires solid JavaScript skills, and you’ll have to perform all of the requisite steps that a simple integration does for you.»

J’ai pas de super compétences en Javascript, moi !!! :stuck_out_tongue:

#9

Veux-tu me donner l’URL de ta page où il y a le code que je t’ai donné ci-dessus s’il te plaît? Je vais pouvoir aller voir les erreurs dans la console.

Et remplace la valeur DATA KEY, je suis presque certain que c’est ce qui cause problème.

#10

Voici la page !
https://alpagasfibrefine.leadpages.co/yoga-la-ferme/

En revérifiant à tête reposée, j’ai trouvé une coquille dans mon code qui faisait que le texte du bouton ne marchait pas (my bad ! ). Mais j’ai toujours pas trouvé pour le CSS… :stuck_out_tongue:

#11

Ah Ah !!! J’ai réussi ! :slight_smile: Youpi !!!

Vive le samedi où la tête est plus libre de tous les soucis hebdomadaires ! :wink: Tsé quand tu travailles le CSS depuis plus de 5 ans mais que tu n’utilises pas la bonne class… :stuck_out_tongue:

2 « J'aime »
#12

Hahahahaha je comprend très bien ça :laughing:

Essaie d’ajouter ça sur ton CSS :wink:

.stripe-button-el:not(:disabled):active, .stripe-button-el.active{
    background: #bd081c;
}
.stripe-button-el:not(:disabled):active span{
    box-shadow:none;
}

Ça va régler ton problème de quand on clique et la petite ligne au dessus de ton texte!

1 « J'aime »
#13

Merci !

J’ai ajouté quelques petits trucs et ça sort beaucoup mieux maintenant ! Merci de ton aide @Olivier_Lambert !!! :slight_smile:

1 « J'aime »
#14

Bon, la suite n’était pas aussi simple que je le pensais ! :stuck_out_tongue:

J’ai appliqué tout le code pour procéder à la facturation selon ce que Stripe inscrit dans les docs (exemple en PHP)

J’ai même trouvé le site LeadStripe, qui détaille en vidéo la procédure pour intégrer Stripe à une leadpage (en ajoutant des modifications supplémentaire au code de Stripe). Mais je n’ai pas plus de succès…

Après le paiement, j’arrive sur une page blanche… et rien n’est évidemment facturé dans mon dashbord de test sur Stripe !

J’ai un doute que le problème vient de la librairie de Stripe qui ne fonctionne pas comme il faut dans ce cas…
J’ai pris la version «alternative» où je n’ai pas (il me semble) à installer Composer.

https://www.alpagasfibrefine.com/yoga.html

Une idée ? :confused:

#15

Ça fonctionne !!! :slight_smile:
J’avais oublié de mettre à jour un fichier… :tired_face:

Pour le bénéfice de tous;

C’est du copier-coller, mais il faut être vraiment être alerte, pas endormie comme moi depuis 8 mois #bébémegardereveillee #jeveuxdormir. Alors pour les somnolents…
Tout est sur cette page: https://stripe.com/docs/checkout/php

1- Faire la landing page

2- Télécharger la librairie de Stripe et mettre le dossier dézippé sur son serveur

Capture d&#39;écran 2017-04-21 10.35.47.jpg1010×575 57.8 KB

3- Copier-coller les codes sur la page (https://stripe.com/docs/checkout/php).
Si vous êtes connectés, vous allez avoir vos codes test en prime dans le code.
Créer des fichiers charge.php et config.php qu’on met sur son serveur en prenant soin de mettre le chemin vers le dossier de la librairie de stripe sur son serveur dans le fichier config.php en haut ex: ( require_once(‘stripe/init.php’); ). Modifier le fichier charge.php selon les besoins.

4- Mettre le troisième code (formulaire) avec un drag-drop HTML, modifier selon les besoins (style et contenu), enregistrer, publier la page et aller chercher le HTML de la page dans les options de publication.

5- Mettre le fichier html au même endroit que les autres fichiers. Testez et vérifier si l’argent est entré dans le Dashboard test de Stripe.

6- Si ça fonctionne, remplacez les codes test par les codes véritables.

6- Essayez de dormir… :sleeping:

2 « J'aime »
#16

Merci pour le suivi!

Si jamais tu as d’autres problèmes avec ton PHP, fais moi signe :slight_smile:

1 « J'aime »
#17

Merci !!! Je me débrouille en PHP, mais faut que je travaille dur des fois pour arriver au bon résultat ! :stuck_out_tongue:

2 « J'aime »
#18

Un message a été déplacé vers un nouveau sujet : Problème de configuration de Stripe!