-
-
Save boucher/1750368 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 Sample Form</title> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | |
| <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script> | |
| <script type="text/javascript" src="https://js.stripe.com/v1/"></script> | |
| <script type="text/javascript"> | |
| Stripe.setPublishableKey('pk_YOUR_PUBLISHABLE_KEY'); | |
| $(document).ready(function() { | |
| function addInputNames() { | |
| // Not ideal, but jQuery's validate plugin requires fields to have names | |
| // so we add them at the last possible minute, in case any javascript | |
| // exceptions have caused other parts of the script to fail. | |
| $(".card-number").attr("name", "card-number") | |
| $(".card-cvc").attr("name", "card-cvc") | |
| $(".card-expiry-year").attr("name", "card-expiry-year") | |
| } | |
| function removeInputNames() { | |
| $(".card-number").removeAttr("name") | |
| $(".card-cvc").removeAttr("name") | |
| $(".card-expiry-year").removeAttr("name") | |
| } | |
| function submit(form) { | |
| // remove the input field names for security | |
| // we do this *before* anything else which might throw an exception | |
| removeInputNames(); // THIS IS IMPORTANT! | |
| // given a valid form, submit the payment details to stripe | |
| $(form['submit-button']).attr("disabled", "disabled") | |
| Stripe.createToken({ | |
| number: $('.card-number').val(), | |
| cvc: $('.card-cvc').val(), | |
| exp_month: $('.card-expiry-month').val(), | |
| exp_year: $('.card-expiry-year').val() | |
| }, function(status, response) { | |
| if (response.error) { | |
| // re-enable the submit button | |
| $(form['submit-button']).removeAttr("disabled") | |
| // show the error | |
| $(".payment-errors").html(response.error.message); | |
| // we add these names back in so we can revalidate properly | |
| addInputNames(); | |
| } else { | |
| // token contains id, last4, and card type | |
| var token = response['id']; | |
| // insert the stripe token | |
| var input = $("<input name='stripeToken' value='" + token + "' style='display:none;' />"); | |
| form.appendChild(input[0]) | |
| // and submit | |
| form.submit(); | |
| } | |
| }); | |
| return false; | |
| } | |
| // add custom rules for credit card validating | |
| jQuery.validator.addMethod("cardNumber", Stripe.validateCardNumber, "Please enter a valid card number"); | |
| jQuery.validator.addMethod("cardCVC", Stripe.validateCVC, "Please enter a valid security code"); | |
| jQuery.validator.addMethod("cardExpiry", function() { | |
| return Stripe.validateExpiry($(".card-expiry-month").val(), | |
| $(".card-expiry-year").val()) | |
| }, "Please enter a valid expiration"); | |
| // We use the jQuery validate plugin to validate required params on submit | |
| $("#example-form").validate({ | |
| submitHandler: submit, | |
| rules: { | |
| "card-cvc" : { | |
| cardCVC: true, | |
| required: true | |
| }, | |
| "card-number" : { | |
| cardNumber: true, | |
| required: true | |
| }, | |
| "card-expiry-year" : "cardExpiry" // we don't validate month separately | |
| } | |
| }); | |
| // adding the input field names is the last step, in case an earlier step errors | |
| addInputNames(); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Stripe Example Form</h1> | |
| <form action="/" method="post" id="example-form" style="display: none;"> | |
| <div class="form-row"> | |
| <label for="name" class="stripeLabel">Your Name</label> | |
| <input type="text" name="name" class="required" /> | |
| </div> | |
| <div class="form-row"> | |
| <label for="email">E-mail Address</label> | |
| <input type="text" name="email" class="required" /> | |
| </div> | |
| <div class="form-row"> | |
| <label>Card Number</label> | |
| <input type="text" maxlength="20" autocomplete="off" class="card-number stripe-sensitive required" /> | |
| </div> | |
| <div class="form-row"> | |
| <label>CVC</label> | |
| <input type="text" maxlength="4" autocomplete="off" class="card-cvc stripe-sensitive required" /> | |
| </div> | |
| <div class="form-row"> | |
| <label>Expiration</label> | |
| <div class="expiry-wrapper"> | |
| <select class="card-expiry-month stripe-sensitive required"> | |
| </select> | |
| <script type="text/javascript"> | |
| var select = $(".card-expiry-month"), | |
| month = new Date().getMonth() + 1; | |
| for (var i = 1; i <= 12; i++) { | |
| select.append($("<option value='"+i+"' "+(month === i ? "selected" : "")+">"+i+"</option>")) | |
| } | |
| </script> | |
| <span> / </span> | |
| <select class="card-expiry-year stripe-sensitive required"></select> | |
| <script type="text/javascript"> | |
| var select = $(".card-expiry-year"), | |
| year = new Date().getFullYear(); | |
| for (var i = 0; i < 12; i++) { | |
| select.append($("<option value='"+(i + year)+"' "+(i === 0 ? "selected" : "")+">"+(i + year)+"</option>")) | |
| } | |
| </script> | |
| </div> | |
| </div> | |
| <button type="submit" name="submit-button">Submit</button> | |
| <span class="payment-errors"></span> | |
| </form> | |
| <!-- | |
| The easiest way to indicate that the form requires JavaScript is to show | |
| the form with JavaScript (otherwise it will not render). You can add a | |
| helpful message in a noscript to indicate that users should enable JS. | |
| --> | |
| <script>if (window.Stripe) $("#example-form").show()</script> | |
| <noscript><p>JavaScript is required for the registration form.</p></noscript> | |
| </body> | |
| </html> |
It seems to me that something this example lacks is the purchase-specific information.
For example:
data-amount="7199"
data-name="Serious Coder; Happy Client"
data-description="1 textbook ($71.99)"
What needs to be sent (POSTed) from the client to the server in terms of items purchased, their costs, and the total price? And are there certain key words or formats to be used for that?
I know that, using Stripe.js or the form about, the client-facing page will POST the form data to the server as a secret token. Does that token include Amount, ItemName and Description? Or should the purchase info be sent separately?
After the token is received by the server, the card is charged with something like this (which is from stripe.com/docs/tutorials/charges):
$charge = Stripe_Charge::create(array(
"amount" => 1000, // amount in cents, again
"currency" => "usd",
"card" => $token,
"description" => "payinguser@example.com")
);
Am I missing something obvious? I'd like a complete example, which includes a sample purchase item and price.
Thanks!
Rick
I get the following error when I click the submit button:
HTTP Error 405.0 - Method Not Allowed
The page you are looking for cannot be displayed because an invalid method (HTTP verb) is being used.
Any ideas?
Have to agree with RLBruderick - why is there no straightforward example of a page in which a user picks one or more of a variety of the products available and clicks to pay? Overall, the Stripe docs overemphasize simple stuff that need not be said and casually miss out both a much-needed overview and a real-world example. You have to google around looking for some way of having the data-amount and data-description adapt to what the user is buying. Stripe would be great if we wanted to make one-product checkouts, but I do (likewise) feel that either I'm missing something very basic or some thing(s) very basic is/are missing from the support docs. Most use cases, the customer chooses a product and we want to arrange payment for that product with all relevant data for the transaction being returned for order fulfillment - and isn't that just normal, the usual thing?
When i look at the documentation, i see that the checkout form have about 10 lines of code. It works as far as it shows the form. I do not want to grab credit card info i want to have a payment processor that does it all. How do we simply send back the token and where then again and how do we receive the ok so we can deliver what ever the customer bought.
I have to say that even if stripe people pretend it is easy, it is not.
May i suggest that you rocket science guys put up a simple system to generate all the necessary to simply copy and paste what we need... It would take 5 minutes instead of 5 days.
Too bad, but i like your interface, but i really do not like the amazing complexity of the whole integration process.
Simple is beautyful, take example from Paypal...
Base on Stripe Docs. Input fields representing sensitive card data (number, CVC, expiration month and year) do not have a "name" attribute to prevent hitting the server. I guess, another option of having "addInputNames()" is to make "jquery validation" target input field(s) ID ("id" attribute), ref: http://jqueryvalidation.org/reference/ under "Fields with complex names (brackets, dots)" section.
Where can I go for help with stripe in meteor? Are there any predefined templates available?
d4goxn: you hide the names of the inputs because then the browser will not pass that information to the next page. It is a form of security knowing those fields are not sent at all.