Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
CoffeeScript Ruby
branch: master
Failed to load latest commit information.
assets first commit
lib Fix incorrectly named address attributes
src Fix incorrectly named address attributes
test backport validations
.gitignore first commit
Gemfile first commit
Gemfile.lock first commit
LICENSE first commit
README.md Update README.md
Rakefile first commit
package.json first commit

README.md

Stripe Payment Tag

The Payment Tag makes it even easier to integrate Stripe directly into your website.

It'll take care of building credit card inputs, validation, error handling, and sending the encrypted card number securely to Stripe.

Usage

To use the Payment Tag, first download the required JavaScript. Then, include the library in your HTML's <head>. The CSS is optional—feel free to override it in your own pages. The Payment Tag also requires jQuery, which you'll need to include if you haven't already done so.

Then, just pop the <payment> tag in a form. You'll need to set the data-key attribute to your publishable key, which you can get from your account settings.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="lib/tag.dev.js"></script>

<form action="/customers" method="post">
  <payment key="your-publishable-key"></payment>
  <input type="submit" value="Submit">
</form>

That's all there is to it. When the page loads, the <payment> tag will be turned into a bunch of inputs ready to receive credit card data. Remember to replace your test publishable key with your live publishable key before you deploy in production.

When the form is submitted, the user's credit card data will be sent over SSL to Stripe, the <payment> element will be replaced with a hidden input called stripeToken, and finally the form will be submitted to your servers. On your server, you can then use the stripeToken parameter to charge the card. The enclosing form can, of course, contain other <input>s. You can embed it on any regular form on your site.

Example

Try filling out the example with Stripe's test card number, 4242 4242 4242 4242, any three digit CVC code, and a valid expiry date.

Security

You should make sure all payment forms are served over SSL. Stripe makes sure that a customer's credit-card data never touches your server, greatly simplifying your security precautions.

Styling

Default styles are included in assets/styles.css. When a field fails validation, a class of invalid will be added to its <label>.

Events

There are a number of events the <payment> tag triggers during its lifetime. They're all name-spaced by payment, and you can bind to them (using jQuery) like this:

$('payment').bind('success.payment', function (e, token) {
  // ...
});

The available events are:

  • invalid - a field is invalid
  • pending - request to Stripe has been made
  • complete - request to Stripe has completed
  • success - request to Stripe was successful
  • error - request to Stripe failed
Something went wrong with that request. Please try again.