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:

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 of elements to 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:

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:

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:

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 information. If applicable, the Element pulls data from other Elements you’ve created on the same instance of elements.
• sourceData, a required object containing the type of Source you want to create, and any additional payment 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 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.createPaymentMethod(paymentMethodData)

Use stripe.createPaymentMethod() to convert payment information collected by Elements into a PaymentMethod object that you safely pass to your server to use in an API call.

stripe.createPaymentMethod({
  type: 'card',
  card: cardElement,
  billing_details: {
    name: 'Jenny Rosen',
  },
}).then(function(result) {
  // Handle result.error or result.paymentMethod
});

const {paymentMethod, error} = await stripe.createPaymentMethod({
  type: 'card',
  card: cardElement,
  billing_details: {
    name: 'Jenny Rosen',
  },
});

This method accepts one argument, paymentMethodData, which is an object with the following parameters:

Refer to the PaymentMethod API for a full list of parameters.

stripe.createPaymentMethod returns a Promise which resolves with a result object. This object has either:

• result.paymentMethod: a PaymentMethod 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: '{SOURCE_ID}'
  client_secret: '{SOURCE_CLIENT_SECRET}',
}).then(function(result) {
  // Handle result.error or result.source
});

const {source, error} = await stripe.retrieveSource({
  id: '{SOURCE_ID}'
  client_secret: '{SOURCE_CLIENT_SECRET}',
});

This method accepts an object source with the following required parameters:

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().

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');

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) {
  // If `redirectToCheckout` fails due to a browser or network
  // error, display the localized error message to your customer
  // using `result.error.message`.
});

const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

const {error} = await 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',
})

// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer
// using `error.message`.

This function accepts a required options object. Available options are documented below:

stripe.confirmCardPayment(clientSecret[, data][, options])

Use stripe.confirmCardPayment() in the Payment Intents API automatic confirmation flow when the customer submits your payment form. When called, it will confirm the PaymentIntent with data you provide and carry out 3DS or other next actions if they are required.

If you are using Dynamic 3D Secure, confirmCardPayment will trigger your Radar rules to execute and may open a dialog for your customer to authenticate their payment.

When you confirm a PaymentIntent, it needs to have an attached PaymentMethod. In addition to confirming the PaymentIntent, this method can automatically create and attach a new PaymentMethod for you. It can also be called with an existing PaymentMethod, or if you have already attached a PaymentMethod you can call this method without needing to provide any additional data.

stripe.confirmCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      card: cardElement,
      billing_details: {
        name: 'Jenny Rosen'
      }
    }
  }
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

const {paymentIntent, error} = await stripe.confirmCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      card: cardElement,
      billing_details: {
        name: 'Jenny Rosen'
      }
    }
  }
);

stripe.confirmCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}'
  }
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

const {paymentIntent, error} = await stripe.confirmCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}'
  }
);

stripe.confirmCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      card: {
        token: 'tok_visa'
      }
    }
  }
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

const {paymentIntent, error} = await stripe.confirmCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      card: {
        token: 'tok_visa'
      }
    }
  }
);

stripe.confirmCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}'
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

const {paymentIntent, error} = await stripe.confirmCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
);

stripe.confirmCardPayment takes one required argument and two optional arguments.

• clientSecret, the client secret of the PaymentIntent.
• data, to be sent with the request.
• options, to control the behavior of this method.

confirmCardPayment data

Refer to the Payment Intents API for a full list of parameters.

confirmCardPayment options

stripe.confirmCardPayment 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.handleCardAction(clientSecret)

Use stripe.handleCardAction(clientSecret) in the Payment Intents API manual confirmation flow to handle a PaymentIntent with the requires_action status. It will throw an error if the PaymentIntent has a different status.

