Quickstart
Get the Visa Acceptance SDK running in under 5 minutes
Load the SDK
Add the SDK script tag to your HTML page:
<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:
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:
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
<!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