---
agentTools:
  projectIndex: https://elements-pay.readme.io/llms.txt
---

# Tokenize payment data

[block:code]
{
  "codes": [
    {
      "code": "elements.createToken(cardComponent, {\n  // optional\n  stripePublishableKey: YOUR_STRIPE_KEY,\n})\n.then((data) => {\n   // handle tokenization response here\n})\n",
      "language": "javascript"
    }
  ],
  "sidebar": true
}
[/block]

**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.

[block:api-header]
{
  "title": "Method Params"
}
[/block]

**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`

[block:api-header]
{
  "title": "Returns"
}
[/block]

`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](https://elements-pay.readme.io/reference#errors) for all possible errors.
* result.card: A card object which contains details of the card was created successfully.

[block:code]
{
  "codes": [
    {
      "code": "{\n    \"elementsTokenization\": {\n        \"id\": \"TOK-8oZvwTLx2eUjFwdHaZmt7gycpgQVz1fNk\",\n        \"type\": \"token\",\n        \"card\": {\n            \"id\": \"CARD-GJokMkNJnWRmYgAZ9baar5TLXHf2SrgJL\",\n            \"type\": \"card\",\n            \"exp_month\": 12,\n            \"exp_year\": 2023,\n            \"cvv_check\": \"UNCHECKED\",\n            \"name\": \"yunfei\",\n            \"address_zip\": \"42424\",\n            \"brand\": \"VISA\",\n            \"country\": \"US\",\n            \"fingerprint\": \"fc435db1696a48c5ca8ab3e40570b9b685aa5632428f04ea4c5293c971f740fd\",\n            \"funding\": \"CREDIT\",\n            \"last4\": \"4242\"\n        },\n        \"status\": \"SUCCEEDED\"\n    },\n    \"stripeTokenization\": null\n}",
      "language": "json",
      "name": "Example"
    }
  ]
}
[/block]

[block:callout]
{
  "type": "info",
  "title": "Elements service unavailable",
  "body": "For rare intermittent errors, you may only receive a \"SINGLE_USE\" Stripe token which your server persist using the usual [Stripe strategy](https://stripe.com/docs/saving-cards)."
}
[/block]

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

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

[block:callout]
{
  "type": "info",
  "title": "Trigger an error and verify fallback",
  "body": "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"
}
[/block]