stripe.handleCardAction(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

const {paymentIntent, error} = await stripe.handleCardAction(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
);

// Handle the paymentIntent or error

stripe.handleCardAction takes only one required argument, the client_secret of the PaymentIntent.

This method returns a Promise which resolves with a result object. This object has either:

• result.paymentIntent: a PaymentIntent with the requires_confirmation status to confirm server-side.
• result.error: an error. Refer to the API reference for all possible errors.

stripe.confirmIdealPayment(clientSecret[, data][, options])

Use stripe.confirmIdealPayment() in the iDEAL Payments with Payment Methods flow when the customer submits your payment form. When called, it will confirm the PaymentIntent with data you provide, and it will automatically redirect the customer to the authorize the transaction. Once authorization is complete, the customer will be redirected back to your specified return_url.

When you confirm a PaymentIntent, it needs to have an attached PaymentMethod. In addition to confirming the PaymentIntent, this method can automatically create and attach a new PaymentMethod for you. It can also be called with an existing PaymentMethod, or if you have already attached a PaymentMethod you can call this method without needing to provide any additional data.

stripe.confirmIdealPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      ideal: idealBankElement,
    },
    // Return URL where the customer should be redirected after the authorization.
    return_url: window.location.href
  }
).then(function(result) {
  if (result.error) {
    // Inform the customer that there was an error.
  }
});

const {error} = await stripe.confirmIdealPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      ideal: idealBankElement,
    },
    // Return URL where the customer should be redirected after the authorization.
    return_url: window.location.href
  }
);

stripe.confirmIdealPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
    // Return URL where the customer should be redirected after the authorization.
    return_url: window.location.href
  }
).then(function(result) {
  // Inform the customer that there was an error.
});

const {error} = await stripe.confirmIdealPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
    // Return URL where the customer should be redirected after the authorization.
    return_url: window.location.href
  }
);

stripe.confirmIdealPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      ideal: {
        bank: "abn_amro"
      }
    },
    // Return URL where the customer should be redirected after the authorization.
    return_url: window.location.href
  }
).then(function(result) {
  if (result.error) {
    // Inform the customer that there was an error.
  }
});

const {error} = await stripe.confirmIdealPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      ideal: {
        bank: "abn_amro"
      }
    },
    // Return URL where the customer should be redirected after the authorization.
    return_url: window.location.href
  }
);

stripe.confirmIdealPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}'
).then(function(result) {
  if (result.error) {
    // Inform the customer that there was an error.
  }
});

const {error} = await stripe.confirmIdealPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
);

stripe.confirmIdealPayment takes one required argument and two optional arguments.

• clientSecret, the client secret of the PaymentIntent.
• data, to be sent with the request.
• options, to control the behavior of this method.

confirmIdealPayment data

Refer to the Payment Intents API for a full list of parameters.

confirmIdealPayment options

stripe.confirmIdealPayment by default, will trigger a redirect when successful. If there is an error, or when handling next actions manually by using the handleActions: false option, it will return 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.confirmSepaDebitPayment(clientSecret[, data])

Use stripe.confirmSepaDebitPayment() in the SEPA Direct Debit Payments with Payment Methods flow when the customer submits your payment form. When called, it will confirm the PaymentIntent with data you provide. Note that there are some additional requirements to this flow that are not covered in this reference. Refer to our integration guide for more details.

When you confirm a PaymentIntent, it needs to have an attached PaymentMethod. In addition to confirming the PaymentIntent, this method can automatically create and attach a new PaymentMethod for you. It can also be called with an existing PaymentMethod, or if you have already attached a PaymentMethod you can call this method without needing to provide any additional data.

stripe.confirmSepaDebitPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      sepa_debit: ibanElement,
      billing_details: {
        name: 'Jenny Rosen',
        email: 'jenny@example.com'
      }
    }
  }
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

const {paymentIntent, error} = await stripe.confirmSepaDebitPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      sepa_debit: ibanElement,
      billing_details: {
        name: 'Jenny Rosen',
        email: 'jenny@example.com'
      }
    }
  }
);

