> ## Documentation Index
> Fetch the complete documentation index at: https://developer.hellgate.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Card Tokenization

> Exercise the Web SDK card flow with a session, no front-end required.

The [Hellgate Cloud Web SDK Demo](https://demo.hellgate.dev/card) is a hosted front-end that drives the Web SDK flows end to end. Paste a `session_id` from your server, submit a card, and confirm the resulting token — all without building a browser integration first. Reach for it when you want to verify a session from your backend before wiring up the SDK in your own application.

The workbench covers four flows, exposed as tabs at the top of the page: **Card Tokenization**, **CVC2 Refresh**, **Card Elements**, and **3DS**. This page walks through the default **Card Tokenization** flow; the other tabs consume the same session and backend configuration.

## Prerequisites

A `session_id` from your backend — see the [Guardian](/products/guardian/api-reference/pci/create-token) and [Commerce v2](/products/commerce/v2/api-reference/tokens_create/request-a-token-session) examples on the right.

<RequestExample>
  ```bash Guardian theme={null}
  curl --request POST \
    --url https://<your-cluster>.on-hellgate.cloud/api/pci/tokens \
    --header 'content-type: application/json' \
    --header 'x-api-key: hlg-sbx-...' \
    --data '{ "source": "session" }'
  ```

  ```bash Commerce v2 theme={null}
  curl --request POST \
    --url https://sandbox.hellgate.io/tokens/session \
    --header 'content-type: application/json' \
    --header 'x-api-key: hlg-sbx-...'
  ```
</RequestExample>

<ResponseExample>
  ```json Guardian theme={null}
  {
    "id": "a9f4e2c0-12d0-4b73-8e8c-0f0f0f0f0f0f",
    "session_id": "7f2c9460-7e2e-403f-a08a-bc58cdcaea83",
    "status": "pending"
  }
  ```

  ```json Commerce v2 theme={null}
  {
    "session_id": "7f2c9460-7e2e-403f-a08a-bc58cdcaea83"
  }
  ```
</ResponseExample>

## Steps

<Steps>
  <Step title="Open the workbench">
    Visit [https://demo.hellgate.dev/card](https://demo.hellgate.dev/card). The page loads the same Web SDK you would embed in your own application.
  </Step>

  <Step title="Set the Backend Service URL">
    Use the **Backend Service URL** dropdown at the top of the page to match the environment that issued your session.

    There are built-in options (e.g. **Sandbox (Shared Commerce v2)**), which target the Test tier of the shared Hellgate Commerce v2 platform.

    For any other deployment — a dedicated Commerce v2 cluster or a Guardian cluster — enable the **Custom URL** toggle and enter the base URL of your backend (for example `https://<your-cluster>.on-hellgate.cloud`).
  </Step>

  <Step title="Paste the Session ID">
    Paste the `session_id` into the **Session ID** field.
  </Step>

  <Step title="(Optional) Adjust form options">
    The remaining controls change how the SDK renders the card form. Leave them at their defaults unless you want to preview a specific layout:

    * **Schemes** — restrict the accepted card networks.
    * **Card Layout** — render the card fields as **Single-line** or **Multi-line**.
    * **Expiration Fields** — **Combined** month/year field or **Separate** fields.
  </Step>

  <Step title="Submit the card">
    Click **Test Card**, fill in the card details in the rendered form, and submit.
  </Step>

  <Step title="Inspect the result">
    On success the workbench shows the resulting token. Confirm the same record through your own integration — for example by fetching it through the relevant product's API or viewing it in the Hellgate dashboard.
  </Step>
</Steps>

## Next steps

Once the workbench flow succeeds, port the same session-plus-SDK pattern into your own application:

* [Web SDK Overview](/platform/resources/sdks/web-sdk/overview) — initialize the SDK and render the card form.
* [Web SDK API](/platform/resources/sdks/web-sdk/api) — detailed handler and event reference.