THELIA Forum

Welcome to the THELIA support and discusssion forum

Offline


Bonjour à tous, je progresse dans ma découverte de Stripe. Je voudrais personnaliser le formulaire.
J'ai vu qu'il y avait un fichier v/local/modules/StripePayment/templates/frontOffice/default/stripe-paiement.html
Est-ce bien dans ce fichier qu'il faut intégrer les éléments décrits dans cette page https://stripe.com/docs/payments/quickstart pour obtenir un formulaire configurable avec Elements ?
(pas simple...)
Merci,
Éric LM
Entre autre, je voudrais que le formulaire soit plus responsive sur les petits écrans, car le formulaire de base est tout en ligne, et ne sera pas facile à utiliser sur un portable.

Last edited by elm31rugby (20-05-2022 10:59:56)

Offline


Bonjour à tous, je progresse encore. J'ai bien trouvé où est configuré le formulaire de paiement. L'implantation se fait dans le fichier stripe-js.html, très exactement ici :

	<div class="payment">
		{if $oneClickPayment}
			<span class="payment-label">{intl l="Or enter card details" d="stripepayment.fo.default"}</span>
		{/if}
		<div id="card-element">
			<!-- A Stripe Element will be inserted here. -->
		</div>
	</div>

et l'envoi de l'Element Strip est défini dans le fichier order-invoice-after-js-include.html, très exactement ici :

// Create an instance of the card Element.
    var card = elements.create('card', {style: style});

    // Add an instance of the card Element into the `card-element` <div>.
    card.mount('#card-element');

Jusque là, tout fonctionne, le paiement se fait, etc.
Mais je souhaite séparer les trois input, car sur petit écran, le formulaire n'est pas responsive.
Grâce à l'exemple dans Github (exemple 3) https://github.com/stripe/elements-examples j'arrive à afficher mes trois input séparément.
Mais dans ce cas, le paiement est incomplet
Si @roadster31 et @Etienne63 qui ont développé ce plugin avaient une petite piste à me transmettre, ce serait super !
J'ai écrit à Stripe en leur posant la question, j'attends une réponse.
Bonne journée,
Éric LM

Offline


Avec un peu de CSS, tout est possible.


OpenStudio Toulouse

Offline


Certes, certes... mais dans la jungle du CSS, parfois il suffit d'une pancarte, d'une marque de sentier de Grande Randonnée, d'un cailloux, que sais-je ! pour indiquer la direction.
Et quand je dis la jungle du CSS, je dis surtout la jungle du CSS du formulaire Stripe
Et là, après plusieurs heures de recherches, si j'avais une petite piste exploitable, je serai prêt à payer une grosse bière à celui qui me mettrait sur le droit chemin. (à mon avis, on peut faire livrer des bières)
Merci !
Eric
J'ai également contacté Stripe à ce sujet

Offline


Je n'ai pas de Stripe fonctionnel sous la main. Il ressemble à quoi déjà ce formulaire ?


OpenStudio Toulouse

Offline


En fait, c'est un formulaire "clé en main" : on ne le configure pas, c'est un des modèles proposés par Stripe.
On l'injecte ici avec element.create

// Create an instance of the card Element.
    var card = elements.create('card', {style: style});

    // Add an instance of the card Element into the `card-element` <div>.
    card.mount('#card-element');

Et le résultat, c'est un seul input pour les 4 éléments : cardNumber, cardExpiry, cardCVC, et automatiquement il ajoute un code postal à entrer.
Stripe m'a dit qu'il ne fallait pas chercher à séparer les input.

Et sur petit écran, voici le résultat :
img1.png
img2.png

Si on réduit la taille des caractères, j'arrive à écrire les 16 chiffres de la carte de crédit, mais juste après la date d'expiration se décale sur la gauche, et chevauche le numéro de carte de crédit. On n'y voit plus rien.

Offline


Voici la réponse de Stripe :

Stripe wrote:

Effectivement il semblerait que cela soit dû à la police utilisée pour le mois et l’année de la carte bancaire, la police étant trop grande l’utilisation de sa case dans son ensemble empêche l'utilisateur d’entrer toutes les informations.

Afin de corriger cela, je vous donne ce lien, sur lequel vous trouverez toutes les informations :
https://stripe.com/docs/js/appendix/css … rce_object

Vous trouverez comment modifier la taille de votre police ainsi que son modèle. Cette documentation sur notre code est vraiment complète et vous trouverez énormément d'informations à l’intérieur.

Bon, je regarde.

Offline


Bon, ça marche. Vous ne pouvez pas savoir comment je suis content !
Alors...
1) Dans order-invoice-after-js-include.html :
- je mets le fontSize à 1em (et non à 19px initialement)
- je change la couleur du texte, pour une meilleure visibilité

Ensuite, l'idée est d'agrandir le formulaire :

2) dans le style.css du module Stripe
- je passe .stripe-payement à 100% (.stripe-paiement{width=100%;})
- et pour une meilleure visibilité, j'éloigne le formulaire du logo Stripe : .paiement{margin:20px 0;}

3) ensuite, je gagne encore de la place dans l'affichage de l'input, en venant contraindre le css de Thelia :
Toujours dans mon style.css du module de paiement, je rajoute :
- .panel-body{padding:0 !important}
- .list-group-item{padding:10px 5px !important}
(initialement, on a un padding{10px 15px}, je gagne un peu de place sur les côtés)

Et ça marche : c'est à dire que je peux entrer tous mes chiffres (Numéro de carte, date d'expiration, code CVC et code postal) sans que les chiffrent ne se chevauchent.

De plus, j'ai ajouté un petit baratin explicatif au dessus du paiement Stripe, pour rassurer les clients.

Point de détail : comme il y a des translations dans les css du formulaire de paiement, sur petit écran, le site n'est pas "stable" lorsque l'on entre les numéros. L'affichage sort de l'écran. (enfin, je pense que c'est à cause des translations)
De même, il faut que je règle la vérification de la commande, car le tableau des produits commandés dépasse l'écran.
Mais, bon, déjà, c'est mieux.
Bon week-end à tous,
Éric LM

Offline


Bon, on est d'accord : pour faire cela très proprement, il faudrait garder la largeur du formulaire à 80% pour l'affichage "écran", et le passer à 100% uniquement pour les petits écrans.
Je vais y faire... mais pour moi le problème est réglé.

Offline


Bravo pour ta persévérance !!

Concernant la gestion du responsive je te recommande chaudement de jeter un coup d'oeil du côté des : meadia queries.

Tu pourrais par exemple pour cibler les mobiles à 100% aire quelque chose comme ça :

@media only screen and (max-width: 759px) {
	.stripe-paiement{
		width=100%;
	}
}

Offline


Oui, c'était mon intention. Mais je ferai cela lundi...
Bon dimanche !