stripe.confirmSepaDebitPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
  }
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

const {paymentIntent, error} = await stripe.confirmSepaDebitPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
  }
);

stripe.confirmSepaDebitPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      sepa_debit: {
        iban: 'DE89370400440532013000'
      },
      billing_details: {
        name: 'Jenny Rosen',
        email: 'jenny@example.com'
      }
    }
  }
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

const {paymentIntent, error} = await stripe.confirmSepaDebitPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      sepa_debit: {
        iban: 'DE89370400440532013000'
      },
      billing_details: {
        name: 'Jenny Rosen',
        email: 'jenny@example.com'
      }
    }
  }
);

stripe.confirmSepaDebitPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

const {paymentIntent, error} = await stripe.confirmSepaDebitPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
);

stripe.confirmSepaDebitPayment takes one required argument and one optional argument.

• clientSecret, the client secret of the PaymentIntent.
• data, to be sent with the request.

confirmSepaDebitPayment data

Refer to the Payment Intents API for a full list of parameters.

stripe.confirmSepaDebitPayment will return 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.retrievePaymentIntent(clientSecret)

Retrieve a PaymentIntent using its client secret.

stripe.retrievePaymentIntent(
  "pi_18eYalAHEMiOZZp1l9ZTjSU0_secret_NibvRz4PMmJqjfb0sqmT7aq2"
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

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.confirmCardSetup(clientSecret[, data][, options])

Use stripe.confirmCardSetup() in the Setup Intents API flow when the customer submits your payment form. When called, it will confirm the SetupIntent with data you provide and carry out 3DS or other next actions if they are required.

When you confirm a SetupIntent, it needs to have an attached PaymentMethod. In addition to confirming the SetupIntent, this method can automatically create and attach a new PaymentMethod for you. It can also be called with an existing PaymentMethod, or if you have already attached a PaymentMethod you can call this method without needing to provide any additional data.

stripe.confirmCardSetup(
  '{SETUP_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      card: cardElement,
      billing_details: {
        name: 'Jenny Rosen'
      }
    }
  }
).then(function(result) {
  // Handle result.error or result.setupIntent
});

const {setupIntent, error} = await stripe.confirmCardSetup(
  '{SETUP_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      card: cardElement,
      billing_details: {
        name: 'Jenny Rosen'
      }
    }
  }
);

stripe.confirmCardSetup(
  '{SETUP_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}'
  }
).then(function(result) {
  // Handle result.error or result.setupIntent
});

const {setupIntent, error} = await stripe.confirmCardSetup(
  '{SETUP_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}'
  }
);

stripe.confirmCardSetup(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      card: {
        token: 'tok_visa'
      }
    }
  }
).then(function(result) {
  // Handle result.error or result.setupIntent
});

const {setupIntent, error} = await stripe.confirmCardSetup(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      card: {
        token: 'tok_visa'
      }
    }
  }
);

stripe.confirmCardSetup(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
).then(function(result) {
  // Handle result.error or result.setupIntent
});

const {setupIntent, error} = await stripe.confirmCardSetup(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
);

stripe.confirmCardSetup takes one required argument and two optional arguments.

• clientSecret, the client secret of the SetupIntent.
• data, to be sent with the request.
• options, to control the behavior of this method.

confirmCardSetup data

Refer to the Setup Intents API for a full list of parameters.

confirmCardSetup options

stripe.confirmCardSetup returns a Promise which resolves with a result object. This object has either:

• result.setupIntent: the successful SetupIntent.
• result.error: an error. Refer to the API reference for all possible errors.

stripe.confirmSepaDebitSetup(clientSecret[, data])

Use stripe.confirmSepaDebitSetup() in the SEPA Direct Debit with Setup Intents flow when the customer submits your payment form. When called, it will confirm the SetupIntent with data you provide. Note that there are some additional requirements to this flow that are not covered in this reference. Refer to our integration guide for more details.

