Card widget

Card numbers, expiry, and CVV are rendered by the card widget directly in the end-user’s browser using a short-lived access token from our API. Your servers and AlphaX never see the raw card data, keeping you out of PCI scope.

Step 1 — Load the card widget SDK

Add the SDK script to the page that shows the card. It exposes a global window.widget. Use the staging SDK against the sandbox API and the production SDK against production.

1
<!-- Production -->
2
<script src="https://static.univisioncard.com/api/sdk/card/1.0.0/index.min.js"></script>
3
4
<!-- Staging -->
5
<script src="https://staging-static.univisioncard.com/api/sdk/card/1.0.0/index.min.js"></script>

Step 2 — Get a card access token

When the user asks to reveal the card, call the details endpoint from your backend so your API key stays server-side:

POST /v1/cards/{cardId}/details
X-API-Key: <your partner API key>
X-Company-Id: <the company id>

1
{
2
  "type": "CardAccessToken",
3
  "data": { "accessToken": "eyJhbGciOi..." }
4
}

Step 3 — Add containers for the secure fields

Place empty elements where each field should render. The widget injects secure iframes into these by id:

1
<div id="card-pan"></div>
2
<div id="card-exp"></div>
3
<div id="card-cvv"></div>

Step 4 — Bootstrap the widget with the token

Call bootstrap(...) after the container elements exist in the DOM. If you re-reveal, fetch a new token and call bootstrap again.

1
window.widget.bootstrap({
2
  clientAccessToken: accessToken, // from Step 2
3
  component: {
4
    showPan: {
5
      cardPan: {
6
        domId: 'card-pan',
7
        format: true, // group digits (e.g. 4242 4242 ...)
8
        styles: {
9
          span: {
10
            color: '#111',
11
            'font-family': 'monospace',
12
            'font-size': '14px',
13
            'letter-spacing': '2px',
14
            'font-weight': 'bold',
15
          },
16
        },
17
      },
18
      cardExp: {
19
        domId: 'card-exp',
20
        format: true,
21
        styles: { span: { color: '#111', 'font-family': 'monospace', 'font-size': '14px' } },
22
      },
23
      cardCvv: {
24
        domId: 'card-cvv',
25
        styles: { span: { color: '#111', 'font-family': 'monospace', 'font-size': '14px' } },
26
      },
27
    },
28
  },
29
});

Register your domain (required)

The widget only runs on domains pre-registered with the card processor. The registered domain must match the domain where the widget is loaded — if you register a root domain, all of its subdomains are covered.

Notes

• No OTP from AlphaX. We don’t send an OTP to view card details — you own the end-user authentication and gating before you call the endpoint.
• Styling is controlled via the styles.span object per field.
• Security: the SDK renders values inside iframes it controls; the raw PAN/CVV are never exposed to your JavaScript, your backend, or AlphaX.