Quickstart

Load the SDK

Add the SDK script tag to your HTML page:

index.html

<script src="https://sdk.embed.visa.com/acceptance/v1"></script>

The environment is auto-detected from the script URL hostname — no configuration needed.

Initialize

Call init() with your configuration:

main.ts

VisaAcceptance.init({
  locale: 'en-US',
  theme: { preset: 'anet' },
  auth: {
    type: 'oauth',
    getToken: () =>
      fetch('/api/visa-token')
        .then((r) => r.json())
        .then((d) => d.token),
  },
});

Render a Component

Mount a component into a container element:

main.ts

const instance = VisaAcceptance.render('transactions', '#my-container');

The SDK handles iframe creation, sizing, theme injection, and authentication automatically. You only need a container element.

Full Example

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Visa Acceptance Demo</title>
    <script src="https://sdk.embed.visa.com/acceptance/v1"></script>
  </head>
  <body>
    <div id="transactions-container" style="min-height: 600px"></div>

    <script>
      VisaAcceptance.init({
        locale: 'en-US',
        theme: { preset: 'anet' },
        auth: {
          type: 'oauth',
          getToken: () =>
            fetch('/api/visa-token')
              .then((r) => r.json())
              .then((d) => d.token),
          refreshToken: () =>
            fetch('/api/visa-token/refresh')
              .then((r) => r.json())
              .then((d) => d.token),
        },
      });

      VisaAcceptance.render('transactions', '#transactions-container');
    </script>
  </body>
</html>

For development only, you can skip authentication entirely with noAuth: true:

VisaAcceptance.init({ noAuth: true, theme: { preset: 'anet' } });

See the Testing guide for sandbox mode details.

Next Steps

API Reference — Full method documentation
Theming Guide — Customize colors, typography, and presets
Authentication — All four auth strategies explained
Security Guide — Iframe isolation and credential handling