When you confirm a SetupIntent, it needs to have an attached PaymentMethod. In addition to confirming the SetupIntent, this method can automatically create and attach a new PaymentMethod for you. It can also be called with an existing PaymentMethod, or if you have already attached a PaymentMethod you can call this method without needing to provide any additional data.

stripe.confirmSepaDebitSetup(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      sepa_debit: ibanElement,
      billing_details: {
        name: 'Jenny Rosen',
        email: 'jenny@example.com'
      }
    }
  }
).then(function(result) {
  // Handle result.error or result.setupIntent
});

const {error, setupIntent} = await stripe.confirmSepaDebitSetup(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      sepa_debit: ibanElement,
      billing_details: {
        name: 'Jenny Rosen',
        email: 'jenny@example.com'
      }
    }
  }
);

stripe.confirmSepaDebitSetup(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
  }
).then(function(result) {
  // Handle result.error or result.setupIntent
});

const {error, setupIntent} = await stripe.confirmSepaDebitSetup(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
  }
);

stripe.confirmSepaDebitSetup(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      sepa_debit: {
        iban: 'DE89370400440532013000'
      },
      billing_details: {
        name: 'Jenny Rosen',
        email: 'jenny@example.com'
      }
    }
  }
).then(function(result) {
  // Handle result.error or result.setupIntent
});

const {setupIntent, error} = await stripe.confirmSepaDebitSetup(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      sepa_debit: {
        iban: 'DE89370400440532013000'
      },
      billing_details: {
        name: 'Jenny Rosen',
        email: 'jenny@example.com'
      }
    }
  }
);

stripe.confirmSepaDebitSetup(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
).then(function(result) {
  // Handle result.error or result.setupIntent
});

const {setupIntent, error} = await stripe.confirmSepaDebitSetup(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
);

stripe.confirmSepaDebitSetup takes one required argument and one optional argument.

• clientSecret, the client secret of the SetupIntent.
• data, to be sent with the request.

confirmSepaDebitSetup data

Refer to the Setup Intents API for a full list of parameters.

stripe.confirmSepaDebitSetup will return a Promise which resolves with a result object. This object has either:

• result.setupIntent: the successful SetupIntent.
• result.error: an error. Refer to the API reference for all possible errors.

stripe.retrieveSetupIntent(clientSecret)

Retrieve a SetupIntent using its client secret.

stripe.retrieveSetupIntent(
  "seti_18eYalAHEMiOZZp1l9ZTjSU0_secret_NibvRz4PMmJqjfb0sqmT7aq2"
).then(function(result) {
  // Handle result.error or result.setupIntent
});

const {setupIntent, error} = await stripe.retrievePaymentIntent(
  "seti_18eYalAHEMiOZZp1l9ZTjSU0_secret_NibvRz4PMmJqjfb0sqmT7aq2"
);

This method accepts a string clientSecret.

stripe.retrieveSetupIntent returns a Promise which resolves with a result object. This object has either:

• result.setupIntent: a SetupIntent was retrieved successfully.
• result.error: there was an error. Refer to the API reference for all possible errors.

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

Element options

All Elements accept a common set of options, and then some Element-specific options.

card Element:

cardNumber, cardExpiry, cardCvc Elements:

paymentRequestButton Element:

iban Element:

idealBank Element:

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})

elements.getElement(type)

This method looks up a previosuly created Element by its type.

var card = elements.getElement('card');

const card = elements.getElement('card');

This method accepts a single argument:

• type, the type of Element to lookup.

It returns one of the following:

• Element: An instance of an Element with a matching type.
• null: Returned when no Element with a matching type has been created.

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:

1. Mount the instance within a <label>.

   <label>Card
     <div id="card-element"></div>
   </label>

2. Create a <label> with a for attribute, 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.

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.

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:

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.

paymentRequest.on(event, handler)

