Tokenize payment data

elements.createToken(cardComponent, {
  // optional
  stripePublishableKey: YOUR_STRIPE_KEY,
})
.then((data) => {
   // handle tokenization response here
})

elements.createToken(paymentUIComponent, additionalData?)
This method converts information collected by PaymentUIComponent into a token that you safely pass to your server to use in an API call.

Method Params

paymentUIComponent required PaymentUIComponent
The PaymentUIComponent you wish to tokenize data from. If applicable, we will tokenize by pulling data from other PaymentUIComponent you’ve created on the same instance of ComponentManager. You only need to supply one PaymentUIComponent as the parameter.
additionalData optional object
An object containing additional payment information. It can have properties:

  • stripePublishableKey optional string - Your stripe publishable key.
  • addressLine1 optional string
  • addressLine2 optional string
  • addressCity optional string
  • addressState optional string
  • addressZip optional string
  • addressCountry optional string
  • currency optional string

Returns

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

  • result.error: there was an error. This includes client-side validation errors. Refer to the API reference for all possible errors.
  • result.card: A card object which contains details of the card was created successfully.
{
    "elementsTokenization": {
        "id": "TOK-8oZvwTLx2eUjFwdHaZmt7gycpgQVz1fNk",
        "type": "token",
        "card": {
            "id": "CARD-GJokMkNJnWRmYgAZ9baar5TLXHf2SrgJL",
            "type": "card",
            "exp_month": 12,
            "exp_year": 2023,
            "cvv_check": "UNCHECKED",
            "name": "yunfei",
            "address_zip": "42424",
            "brand": "VISA",
            "country": "US",
            "fingerprint": "fc435db1696a48c5ca8ab3e40570b9b685aa5632428f04ea4c5293c971f740fd",
            "funding": "CREDIT",
            "last4": "4242"
        },
        "status": "SUCCEEDED"
    },
    "stripeTokenization": null
}

📘

Elements service unavailable

For rare intermittent errors, you may only receive a "SINGLE_USE" Stripe token which your server persist using the usual Stripe strategy.

In the fallback case, your response will look like this:

{
    "elementsTokenization": null,
    "stripeTokenization": {
        "id": "tok_1IqNweGIxBPZ7rpaImrbzuwK",
        "object": "token",
        "card": {
            "id": "card_1IqNweGIxBPZ7rpa1FtA7UPx",
            "object": "card",
            "address_city": null,
            "address_country": null,
            "address_line1": null,
            "address_line1_check": null,
            "address_line2": null,
            "address_state": null,
            "address_zip": null,
            "address_zip_check": null,
            "brand": "Discover",
            "country": "US",
            "cvc_check": "unchecked",
            "dynamic_last4": null,
            "exp_month": 4,
            "exp_year": 2024,
            "funding": "credit",
            "last4": "5555",
            "name": "4242",
            "tokenization_method": null
        },
        "client_ip": "208.90.214.233",
        "created": 1620848532,
        "livemode": false,
        "type": "card",
        "used": false
    }
}

📘

Trigger an error and verify fallback

Use card 6555 5555 5555 5555 with CVV 500 in sandbox environment to trigger a 500 error on our server. Our SDK will automatically fallback to Stripe native tokenization flow if a stripe publishable is provided before