web-dev-qa-db-fra.com

Comment ajouter des champs personnalisés au formulaire contextuel de Stripe Checkout

Comment puis-je ajouter des champs personnalisés au formulaire Stripe Checkout tels que prénom, nom et peut-être même une case à cocher avec un bouton personnalisé? Jusqu'à présent, j'ai trouvé cela;

<script src="https://checkout.stripe.com/checkout.js"></script>

<form action="/charge" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_i2txBI2jUjSQIMoqFz3Fo326"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-name="Matt's Widgets and Gizmos"
    data-description="2 widgets ($20.00)"
    data-amount="2000"
    data-billingAddress="true"
    data-shippingAddress="true">
  </script>
</form>

Et j'ai trouvé que Stripe Checkout ne peut inclure que les valeurs personnalisées suivantes qui sont comme sous;

stripeBillingName: 
stripeBillingAddressLine1: 
stripeBillingAddressApt:
stripeBillingAddressZip: 
stripeBillingAddressCity: 
stripeBillingAddressState: 
stripeBillingAddressCountry: 
stripeBillingAddressCountryCode:

Y a-t-il un moyen de contourner cela? S'il vous plaît laissez-moi savoir, je vous remercie

javascripthtmlstripe-payments
17
Ahmad

Il n'y a aucun moyen de Tweak Stripe Checkout malheureusement pour ajouter un champ personnalisé ou une case à cocher. La solution ici consiste à utiliser Paiement personnalisé et à ajouter ces champs supplémentaires à votre propre formulaire. Vous collecterez par exemple le nom du client et lui demanderez d'accepter vos propres conditions de service et ne lui permettrez de cliquer sur le bouton Payer qu'une fois qu'il le fera.

Ensuite, une fois que le client a rempli Checkout avec les détails de sa carte et que Stripe vous a renvoyé le jeton que vous enverriez à votre serveur avec les détails supplémentaires que vous avez collectés de votre côté.

14
koopajah

Stripe recommande désormais d'utiliser la méthode stripe.js par rapport à la méthode modale de paiement obsolète (à ne pas confondre avec le nouveau Stripe Checkout ).

À cette fin, afin d'ajouter des champs personnalisés (tels que le nom, le type de package, les balises personnalisées, etc.), ce que j'ai trouvé fonctionne est de peaufiner la fonction stripe.js stripeTokenHandler () en ajoutant:

var customInput = document.createElement('input');
customInput.setAttribute('type', 'hidden');
customInput.setAttribute('name', 'customInput');
customInput.setAttribute('value', $("input[name=customInput]:checked").val());
form.appendChild(customInput);

Donc, si j'avais un groupe de boutons radio appelé "customInput", il attacherait la valeur du bouton radio sélectionné au champ "customInput" $ _POST. De cette façon, le script cible peut le récupérer et l'utiliser.

J'espère que cela aide quelqu'un.

0
Chris Simmons

Vous pouvez essayer d'ajouter votre propre fichier déposé en tant que clientReferenceId ie. => extrauserid :: option2 :: option2 mais malheureusement vous n'obtenez pas ceci dans payment_intent.succeeded comme les SKU manquants.

chaîne clientReferenceId

Une chaîne unique pour référencer la session de paiement. Il peut s'agir d'un identifiant client, d'un identifiant de panier ou similaire. Il est inclus dans le webhook checkout.session.completed et peut être utilisé pour effectuer l'achat.

var data = {
    customerEmail: eml,
    successUrl: 'https://...',
    cancelUrl: 'https://...',
    clientReferenceId: user + '::' + option1,
    items: [{  
       sku: sku, 
       quantity: 1
    }],
}
stripe.redirectToCheckout(data);

checkout.session.completed 

"cancel_url": "https://....",
"client_reference_id": "user123::somevalue",
"customer": "cus_H1vFYbxY2XMAz6",
0
user956584