PaymentRequest instances receive the following events:

The PaymentResponse object

This object is returned as the payload of the token, paymentmethod, or source event handlers.

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.

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.

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:

stripe.handleCardPayment(clientSecret, element[, data])

Use stripe.handleCardPayment(clientSecret, element[, data]) in the Payment Intents API automatic confirmation flow when the customer submits your payment form. It will gather payment information from the element, which can be a card or cardNumber element, along with any other data you provide. It will then confirm the PaymentIntent and carry out 3DS or other next_actions if they are required.

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.

stripe.handleCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  element,
  {
    payment_method_data: {
      billing_details: {
        name: 'Jenny Rosen'
      }
    }
  }
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

const {paymentIntent, error} = await stripe.handleCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  element,
  {
    payment_method_data: {
      billing_details: {
        name: 'Jenny Rosen'
      }
    }
  }
);

This method takes two required arguments and one optional argument.

• clientSecret, the client secret of the PaymentIntent.
• element, a card or cardNumber Element that will be used to create a payment method.
• data to be sent with the request. It can contain the following parameters:

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 to this PaymentIntent or if you want to attach an existing card to it.

You can attach an existing card to your PaymentIntent via data.payment_method:

stripe.handleCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
  }
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

const {paymentIntent, error} = await stripe.handleCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
  }
);

This method takes one required argument and one optional argument.

• clientSecret, the client secret of the PaymentIntent.
• data to be sent with the request. It can contain the following parameters:

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.confirmPaymentIntent(clientSecret, element, data)

Use stripe.confirmPaymentIntent(clientSecret, element, data) when the customer submits your payment form. It will gather payment information from element, along with any other data you provide, and confirm the PaymentIntent.

Only use this method if you want to handle next actions yourself. Otherwise, use stripe.handleCardPayment.

