Configuration de la bande avec un montant personnalisé

La méthode particulière (forme simple, intégrée) utilisée ne fonctionnera pas vers la fin recherchée. Vous devez plutôt utiliser l'intégration personnalisée plus flexible, comme on le voit dans les documents . La seule chose qui n'est pas incluse dans l'exemple fourni est la façon de brancher la quantité d'entrée, ce qui n'est pas du tout difficile.

 <input class="form-control" type="number" id="custom-donation-amount" placeholder="50.00" min="0" step="10.00"/> <script src="https://checkout.stripe.com/checkout.js"></script> <button id="customButton ">Purchase</button> <script> var handler = StripeCheckout.configure({ key: 'pk_test_ppailxxxxxxxxxxxxxxxxxxx', image: '/square-image.png', token: function(token) { // Use the token to create the charge with a server-side script. // You can access the token ID with `token.id` } }); document.getElementById('customButton').addEventListener('click', function(e) { // This line is the only real modification... var amount = $("#custom-donation-amount").val() * 100; handler.open({ name: 'Demo Site', description: 'Some donation', // ... aside from this line where we use the value. amount: amount }); e.preventDefault(); }); </script> 

Notez que vous devrez remplir le token: fonction est passée à l'appel StripeCheckout.configure . En particulier, vous devrez soumettre un formulaire ou une requête ajax et gérer cela en conséquence sur votre serveur. Vous utiliserez ensuite cette information sur le serveur, avec la clé secrète, pour envoyer une demande de création de paiement à Stripe. La documentation Stripe contient des informations détaillées sur les informations qui doivent être envoyées à leur appel API et, par conséquent, les informations que vous devrez transmettre à l'appel API sur votre serveur. En particulier, notez que vous devrez probablement faire un accroissement supplémentaire des prix, etc. dans votre fonction token .

Vous aurez besoin d'une autre étiquette de script pour cela, vous ne pouvez pas utiliser javascript dans une étiquette de script qui a une source.

 <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-image="images/button.png" data-key="pk_test_FTZOOu9FL0iYJXXXXXX" data-name="Fund" data-label="DONATE" data-description="ysysys" data-amount="0"></script> <script type="text/javascript"> $(function() { $('.donate-button').click(function(event) { var amount = $('#custom-donation-amount').val(); $('.stripe-button').attr('data-amount', amount) }); }); </script> <input type="number" id="custom-donation-amount" placeholder="50.00" min="0" step="10.00 " /> 

Il est possible d'obtenir un montant variable dans le formulaire de caisse simple. Je ne suis pas sûr de ce cadre que vous utilisez, mais j'ai pu l'atteindre dans mon application Ruby (Padrino – not Rails) en utilisant gon comme suit. 'Load_amount_pence' est une méthode d'aide qui renvoie une chaîne représentant la charge à effectuer. Si vous le souhaitez, cela pourrait être réglé sur une variable choisie par un utilisateur via une requête Ajax, par exemple.

 <script type="text/javascript"> window.gon = {}; gon.charge = charge_amount_pence; </script> 

Et dans le script de caisse:

"data-amount" = gon.charge

En fait, j'utilise la même méthode d'aide dans mon contrôleur pour s'assurer que la quantité correcte est effectivement chargée.

Que diriez-vous de créer un nouvel élément stripe? Cela a fonctionné pour moi,

 <script type="text/javascript"> $(function() { $('.donate-button').click(function(event) { var holder = document.getElementById('aNewDiv'); var script = document.createElement('script'); script.src = 'https://checkout.stripe.com/checkout.js'; script.setAttribute('class', 'stripe-button'); script.setAttribute('data-amount', $('#Amount').val()*100); script.setAttribute('data-key',"pk_test_W0ML1BmfFMa6z3MgD90s7WeN"); script.setAttribute('data-name', "Fund"); script.setAttribute('data-description', "ysysys"); script.setAttribute('data-locale', "auto"); } } </script>