Stripe.js Reference
Build modern, secure payment flows for the web.
This is the API reference for Stripe.js. Use Stripe.js’ APIs to tokenize customer information, collect sensitive card data using customizable Stripe Elements, and accept payments with browser payment APIs like Apple Pay and the Payment Request API.
Including Stripe.js
However you’re using Stripe.js, you always begin by including the library and setting your API key. To get started, include this script on your pages—it should always be loaded directly from https://js.stripe.com:
<script src="https://js.stripe.com/v3/"></script>
To best leverage Stripe’s advanced fraud functionality, include this script on every page of your site, not just the checkout page. This allows Stripe to detect anomalous behavior that may be indicative of fraud as customers browse your website.
Stripe(publishableKey[, options])
Use Stripe(publishableKey[, options]) to create an instance of the Stripe
object. Your Stripe publishable API key is
required when calling this function, as it identifies your website to
Stripe:
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
We‘ve placed a random API key in the code. Replace it with your actual publishable API keys to test this code through your Stripe account.
When you’re ready to accept live payments, replace the test key with your live key in production. Learn more about how API keys work in test mode and live mode.
This function accepts an optional
options object.
Available options are documented below:
| stripeAccount
string |
Connect only. Specifying a connected account ID (e.g., acct_24BFMpJ1svR5A89k) allows you to perform actions on behalf of that account. |
The Stripe object
stripe.elements()stripe.createToken()stripe.createSource()stripe.retrieveSource()stripe.paymentRequest()-
stripe.redirectToCheckout() stripe.retrievePaymentIntent()-
stripe.handleCardPayment() -
stripe.confirmPaymentIntent()
stripe.elements([options])
Create pre-built UI components to collect payment information with Elements.
var elements = stripe.elements();
const elements = stripe.elements();
This method creates an instance of elements, which manages a group of
Elements. It accepts an optional
options object. Available
options are documented below:
| Option | Description | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
fonts
optional Array
|
An array of custom fonts, which Elements created from the
elements object can use.
Fonts can either be loaded via a CSS file by passing an object with the cssSrc attribute:
or they can be loaded directly by passing an object with the following attributes:
|
||||||||||||||
|
locale
string
|
The IETF
language tag of the locale to display placeholders and error
strings in. Setting the locale does not affect the behavior of
postal code
validation—a valid postal code for the billing country of
the card is still required. Default is 'auto' (Stripe
detects the locale of the browser). Supported values are:
ar, da, de,
en, es, fi,
fr, he, it,
ja, no, nl,
pl, sv, zh.
|
stripe.createToken(element, tokenData)
Use stripe.createToken() to convert information collected by Elements
into a single-use token that you safely pass to your server to use in an API
call.
stripe.createToken(card).then(function(result) {
// Handle result.error or result.token
});
const {token, error} = await stripe.createToken(card);
This method takes two arguments.
element, the Element you wish to tokenize data from. If applicable, the Element pulls data from other Elements you’ve created on the same instance ofelementsto tokenize—you only need to supply one element as the parameter.tokenData, an object containing additional payment information you might have collected. In the case of cards, it can contain any of the following parameters:
|
name
recommended string
|
Cardholder name |
|
address_line1
address_line2
address_city
address_state
address_zip
address_country
recommended string
|
Fields for billing address information. The address_country field is a two character country code (for example, 'US').
|
|
currency
optional string
|
Required order to add
the card to a Connect account (in all other cases, this parameter
is not used). Currently, the only supported currency for debit card
payouts is 'usd'.
|
Although these fields are optional, we highly recommend collecting name and address. This information can be used to perform a number of verifications, such as CVC, ZIP, and address verification. Radar includes built-in rules that can block payments where the ZIP or CVC verifications with the cardholder’s bank failed.
stripe.createToken returns a Promise which resolves with a result object. This object has either:
result.token: a Token was created successfully.result.error: there was an error. This includes client-side validation errors. Refer to the API reference for all possible errors.
stripe.createToken('bank_account', bankAccountData)
Use stripe.createToken() to convert bank account information into a
single-use token that you safely pass to your server to use in an API call.
stripe.createToken('bank_account', {
country: 'US',
currency: 'usd',
routing_number: '110000000',
account_number: '000123456789',
account_holder_name: 'Jenny Rosen',
account_holder_type: 'individual',
}).then(function(result) {
// Handle result.error or result.token
});
const {token, error} = await stripe.createToken('bank_account', {
country: 'US',
currency: 'usd',
routing_number: '110000000',
account_number: '000123456789',
account_holder_name: 'Jenny Rosen',
account_holder_type: 'individual',
});
You can also use the IBAN Element to
create bank_account tokens if you need to collect bank account
information from customers in
SEPA countries.
stripe.createToken(iban, {
// country and account_number are automatically populated from the IBAN Element.
currency: 'eur',
account_holder_name: 'Jenny Rosen',
account_holder_type: 'individual',
}).then(function(result) {
// Handle result.error or result.token
});
const {token, error} = await stripe.createToken(iban, {
// country and account_number are automatically populated from the IBAN Element.
currency: 'eur',
account_holder_name: 'Jenny Rosen',
account_holder_type: 'individual',
});
Using stripe.createToken() for bank account details requires an object
containing the following parameters:
|
country
string
|
Two character country code (e.g., 'US').
Not supported if using the IBAN Element, since it will automatically populate the country from user input. |
|
currency
string
|
Three character currency code (e.g., 'usd').
|
|
routing_number
string
|
The bank routing number (e.g., '111000025'). Optional if
the currency is 'eur', as the account number is an IBAN.
|
|
account_number
string
|
The bank account number (e.g., '000123456789')
Not supported if using the IBAN Element, since it automatically populates the account number from user input. |
|
account_holder_name
string
|
The name of the account holder. |
|
account_holder_type
string
|
The type of entity that holds the account. Can be either
'individual' or 'company'.
|
stripe.createToken returns a Promise which resolves with a result object. This object has either:
result.token: a Token was created successfully.result.error: there was an error. This includes client-side validation errors. Refer to the API reference for all possible errors.
stripe.createToken('pii', piiData)
Use stripe.createToken() to convert personally identifiable information
(PII) into a single-use token for
account identity verification.
stripe.createToken('pii', {
personal_id_number: '123131185',
}).then(function(result) {
// Handle result.error or result.token
});
const {token, error} = await stripe.createToken('pii', {
personal_id_number: '123131185',
});
Using stripe.createToken() for PII data requires an object containing the
following parameter:
|
personal_id_number
string
|
The personal ID number. |
stripe.createToken returns a Promise which resolves with a result object. This object has either:
result.token: a Token was created successfully.result.error: there was an error. This includes client-side validation errors. Refer to the API reference for all possible errors.
stripe.createSource(element, sourceData)
Use stripe.createSource(element, sourceData) to convert payment
information collected by Elements into a Source object that you safely pass
to your server to use in an API call. See the
Sources documentation for more information about Sources.
stripe.createSource(iban, {
type: 'sepa_debit',
currency: 'eur',
owner: {
name: 'Jenny Rosen',
},
}).then(function(result) {
// Handle result.error or result.source
});
const {source, error} = await stripe.createSource(iban, {
type: 'sepa_debit',
currency: 'eur',
owner: {
name: 'Jenny Rosen',
},
});
This method takes two arguments.
element, the Element containing payment source information. If applicable, the Element pulls data from other Elements you’ve created on the same instance ofelements.sourceData, a required object containing thetypeof Source you want to create, and any additional payment source information that you have collected. See the Sources API reference for details.
stripe.createSource returns a Promise which resolves with a result object. This object has either:
result.source: a Source was created successfully.result.error: there was an error. This includes client-side validation errors. Refer to the API reference for all possible errors.
stripe.createSource(sourceData)
Use stripe.createSource(sourceData) to convert raw payment information
into a Source object that you can safely pass to your server for use in an
API call. See the Sources documentation for more
information about Sources.
stripe.createSource({
type: 'ideal',
amount: 1099,
currency: 'eur',
owner: {
name: 'Jenny Rosen',
},
redirect: {
return_url: 'https://shop.example.com/crtA6B28E1',
},
}).then(function(result) {
// Handle result.error or result.source
});
const {source, error} = await stripe.createSource({
type: 'ideal',
amount: 1099,
currency: 'eur',
owner: {
name: 'Jenny Rosen',
},
redirect: {
return_url: 'https://shop.example.com/crtA6B28E1',
},
});
This method accepts one argument,
sourceData, which is an
object containing payment source information that you have collected. See
the Sources API reference for details.
stripe.createSource returns a Promise which resolves with a result object. This object has either:
result.source: a Source was created successfully.result.error: there was an error. This includes client-side validation errors. Refer to the API reference for all possible errors.
stripe.retrieveSource(source)
Retrieve a Source using its unique ID and client secret.
stripe.retrieveSource({
id: "src_18eYalAHEMiOZZp1l9ZTjSU0",
client_secret: "src_client_secret_NibvRz4PMmJqjfb0sqmT7aq2",
}).then(function(result) {
// Handle result.error or result.source
});
const {source, error} = await stripe.retrieveSource({
id: "src_18eYalAHEMiOZZp1l9ZTjSU0",
client_secret: "src_client_secret_NibvRz4PMmJqjfb0sqmT7aq2",
});
This method accepts an object
source with the following
required parameters:
| id
string |
Unique identifier of the source. |
| client_secret
string |
A secret available to the web client that created the Source, for purposes of retrieving the Source later from that same client. |
You can use a Source object created with stripe.createSource as the
argument to stripe.retrieveSource, as every Source object has both id
and client_secret keys.
stripe.retrieveSource returns a Promise which resolves with a result object. This object has either:
result.source: a Source was retrieved successfully.result.error: there was an error. Refer to the API reference for all possible errors.
stripe.paymentRequest(options)
Use stripe.paymentRequest() to create a PaymentRequest object. A
PaymentRequest object is used to collect payment information through an
interface controlled and styled by the browser itself (i.e., not by you or
your page). See the
Payment Request Button Element quickstart
for a high-level overview of when you’d want to do this. In Safari,
stripe.paymentRequest() uses Apple Pay, and in other browsers it uses the
Payment Request API standard.
Creating a PaymentRequest requires that you configure it with an
options object.
Available options are documented below.
These options can be updated using paymentRequest.update().
| Option | Description | ||||||
|---|---|---|---|---|---|---|---|
|
country
string
|
The two-letter country code of your Stripe account (e.g.,
'US').
|
||||||
|
currency
string
|
Three character currency code (e.g., 'usd').
|
||||||
|
total
object
|
A payment item object. This payment item is shown to the customer in
the browser‘s payment interface.
|
||||||
|
displayItems
optional Array
|
An array of payment item objects. These payment items are shown as line items
in the browser‘s payment interface. Note that the sum of the line item
amounts does not need to add up to the total amount above.
|
||||||
|
requestPayerName
requestPayerEmail
requestPayerPhone
recommended Boolean
|
By default, the browser‘s payment interface only asks the
customer for actual payment information. Other information, such as
customer name or email, can be collected by setting any of these to
true. This information appears in the
PaymentResponse.
We highly recommend you collect at least one of name, email, or phone as this also results in collection of billing address for Apple Pay. The billing address can be used to perform address verification and block fraudulent payments. For all other payment methods, the billing address is automatically collected when available. |
||||||
|
requestShipping
optional Boolean
|
Collect shipping address by setting requestShipping to
true. The address appears in the
PaymentResponse.
You must also supply a valid ShippingOptions to the
shippingOptions property. This can be up front at the
time stripe.paymentRequest() is called, or in response to
a shippingaddresschange event using the
updateWith callback.
|
||||||
|
shippingOptions
optional Array
|
An array of ShippingOption objects. The first shipping option listed appears in the browser payment interface as the default option. |
stripe.redirectToCheckout(options)
Use stripe.redirectToCheckout to redirect your customers to
Checkout, a Stripe-hosted page to
securely collect payment information. When the customer completes their
purchase, they are redirected back to your website.
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {betas: ['checkout_beta_4']});
stripe.redirectToCheckout({
items: [
// Replace with the ID of your SKU
{sku: 'sku_123', quantity: 1}
],
successUrl: 'https://your-website.com/success',
cancelUrl: 'https://your-website.com/canceled',
}).then(function (result) {
// Display result.error.message to your customer
});
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {betas: ['checkout_beta_4']});
stripe.redirectToCheckout({
items: [
// Replace with the ID of your SKU
{sku: 'sku_123', quantity: 1}
],
successUrl: 'https://your-website.com/success',
cancelUrl: 'https://your-website.com/canceled',
}).then(({error}) => {
// Display error.message to your customer
});
This function accepts a required
options object.
Available options are documented below:
|
items
Array
|
An array of objects representing the items that your customer would
like to purchase. These items are shown as line items in the
Checkout interface and make up the total amount to be collected by
Checkout.
|
||||
|
successUrl
string
|
The URL to which Stripe should send customers when payment is complete. | ||||
|
cancelUrl
string
|
The URL to which Stripe should send customers when payment is canceled. | ||||
|
clientReferenceId
optionalstring
|
A unique string to reference the Checkout session. This can be a
customer ID, a cart ID, or similar. It is included in the
checkout_beta.session_succeeded webhook and can be used
to fulfill the purchase.
|
stripe.retrievePaymentIntent(clientSecret)
Retrieve a PaymentIntent using its client secret.
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {
betas: ['payment_intent_beta_3']
});
stripe.retrievePaymentIntent(
"pi_18eYalAHEMiOZZp1l9ZTjSU0_secret_NibvRz4PMmJqjfb0sqmT7aq2"
).then(function(result) {
// Handle result.error or result.paymentIntent
});
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {
betas: ['payment_intent_beta_3']
});
const {paymentIntent, error} = await stripe.retrievePaymentIntent(
"pi_18eYalAHEMiOZZp1l9ZTjSU0_secret_NibvRz4PMmJqjfb0sqmT7aq2"
);
This method accepts a string
clientSecret.
stripe.retrievePaymentIntent returns a Promise which resolves with a
result object. This object has either:
result.paymentIntent: a PaymentIntent was retrieved successfully.result.error: there was an error. Refer to the API reference for all possible errors.
stripe.handleCardPayment(clientSecret,
cardElement[,
data])
Use stripe.handleCardPayment(clientSecret, cardElement[, data]) when the
customer submits your payment form. It will gather card source information
from cardElement, along with any other data you provide, and attempt
to advance the PaymentIntent towards completion.
If you are using Dynamic 3D Secure,
handleCardPayment will trigger your Radar rules to execute and may open
a dialog for your customer to authenticate their payment.
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {
betas: ['payment_intent_beta_3']
});
stripe.handleCardPayment(
"pi_18eYalAHEMiOZZp1l9ZTjSU0_secret_NibvRz4PMmJqjfb0sqmT7aq2",
cardElement,
{
source_data: {
owner: {
name: "Jenny Rosen"
}
}
}
).then(function(result) {
// Handle result.error or result.paymentIntent
});
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {
betas: ['payment_intent_beta_3']
});
const {paymentIntent, error} = await stripe.handleCardPayment(
"pi_18eYalAHEMiOZZp1l9ZTjSU0_secret_NibvRz4PMmJqjfb0sqmT7aq2",
cardElement,
{
source_data: {
owner: {
name: "Jenny Rosen"
}
}
}
);
This method takes two required arguments and one optional argument.
clientSecret, the client secret of the PaymentIntent.cardElement, a card Element that will be used to create a source.datato be sent with the request. It can contain the following parameters:
|
source_data
optionalobject
|
Use this parameter to supply additional data relevant to the payment
method, such as owner information.
|
||
|
shipping
recommendedobject
|
The shipping details for the payment, if collected. | ||
|
receipt_email
optionalstring
|
Email address that the receipt for the resulting payment will be sent to. | ||
|
save_source_to_customer
optionalBoolean
|
If the PaymentIntent is associated with a customer and this
parameter is set to true, the provided source will be
attached to the customer. Default is false.
|
stripe.handleCardPayment returns a Promise which resolves with a
result object. This object has either:
result.paymentIntent: the successful PaymentIntent.result.error: an error. Refer to the API reference for all possible errors.
stripe.handleCardPayment(clientSecret[, data])
Use stripe.handleCardPayment(clientSecret, data) to advance the
PaymentIntent towards completion when you are not gathering payment
method information from an Element.
Call this variation when you have already attached a card source to this PaymentIntent or if you want to attach an existing card or token to it.
You can attach an existing card source to your PaymentIntent via
data.payment_intent.source:
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {
betas: ['payment_intent_beta_3']
});
stripe.handleCardPayment(
"pi_18eYalAHEMiOZZp1l9ZTjSU0_secret_NibvRz4PMmJqjfb0sqmT7aq2",
{
source: "src_18eYalAHEMiOZZp1l9ZTjSU0"
}
).then(function(result) {
// Handle result.error or result.paymentIntent
});
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {
betas: ['payment_intent_beta_3']
});
const {paymentIntent, error} = await stripe.handleCardPayment(
"pi_18eYalAHEMiOZZp1l9ZTjSU0_secret_NibvRz4PMmJqjfb0sqmT7aq2",
{
source: "src_18eYalAHEMiOZZp1l9ZTjSU0"
}
);
This method takes one required argument and one optional argument.
clientSecret, the client secret of the PaymentIntent.datato be sent with the request. It can contain the following parameters:
|
source
string
source_data
object
|
Only one of
source_data and source is required.
Use
source to specify an existing source to use for this payment.
Use
source_data to convert a token to a source and to supply
additional data relevant to the payment method, such as owner
information:
|
||||
|
shipping
recommendedobject
|
The shipping details for the payment, if collected. | ||||
|
receipt_email
optionalstring
|
Email address that the receipt for the resulting payment will be sent to. | ||||
|
save_source_to_customer
optionalBoolean
|
If the PaymentIntent is associated with a customer and this
parameter is set to true, the provided source will be
attached to the customer. Default is false.
|
stripe.handleCardPayment returns a Promise which resolves with a
result object. This object has either:
result.paymentIntent: the successful PaymentIntentresult.error: an error. Refer to the API reference for all possible errors.
stripe.confirmPaymentIntent(clientSecret,
element,
data)
Use stripe.confirmPaymentIntent(clientSecret, element, data) when the
customer submits your payment form. It will gather payment method information
from element, along with any other data you provide, and confirm
the PaymentIntent.
Only use this method if you want to
handle source actions yourself.
Otherwise, use stripe.handleCardPayment.
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {
betas: ['payment_intent_beta_3']
});
stripe.confirmPaymentIntent(
'{PAYMENT_INTENT_CLIENT_SECRET}',
element,
{
source_data: {
owner: {
name: 'Jenny Rosen'
}
},
return_url: 'https://example.com/return_url'
}
).then(function(result) {
// Handle result.error or result.paymentIntent
});
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {
betas: ['payment_intent_beta_3']
});
const {paymentIntent, error} = await stripe.confirmPaymentIntent(
'{PAYMENT_INTENT_CLIENT_SECRET}',
element,
{
source_data: {
owner: {
name: "Jenny Rosen"
}
},
return_url: 'https://example.com/return_url'
}
);
This method takes three required arguments.
clientSecret, the client secret of the PaymentIntent.element, an Element that will be used to create a source.datato be sent with the request. It can contain the following parameters:
|
return_url
string
use_stripe_sdk
Boolean
|
Only one of
return_url or use_stripe_sdk is
required.
If you are handling your own source actions, pass in a
return_url.
If the subsequent action is authorize_with_url, this URL will be
used on the return path for the redirect.
If you want to confirm the PaymentIntent and then later use
stripe.handleCardPayment
to complete the payment, set use_stripe_sdk to true instead.
|
||
|
source_data
optionalobject
|
Use this parameter to supply additional data relevant to the payment
method, such as owner information.
|
||
|
shipping
recommendedobject
|
The shipping details for the payment, if collected. | ||
|
receipt_email
optionalstring
|
Email address that the receipt for the resulting payment will be sent to. | ||
|
save_source_to_customer
optionalBoolean
|
If the PaymentIntent is associated with a customer and this
parameter is set to true, the provided source will be
attached to the customer. Default is false.
|
stripe.confirmPaymentIntent returns a Promise which resolves with a
result object. This object has either:
result.paymentIntent: the confirmed PaymentIntent.result.error: an error. Refer to the API reference for all possible errors.
stripe.confirmPaymentIntent(clientSecret, data)
Use stripe.confirmPaymentIntent(clientSecret, data) to confirm the
PaymentIntent when you are not gathering source data from an Element.
Call this variation when you have already attached a source to this
PaymentIntent, or if you want to attach an existing card or token to it.
Only use this method if you want to
handle source actions yourself.
Otherwise, use stripe.handleCardPayment.
You can attach an existing card source to your PaymentIntent via
data.payment_intent.source:
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {
betas: ['payment_intent_beta_3']
});
stripe.confirmPaymentIntent(
'{PAYMENT_INTENT_CLIENT_SECRET}',
{
source: '{SOURCE_ID}',
return_url: 'https://example.com/return_url'
}
).then(function(result) {
// Handle result.error or result.paymentIntent
});
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {
betas: ['payment_intent_beta_3']
});
const {paymentIntent, error} = await stripe.confirmPaymentIntent(
'{PAYMENT_INTENT_CLIENT_SECRET}',
{
source: '{SOURCE_ID}',
return_url: 'https://example.com/return_url'
}
);
This method takes two required arguments.
clientSecret, the client secret of the PaymentIntent.datato be sent with the request. It can contain the following parameters:
|
return_url
string
use_stripe_sdk
Boolean
|
Only one of
return_url or use_stripe_sdk is
required.
If you are handling your own source actions, pass in a
return_url.
If the subsequent action is authorize_with_url, this URL will be
used on the return path for the redirect.
If you want to confirm the PaymentIntent and then later use
stripe.handleCardPayment
to complete the payment, set use_stripe_sdk to true instead.
|
||||
|
source
string
source_data
object
|
Only one of
source_data and source is required.
Use
source to specify an existing source to use for this payment.
Use
source_data to convert a token to a source and to supply
additional data relevant to the payment method, such as owner
information:
|
||||
|
shipping
recommendedobject
|
The shipping details for the payment, if collected. | ||||
|
receipt_email
optionalstring
|
Email address that the receipt for the resulting payment will be sent to. | ||||
|
save_source_to_customer
optionalBoolean
|
If the PaymentIntent is associated with a customer and this
parameter is set to true, the provided source will be
attached to the customer. Default is false.
|
stripe.confirmPaymentIntent returns a Promise which resolves with a
result object. This object has either:
result.paymentIntent: the confirmed PaymentIntent.result.error: an error. Refer to the API reference for all possible errors.
The Elements object
elements.create(type, options)
var card = elements.create('card');
const card = elements.create('card');
This method creates an instance of a specific Element. It takes the
type of Element to create as
well as an options object.
Element type
|
card
recommended
|
A flexible single-line input that collects all necessary card details. |
| cardNumber | The card number. |
| cardExpiry | The card‘s expiration date. |
| cardCvc | The card‘s CVC number. |
| paymentRequestButton | An all-in-one checkout button backed by either Apple Pay or the Payment Request API. |
| iban | The International Bank Account Number (IBAN). Available for SEPA countries. |
| idealBank | The customer's bank, for use with iDEAL payments. |
Element options
All Elements accept a common set of options, and then some Element-specific options.
|
classes
optionalobject
|
Set custom class names on the container DOM element when the Stripe
Element is in a particular state.
|
||||||||||||
|
style
optionalobject
|
Customize appearance using CSS properties. Style is specified as an
object for any of the variants below.
paymentRequestButton
Element supports a single variant: paymentRequestButton.
The properties below are customizable for this variant.
|
card Element:
|
value
optionalobject
|
A pre-filled set of values to include in the input (e.g.,
{postalCode: '94110'}). Note that sensitive card
information (card number, CVC, and expiration date) cannot be
pre-filled.
|
|
hidePostalCode
optionalBoolean
|
Hide the postal code field. Default is false. If you are
already collecting a full billing address or postal code elsewhere,
set this to true.
|
|
iconStyle
optionalstring
|
Appearance of the icon in the Element. Either 'solid' or
'default'.
|
|
hideIcon
optionalBoolean
|
Hides the icon in the Element. Default is false.
|
|
disabled
optionalBoolean
|
Applies a disabled state to the Element such that user input is not
accepted. Default is false.
|
cardNumber, cardExpiry, cardCvc
Elements:
|
placeholder
optionalstring
|
Customize the placeholder text. |
|
disabled
optionalBoolean
|
Applies a disabled state to the Element such that user input is not
accepted. Default is false.
|
paymentRequestButton Element:
|
paymentRequest
string
|
The paymentRequest
object to be used with the button.
|
iban Element:
|
supportedCountries
string
|
Specify the list of countries or country-groups whose IBANs you
want to allow. Must be ['SEPA'].
|
|
placeholderCountry
optionalstring
|
Customize the country and format of the placeholder IBAN. Default is
DE.
|
|
iconStyle
optionalstring
|
Appearance of the icon in the Element. Either 'solid'
or 'default'.
|
|
hideIcon
optionalBoolean
|
Hides the icon in the Element. Default is false.
|
|
disabled
optionalBoolean
|
Applies a disabled state to the Element such that user input is not
accepted. Default is false.
|
idealBank Element:
|
value
optionalstring
|
A pre-filled value for the Element. Can be one of the banks listed in the
iDEAL guide (e.g., abn_amro).
|
|
hideIcon
optionalBoolean
|
Hides the bank icons in the Element. Default is false.
|
|
disabled
optionalBoolean
|
Applies a disabled state to the Element such that user input is not
accepted. Default is false.
|
Here is an example that customizes the base and invalid states of a
card Element:
var style = {
base: {
color: '#303238',
fontSize: '16px',
color: "#32325d",
fontSmoothing: 'antialiased',
'::placeholder': {
color: '#ccc',
},
},
invalid: {
color: '#e5424d',
':focus': {
color: '#303238',
},
},
};
var cardElement = elements.create('card', {style: style})
const style = {
base: {
color: '#303238',
fontSize: '16px',
color: "#32325d",
fontSmoothing: 'antialiased',
'::placeholder': {
color: '#ccc',
},
},
invalid: {
color: '#e5424d',
':focus': {
color: '#303238',
},
},
};
const cardElement = elements.create('card', {style})
The Element
element.mount(domElement)
You need to create a container DOM element to mount an Element. If the container DOM element has a label, the Element is automatically focused when its label is clicked. There are two ways to do this:
-
Mount the instance within a
<label>.<label>Card <div id="card-element"></div> </label> -
Create a
<label>with aforattribute, referencing the ID of your container.<label for="card-element">Card</label> <div id="card-element"></div>
The element.mount() method attaches your Element to the DOM.
element.mount() accepts either a CSS Selector (e.g., '#card-element') or
a DOM element.
cardElement.mount('#card-element');
element.on(event, handler)
The only way to communicate with your Element is by listening to an
event. Elements might emit
any of the events below. All events have a payload object that has an
elementType property with
the type of the Element that emitted the event.
| blur | Triggered when the Element loses focus. | ||||||||||||||||
| change |
Triggered when any of the following values changes on the Element.
The event payload always contains certain keys, in addition to some
Element-specific keys.
card Element
card and cardNumber Element
iban Element
idealBank Element
|
||||||||||||||||
| click |
Triggered when the Element is clicked. Only available on the
paymentRequestButton
Element. The event payload is an object with the following callback
function:
|
||||||||||||||||
| focus | Triggered when the Element gains focus. | ||||||||||||||||
| ready |
Triggered when the Element is fully rendered and can accept
element.focus() calls.
|
Input validation
Elements validates customer input as it is typed. To help your customers
catch mistakes, listen to change events on the Element and display any
errors:
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
card.addEventListener('change', ({error}) => {
const displayError = document.getElementById('payment-errors');
if (error) {
displayError.textContent = error.message;
}
});
Postal code formatting
The card Element automatically determines your customer’s billing address
country based on their card number. Using this information, the postal code
field validation reflects whether that country uses numeric or
alphanumeric-formatted postal codes, or if the country uses postal codes at
all. For instance, if a U.S. card is entered, the postal code field only
accepts a five-digit numeric value. If it’s a UK card, an alphanumeric
value can be provided instead.
Many of our test cards have a U.S. billing address country. When using these to test your payment form, you must also use a five-digit U.S. ZIP code (e.g., 12345). To test Elements with other postal code formats, use our international test card numbers.
Other methods
blur() |
Blurs the Element. |
clear() |
Clears the value(s) of the Element. |
destroy() |
Removes the Element from the DOM and destroys it. Note: a destroyed Element can not be re-activated or re-mounted to the DOM. |
focus() |
Focuses the Element. |
unmount() |
Unmounts the Element from the DOM. Call element.mount() to re-attach it to the DOM. |
update(options) |
Updates the options the Element was initialized with. Updates are merged into the existing configuration. Accepts the same options as elements.create(). |
If you collect certain information in a different part of your interface
(e.g., ZIP or postal code), use update() with the appropriate information.
var myPostalCodeField = document.querySelector('input[name="my-postal-code"]');
myPostalCodeField.addEventListener('change', function(event) {
card.update({value: {postalCode: event.target.value}});
});
const myPostalCodeField = document.querySelector('input[name="my-postal-code"]');
myPostalCodeField.addEventListener('change', ({target}) => {
card.update({value: {postalCode: target.value}});
});
The styles of an Element can be dynamically changed using update(). This
method can be used to simulate CSS media queries that automatically adjust
the size of Elements when viewed on different devices.
window.addEventListener('resize', function(event) {
if (window.innerWidth <= 320) {
card.update({style: {base: {fontSize: '13px'}}});
} else {
card.update({style: {base: {fontSize: '16px'}}});
}
});
var previousBrand;
card.on('change', function(event) {
if (event.brand !== previousBrand && event.brand === 'mastercard') {
card.update({style: {base: {color: 'orange'}}});
previousBrand = event.brand;
}
});
window.addEventListener('resize', (event) => {
if (window.innerWidth <= 320) {
card.update({style: {base: {fontSize: '13px'}}});
} else {
card.update({style: {base: {fontSize: '16px'}}});
}
});
let previousBrand;
card.on('change', ({brand}) => {
if (brand !== previousBrand && brand === 'mastercard') {
card.update({style: {base: {color: 'orange'}}});
previousBrand = event.brand;
}
});
The Element container
Style the container you mount an Element to as if it were an <input> on
your page. For example, to control padding and border on an Element, set
these properties on the container. This is usually done by re-using the
classes that you have applied to your DOM <input> elements. Example:
<style>
.my-input {
padding: 10px;
border: 1px solid #ccc;
}
</style>
<form>
<div>
<label>Name</label>
<input class="my-input">
</div>
<div>
<label>Card</label>
<!-- Using the same "my-input" class on the -->
<!-- regular input above and on this container. -->
<div class="my-input" id="card-element"></div>
</div>
</form>
After the Element is mounted, the .StripeElement class is added to the
container. Additionally, the following classes are automatically added to
the container when the Element is complete, empty, focused, invalid, or
autofilled by the browser:
.StripeElement--complete.StripeElement--empty.StripeElement--focus.StripeElement--invalid.StripeElement--webkit-autofill(Chrome and Safari only)
These class names can be customized using the classes
option when you create an Element.
The PaymentRequest object
For a quick overview of how to use the PaymentRequest object, see the Payment Request Button guide.
paymentRequest.canMakePayment()
Returns a Promise that resolves with a payload if a browser payment API is
available. If no API is available, it resolves with null. The resolution
object has these properties:
|
applePay
Boolean
|
true if the browser payment API supports Apple Pay. In
this case, you‘ll want to show a button that conforms to the
Apple Pay
Human Interface Guidelines
.
Note that using the
paymentRequestButton
Element is automatically cross-browser. If you use this PaymentRequest
object to create a
paymentRequestButton
Element, you don‘t need to check applePay
yourself.
|
paymentRequest.show()
Shows the browser’s payment interface. When using the
paymentRequestButton Element,
this is called for you under the hood. This method must be called as the
result of a user interaction (for example, in a click handler).
paymentRequest.update(options)
PaymentRequest instances can be updated with an
options object.
Available options are documented below.
paymentRequest.update() can only be called when the browser
payment interface is not showing. Listen to the
click and cancel
events to detect if the payment interface has been initiated. To update the
PaymentRequest right before the payment interface is initiated, call
paymentRequest.update() in your click event
handler.
| Option | Description | ||||||
|---|---|---|---|---|---|---|---|
|
currency
optionalstring
|
Three character currency code (e.g., 'usd'). |
||||||
|
total
optional object
|
A payment item object. This payment item is shown to the customer in
the browser‘s payment interface.
|
||||||
|
displayItems
optional Array
|
An array of payment item objects. These payment items are shown as line items
in the browser‘s payment interface. Note that the sum of the line item
amounts does not need to add up to the total amount above.
|
||||||
|
shippingOptions
optional Array
|
An array of ShippingOption objects. The first shipping option listed appears in the browser payment interface as the default option. |
paymentRequest.on(event, handler)
PaymentRequest instances receive the following events:
|
token
source
|
Stripe.js automatically tokenizes or creates a source after the customer is done interacting with the browser‘s payment interface. To access the created token or source, listen for the respective event. Only listen for either token or source, not both. The emitted event is a PaymentResponse object. | ||||
| cancel |
Emitted when the browser‘s payment interface is dismissed.
Note that in some browsers, the payment interface may be dismissed by the customer even after they authorize the payment. This means that you may receive a cancel event on your PaymentRequest object after receiving a token or source event. If you’re using the cancel event as a hook for canceling the customer’s order, make sure you also refund the payment that you just created. |
||||
| shippingaddresschange |
Emitted whenever the customer selects a new address in the
browser‘s payment interface. The event payload is an object with
these parameters:
|
||||
| shippingoptionchange |
Emitted whenever the customer selects a new shipping option in the
browser‘s payment interface. The event payload is an object with
these parameters:
|
Other Payment Request object types
A number of types show up in multiple places when using the
PaymentRequest object or the
paymentRequestButton.
- The PaymentResponse object
- The UpdateDetails object
- The ShippingOption object
- The ShippingAddress object
The PaymentResponse object
This object is returned as the payload of the token and source event handlers.
|
token
source
object
|
Either a Token or Source object, depending whether this is the token or source event, respectively. Note that only one of these parameters is present, depending on the event listener you register. | ||||||
|
complete
function
|
Call this when you have processed the token data provided by the API.
complete accepts one of the following values:
|
||||||
|
payerName
payerEmail
payerPhone
string
|
Information about the customer. Each is only present if it was explicitly asked for when creating the PaymentRequest object. | ||||||
|
shippingAddress
ShippingAddress
|
The final ShippingAddress the
customer selected.
Only present when requestShipping is true
when creating the PaymentRequest object, and you've supplied at least
one ShippingOption.
|
||||||
|
shippingOption
ShippingOption
|
The final ShippingOption the
customer selected.
Only present when requestShipping is true when creating the PaymentRequest object, and you've
supplied at least one ShippingOption.
|
||||||
|
methodName
string
|
The unique name of the payment handler the customer chose to
authorize payment. For example, 'basic-card'.
|
The UpdateDetails object
The UpdateDetails object is used to update certain parts of a PaymentRequest object after it has already been created. See the updateWith callback functions above.
|
status
string
|
The browser uses this value to show an error message to the customer
if they‘ve taken an action that invalidates the payment request.
The value must be one of the following:
|
||||||
|
total
optional object
|
The new total amount, if applicable.
|
||||||
|
displayItems
optional Array
|
An array of payment item objects. These payment items are shown as line items
in the browser‘s payment interface. Note that the sum of the line item
amounts does not need to add up to the total amount above.
|
||||||
|
shippingOptions
optional Array
|
An array of ShippingOption objects. The first shipping option listed appears in the browser payment interface as the default option. |
The ShippingOption object
A ShippingOption is a normal JavaScript object you create that has the following parameters. Use these objects to let the customer select their preferred shipping method.
|
id
string
|
A unique ID you create to keep track of this shipping option. You‘ll be told the ID of the selected option on changes and on completion. |
|
label
string
|
A short “title” for this shipping option. |
|
detail
string
|
A longer description of this shipping option. |
|
amount
number
|
The amount to show for this shipping option. If the cost of this shipping option depends on the shipping address the customer enters, listen for the shippingaddresschange event. |
The ShippingAddress object
Use the requestShipping option to stripe.paymentRequest() to collect
shipping information from the customer. This is the shape of the shipping
address the customer enters:
|
country
string
|
Two-letter country code, capitalized. Valid two-letter country codes are specified by ISO3166 alpha-2. |
|
addressLine
Array<string>
|
An array of address line items. For example,
'185 Berry St.', 'Suite 500',
'P.O. Box 12345', etc.
|
|
region
string
|
The most coarse subdivision of a country. Depending on the country, this might correspond to a state, a province, an oblast, a prefecture, or something else along these lines. |
|
city
string
|
The name of a city, town, village, etc. |
|
postalCode
string
|
The postal code or ZIP code, also known as PIN code in India. |
|
recipient
string
|
The name of the recipient. This might be a person, a business name, or contain “care of” (c/o) instructions. |
|
phone
string
|
The phone number of the recipient. Note that this might be
different from any phone number you collect with
requestPayerPhone.
|
|
sortingCode
string
|
(Not present on Apple platforms) The sorting code as used in, for example, France. |
|
dependentLocality
string
|
(Not present on Apple platforms) A logical subdivision of a city. Can be used for things like neighborhoods, boroughs, districts, or UK dependent localities. |
Supported browsers
Stripe.js strives to support all recent versions of major browsers. For the sake of security and providing the best experience to the majority of customers, we do not support browsers that are no longer receiving security updates and represent a small minority of traffic.
- We support Internet Explorer and Edge per Microsoft's lifecycle policy. We are currently deprecating support for IE9.
- We support Chrome and Safari on all platforms and Firefox on desktop platforms.
- We support the Android native browser on Android 4.4 and later.
- We require TLS 1.2 to be supported by the browser.
- We respond to bug reports but do not proactively test other mobile browsers.
If you have an issue with Stripe.js on a specific browser, please contact us so we can improve its support.