stripe.confirmPaymentIntent(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  element,
  {
    payment_method_data: {
      billing_details: {
        name: 'Jenny Rosen'
      }
    },
    return_url: 'https://example.com/return_url'
  }
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

const {paymentIntent, error} = await stripe.confirmPaymentIntent(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  element,
  {
    payment_method_data: {
      billing_details: {
        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 payment method
• data to be sent with the request. It can contain the following parameters:

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 payment information from an Element. Call this variation when you have already attached a payment method to this PaymentIntent, or if you want to attach an existing card, token, or PaymentMethod to it.

Only use this method if you want to handle next actions yourself. Otherwise, use stripe.handleCardPayment.

You can attach an existing card to your PaymentIntent via data.payment_method:

stripe.confirmPaymentIntent(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
    return_url: 'https://example.com/return_url'
  }
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

const {paymentIntent, error} = await stripe.confirmPaymentIntent(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
    return_url: 'https://example.com/return_url'
  }
);

This method takes two required arguments.

• clientSecret, the client secret of the PaymentIntent.
• data to be sent with the request. It can contain the following parameters:

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.handleCardSetup(clientSecret, element[, data])

Use stripe.handleCardSetup(clientSecret, element[, data]) in the Setup Intents API flow when the customer submits your payment form. It will gather payment information from the element, which can be a card or cardNumber element, along with any other data you provide. It will then confirm the SetupIntent and carry out 3DS or other next_actions if they are required.

stripe.handleCardSetup(
  '{SETUP_INTENT_CLIENT_SECRET}',
  element,
  {
    payment_method_data: {
      billing_details: {
        name: 'Jenny Rosen'
      }
    }
  }
).then(function(result) {
  // Handle result.error or result.setupIntent
});

const {setupIntent, error} = await stripe.handleCardSetup(
  '{SETUP_INTENT_CLIENT_SECRET}',
  element,
  {
    payment_method_data: {
      billing_details: {
        name: 'Jenny Rosen'
      }
    }
  }
);

This method takes two required arguments and one optional argument.

• clientSecret, the client secret of the SetupIntent.
• element, a card or cardNumber Element that will be used to create a payment method.
• data to be sent with the request. It can contain the following parameters:

stripe.handleCardSetup returns a Promise which resolves with a result object. This object has either:

• result.setupIntent: the successful SetupIntent.
• result.error: an error. Refer to the API reference for all possible errors.

stripe.handleCardSetup(clientSecret[, data])

Use stripe.handleCardSetup(clientSecret, data) to advance the SetupIntent towards completion when you are not gathering payment method information from an Element.

Call this variation when you have already attached a card to this SetupIntent or if you want to attach an existing card to it.

You can attach an existing card to your SetupIntent via data.payment_method:

stripe.handleCardSetup(
  '{SETUP_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
  }
).then(function(result) {
  // Handle result.error or result.setupIntent
});

const {setupIntent, error} = await stripe.handleCardSetup(
  '{SETUP_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
  }
);

This method takes one required argument and one optional argument.

• clientSecret, the client secret of the SetupIntent.
• data to be sent with the request. It can contain the following parameters:

stripe.handleCardSetup returns a Promise which resolves with a result object. This object has either:

• result.setupIntent: the successful SetupIntent
• result.error: an error. Refer to the API reference for all possible errors.

stripe.confirmSetupIntent(clientSecret, element, data)

Use stripe.confirmSetupIntent(clientSecret, element, data) when the customer submits your save payment method form. It will gather payment information from element, along with any other data you provide, and confirm the SetupIntent.

Only use this method if you want to handle next actions yourself. Otherwise, use stripe.handleCardSetup.

stripe.confirmSetupIntent(
  '{SETUP_INTENT_CLIENT_SECRET}',
  element,
  {
    payment_method_data: {
      billing_details: {
        name: 'Jenny Rosen'
      }
    },
    return_url: 'https://example.com/return_url'
  }
).then(function(result) {
  // Handle result.error or result.setupIntent
});

const {setupIntent, error} = await stripe.confirmSetupIntent(
  '{SETUP_INTENT_CLIENT_SECRET}',
  element,
  {
    payment_method_data: {
      billing_details: {
        name: "Jenny Rosen"
      }
    },
    return_url: 'https://example.com/return_url'
  }
);

This method takes three required arguments.

• clientSecret, the client secret of the SetupIntent.
• element, an Element that will be used to create a payment method
• data to be sent with the request. It can contain the following parameters:

stripe.confirmSetupIntent returns a Promise which resolves with a result object. This object has either:

• result.setupIntent: the confirmed SetupIntent.
• result.error: an error. Refer to the API reference for all possible errors.

stripe.confirmSetupIntent(clientSecret, data)

Use stripe.confirmSetupIntent(clientSecret, data) to confirm the PaymentIntent when you are not gathering payment information from an Element. Call this variation when you have already attached a payment method to this PaymentIntent, or if you want to attach an existing card, token, or PaymentMethod to it.

Only use this method if you want to handle next actions yourself. Otherwise, use stripe.handleCardSetup.

You can attach an existing card to your SetupIntent via data.payment_method:

stripe.confirmSetupIntent(
  '{SETUP_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
    return_url: 'https://example.com/return_url'
  }
).then(function(result) {
  // Handle result.error or result.setupIntent
});

const {setupIntent, error} = await stripe.confirmSetupIntent(
  '{SETUP_INTENT_CLIENT_SECRET}',
  {
    payment_method: '{PAYMENT_METHOD_ID}',
    return_url: 'https://example.com/return_url'
  }
);

This method takes two required arguments.

• clientSecret, the client secret of the SetupIntent.
• data to be sent with the request. It can contain the following parameters:

stripe.confirmSetupIntent returns a Promise which resolves with a result object. This object has either:

• result.setupIntent: the confirmed SetupIntent.
• result.error: an error. Refer to the API reference for all possible errors.