Skip to content

Instantly share code, notes, and snippets.

@briancollins

briancollins/StripeTutorialPage.html

Forked from maccman/StripeTutorialPage.html
Last active October 10, 2019 23:10
Show Gist options
  • Star 96 You must be signed in to star a gist
  • Fork 21 You must be signed in to fork a gist
  • Save briancollins/6365455 to your computer and use it in GitHub Desktop.
Save briancollins/6365455 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
StripeTutorialPage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Stripe Getting Started Form</title>
<!-- The required Stripe lib -->
<script type="text/javascript" src="https://js.stripe.com/v2/"></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.9.1/jquery.min.js"></script>
<script type="text/javascript">
// This identifies your website in the createToken call below
Stripe.setPublishableKey('YOUR_PUBLISHABLE_KEY');
var stripeResponseHandler = function(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// 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" />').val(token));
// and re-submit
$form.get(0).submit();
}
};
jQuery(function($) {
$('#payment-form').submit(function(e) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('button').prop('disabled', true);
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
</script>
</head>
<body>
<h1>Charge $10 with Stripe</h1>
<form action="" method="POST" id="payment-form">
<span class="payment-errors"></span>
<div class="form-row">
<label>
<span>Card Number</span>
<input type="text" size="20" data-stripe="number"/>
</label>
</div>
<div class="form-row">
<label>
<span>CVC</span>
<input type="text" size="4" data-stripe="cvc"/>
</label>
</div>
<div class="form-row">
<label>
<span>Expiration (MM/YYYY)</span>
<input type="text" size="2" data-stripe="exp-month"/>
</label>
<span> / </span>
<input type="text" size="4" data-stripe="exp-year"/>
</div>
<button type="submit">Submit Payment</button>
</form>
</body>
</html>
@cbu123
Copy link

cbu123 commented Jan 16, 2016

After the data is captured, how is it processed ? when i fill the form out i do not see the balance on my stripe dashboard.

Copy link

ghost commented Mar 9, 2016

@jkarnowski

I did the user input as the following (in my controller in Laravel)

       `<form action="" method="POST" id="payment-form">
      <span class="payment-errors"></span>
      <div class="form-row">

        <label>
          <span>Donation Amount (USD only)</span>
          <input type="text" size="20" name="donationAmount"/>
        </label>
      </div>

      <div class="form-row">
        <label>
          <span>Card Number</span>
          <input type="text" size="20" data-stripe="number"/>
        </label>
      </div>

      <div class="form-row">
        <label>
          <span>CVC</span>
          <input type="text" size="4" data-stripe="cvc"/>
        </label>
      </div>

      <div class="form-row">
        <label>
          <span>Expiration (MM/YYYY)</span>
          <input type="text" size="2" data-stripe="exp-month"/>
        </label>
        <span> / </span>
        <input type="text" size="4" data-stripe="exp-year"/>
      </div>

      <button type="submit">Submit Payment</button>
    </form>`

Then in my controller I put:

         `public function getDonorInformation(){
        // Get the credit card details submitted by the form
        $token = Input::get('stripeToken');
        $donation = Input::get('donationAmount');

        function getMoneyAsCents($donation)
            {
                $donation = preg_replace("/\,/i","",$donation);
                $donation = preg_replace("/([^0-9\.\-])/i","",$donation);

                if (!is_numeric($donation))
                {
                    return 0.00;
                }
                // convert to a float explicitly
                $donation = (float)$donation;
                return round($donation,2)*100;
            }

        $value = getMoneyAsCents($donation);

        try {
          $charge = Stripe_Charge::create(array(
            "amount" => $value, // amount in cents, again
            "currency" => "usd",
            "source" => $token,
            "description" => "Example charge"
            ));
        } catch(Stripe_CardError $e) {
          // The card has been declined
        }`

It works.

@antonydenyer
Copy link

Just wanted to double check the possible values for the data-stripe attribute and incase anyone was have the same problem I had. Looking at the source for https://js.stripe.com/v2/ it looks like it should be:

number
cvc
exp
exp_month
exp_year
name
address_line1
address_line2
address_city
address_state
address_zip
address_country
currency

Is that right? Is there any other documentation that I'm missing?

Thanks

@MladenJanjetovic
Copy link

Can I use data-stripe="name" for cardholder name?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment