-
-
Save boucher/1750361 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> | |
| <title>Stripe Getting Started Form</title> | |
| <script type="text/javascript" src="https://js.stripe.com/v1/"></script> | |
| <!-- jQuery is used only for this example; it isn't required to use Stripe --> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| // this identifies your website in the createToken call below | |
| Stripe.setPublishableKey('YOUR_PUBLISHABLE_KEY'); | |
| function stripeResponseHandler(status, response) { | |
| if (response.error) { | |
| // re-enable the submit button | |
| $('.submit-button').removeAttr("disabled"); | |
| // show the errors on the form | |
| $(".payment-errors").html(response.error.message); | |
| } else { | |
| var form$ = $("#payment-form"); | |
| // token contains id, last4, and card type | |
| var token = response['id']; | |
| // insert the token into the form so it gets submitted to the server | |
| form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />"); | |
| // and submit | |
| form$.get(0).submit(); | |
| } | |
| } | |
| $(document).ready(function() { | |
| $("#payment-form").submit(function(event) { | |
| // disable the submit button to prevent repeated clicks | |
| $('.submit-button').attr("disabled", "disabled"); | |
| // createToken returns immediately - the supplied callback submits the form if there are no errors | |
| Stripe.createToken({ | |
| number: $('.card-number').val(), | |
| cvc: $('.card-cvc').val(), | |
| exp_month: $('.card-expiry-month').val(), | |
| exp_year: $('.card-expiry-year').val() | |
| }, stripeResponseHandler); | |
| return false; // submit from callback | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Charge $10 with Stripe</h1> | |
| <!-- to display errors returned by createToken --> | |
| <span class="payment-errors"></span> | |
| <form action="" method="POST" id="payment-form"> | |
| <div class="form-row"> | |
| <label>Card Number</label> | |
| <input type="text" size="20" autocomplete="off" class="card-number" /> | |
| </div> | |
| <div class="form-row"> | |
| <label>CVC</label> | |
| <input type="text" size="4" autocomplete="off" class="card-cvc" /> | |
| </div> | |
| <div class="form-row"> | |
| <label>Expiration (MM/YYYY)</label> | |
| <input type="text" size="2" class="card-expiry-month"/> | |
| <span> / </span> | |
| <input type="text" size="4" class="card-expiry-year"/> | |
| </div> | |
| <button type="submit" class="submit-button">Submit Payment</button> | |
| </form> | |
| </body> | |
| </html> |
Cardholders name etc.. other fields. You could use jQuery to get your own fields from the pseudo form by ID,name or class ( Not sure why a form is even necessary really). Then use an Ajax call to send that other data to your server for later login and for general information gathering and allow Stripe to do its thing.
The customers would never be the wiser.
Or build a first step form that gathers user information,..This form would submit to the server, then redirect to the second form. Then a second form to finalize with Stripe.
How do I make the amount Field Editable ??
So what's the current suggested method for accepting variable payment amounts? Users must be able to specify how much they're going to be paying, as seen here:
https://github.com/begriffs/lucre
However, it's not possible with stripe-php?
Any chance someone could update this gist to accept payment amounts? Would love to see an example. Now I'm gonna dig through the 32 forks and see if anyone else has added amounts. :)
Hi
I am using custom form-data and want to auto-submit the form, how can I do that?
If you want to disable the submit button with plain JavaScript:
// Class name of button is submit-button
document.getElementsByClassName('submit-button')[0].disabled = true;
// For extra credit if you create a class to style the button while it is loading you can assign it like this
document.getElementsByClassName('submit-button')[0].classList.add("is-loading");
To enable:
document.getElementsByClassName('submit-button')[0].disabled = false;
document.getElementsByClassName('submit-button')[0].classList.remove("is-loading");
I was just about to create fields for name and address too! (peple don't like to give away credit card info if they are not sure they have logged-in or at least given their personal info! "How do they know where to deliver or whom to credit the payment to?", they would think.
Did you fix it?
Why is that failing?