We'll cover what to do after that in our next tutorial. Before we get to the first step, let's
take a quick look at a typical payment form. This is the part you can build with your web
framework, or by hand in HTML — however you're used to building forms on the web.

Tip

In test mode, you can use the card number 4242424242424242 with any CVC and a
valid expiration date. Read more in our testing documentation.

Fairly standard. Note how input fields representing sensitive card data
(number, CVC, expiration month and year) do not have a "name" attribute. This prevents them
from hitting your server when the form is submitted. We're also including a data-stripe attribute
on the relevant fields, which we'll discuss later in the tutorial.

Your life becomes easier if sensitive cardholder data does not hit your servers. You no longer
need to worry about redacting logs, encrypting cardholder details, or other burdens of PCI compliance.

With Stripe.js, you never have to handle sensitive card data. It's automatically converted to
a token which you can safely send to your servers and use to charge your customers.

Stripe.setPublishableKey(..) identifies your website when communicating with Stripe.
Note that we've pre-filled the example with your test publishable API key.
Remember to replace the test key with your live key in production.
You can get all your keys from your account page.

Step 2: Create a single use token

Next, we will want to create a single-use token that can be
used to represent the credit card information your customer
enters. Note that you should not store or attempt to
reuse single-use tokens -- if you wish to charge a
credit card multiple times, you should use your token to create a Customer object. After the code we just added,
we'll add an event handler to our form. We want to capture the
submit event, and then use the credit card
information to create a single-use token:

Library agnostic

While we use jQuery in this example, you do not need jQuery
to use Stripe.js – it has no external dependencies.

The important code to notice is the call to Stripe.card.createToken. The first
argument is the form element containing credit card data entered by the user.
The relevant values are fetched from their associated inputs using the data-stripe attribute specified in the first example.

You should provide at least the card number and expiration info. The complete list of fields
you can provide is available in the Stripe.js documentation.

The second argument stripeResponseHandler is a callback that handles the response
from Stripe. createToken is an asynchronous call – it returns immediately
and invokes stripeResponseHandler when it receives a response from Stripe's
servers. Whatever function you pass should take two arguments, status and
response:

{
id: "tok_u5dg20Gra", // String of token identifier,
card: {...}, // Dictionary of the card used to create the token
created: 1438546785, // Integer of date token was created
currency: "usd", // String currency that the token was created in
livemode: true, // Boolean of whether this token was created with a live or test API key
object: "token", // String identifier of the type of object, always "token"
used: false // Boolean of whether this token has been used
}

Input Validation

We've written a general purpose library called jQuery.payment to help with client-side input validation and formatting card numbers.

Step 3: Sending the form to your server

In our example, this is done in stripeResponseHandler:

If the card information entered by the user returned an error, it gets displayed on the
page.

If no errors were returned (i.e. a single-use token was created successfully), add the
returned token to the form in the stripeToken field and submit the form to the
server.

Notice that in order to add the token to the info submitted to your server, we're adding a new
input tag into the form, and setting its value to the id of the token.

After we've added the info to the form, we re-submit the form (remember, we stopped it from
submitting before so we could wait for Stripe to tokenize the credit card details). We call
submit() on the form directly, rather than the jQuery wrapper, so that we don't
run into an infinite loop. The data will be sent as an HTTP POST to the URL in the form's
action.