Last active
April 15, 2020 07:56
-
-
Save adamjstevenson/1d1e9ef3dda9f35c36f3f69474abb70c to your computer and use it in GitHub Desktop.
Stripe.js bootstrap example -- simple
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Bootstrap Stripe.js example form</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12 text-center"> | |
| <h1>A simple Bootstrap Stripe.js payment form</h1> | |
| </div> | |
| </div> | |
| <!-- Simple Bootstrap payment form starts here --> | |
| <!-- Use Jquery in this example --> | |
| <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> | |
| <!-- Bootstrap CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> | |
| <!-- Bootstrap JavaScript --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> | |
| <!-- Stripe.js to collect payment details --> | |
| <script type="text/javascript" src="https://js.stripe.com/v2/"></script> | |
| <!-- Jquery payment library for nicer formatting --> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.4.1/jquery.payment.js"></script> | |
| <script> | |
| // Set your Stripe publishable API key here | |
| Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh'); | |
| $(function() { | |
| var $form = $('#payment-form'); | |
| $form.submit(function(event){ | |
| // Disable the submit button to prevent repeated clicks: | |
| $form.find('.submit').prop('disabled', true).html('Please wait...'); | |
| // Request a token from Stripe: | |
| Stripe.card.createToken($form, stripeResponseHandler); | |
| // Prevent the form from being submitted: | |
| return false; | |
| }); | |
| // Format the card number | |
| $('#number').payment('formatCardNumber'); | |
| }); | |
| function stripeResponseHandler(status, response){ | |
| var $form = $('#payment-form'); | |
| // Clear any existing errors | |
| $form.find('.has-error').removeClass('has-error') | |
| if (response.error){ | |
| // Show the errors on the form | |
| $form.find('.payment-errors').text(response.error.message).addClass('alert alert-danger'); | |
| $form.find('#' + response.error.param).parents('.form-group').addClass('has-error'); | |
| $form.find('button').prop('disabled', false).text('Pay $20'); // Re-enable submission | |
| } | |
| else { // Token was created! | |
| // Get the token ID: | |
| var token = response.id; | |
| // Insert the token into the form so it gets submitted to the server: | |
| $form.append($('<input type="hidden" name="stripeToken" />').val(token)); | |
| // Submit the form: | |
| $form.get(0).submit(); | |
| } | |
| } | |
| </script> | |
| <div class="row"> | |
| <div class="col-md-6 col-md-offset-3"> | |
| <div class="panel panel-default"> | |
| <div class="panel-body"> | |
| <form action="" method="POST" id="payment-form"> | |
| <div class="payment-errors"></div> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="form-group"> | |
| <label>Cardholder Name</label> | |
| <input class="form-control input-lg" id="name" data-stripe="name" type="text" placeholder="Jimmy Dean" required> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="form-group"> | |
| <label>Card Number</label> | |
| <input class="form-control input-lg" id="number" type="tel" size="20" data-stripe="number" placeholder="4242 4242 4242 4242" required> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-3 col-sm-3 col-xs-4"> | |
| <div class="form-group"> | |
| <label>Exp Month</label> | |
| <input class="form-control input-lg" id="exp_month" type="tel" size="2" data-stripe="exp-month" placeholder="01" required> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-3 col-xs-4"> | |
| <div class="form-group"> | |
| <label>Exp Year</label> | |
| <input class="form-control input-lg" id="exp_year" type="tel" size="4" data-stripe="exp-year" placeholder="2020" required> | |
| </div> | |
| </div> | |
| <div class="col-md-6 col-sm-3 col-xs-4"> | |
| <div class="form-group pull-right"> | |
| <label>CVC</label> | |
| <input class="form-control input-lg" id="cvc" type="tel" size="4" data-stripe="cvc" placeholder="555" required> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <button class="btn btn-lg btn-block btn-success submit" type="submit">Pay $20</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Simple Bootstrap payment form ends here --> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I dont really like the philosophy behind Element. I dont want Stripe to provide me with html elements. First if I change for mangopay I have to rewrite a new code then they should act as API that means they should only collect my http request and thats it.