<!-- 1. Load the SDK -->
<script src="https://sdk.embed.visa.com/acceptance/v1"></script>
<!-- 2. Add a container -->
<div id="transactions"></div>
<!-- 3. Render the component -->
<script>
VisaAcceptance.init({
locale: 'en-US',
theme: { preset: 'anet' },
});
VisaAcceptance.render('transactions', '#transactions');
</script>Three steps from zero to a live payment component.
Browser
VisaAcceptance SDKBackend Server
Node / Python / JavaAcceptance Server
CGK2 / tokens + dataIframe Components
Visa hosted / sandboxedIframe auth state machine
Token expires → auth_required fires → resolve with new token, no page reload needed
One API call to Acceptance Platform. The server validates your credentials and returns a short-lived session token.
Pass the token to VisaAcceptance.render(). No bundler, no build step — drop into any web page in minutes.
Auth flows, locale switching, theme propagation, real-time updates — all inside a sandboxed iframe. Card data never reaches your page.
Authentication
Components never store credentials. Your backend issues a short-lived session token — the SDK passes it to the sandboxed iframe, which manages the auth state machine without any frontend code touching sensitive data.
Server generates a session token
Your backend calls the Acceptance Platform API and receives a short-lived sessionToken scoped to the current user.
SDK initialises with that token
Pass it to VisaAcceptance.init(). The SDK creates an isolated iframe session — no credentials ever touch your frontend code.
Component manages auth state internally
The iframe cycles through INITIALIZING → AUTH_REQUIRED → AUTHENTICATED. When a token expires, an auth_required event fires so you can refresh without a page reload.
// 1. Init with event callback for auth lifecycle
VisaAcceptance.init({
locale: 'en-US',
onEvent: (type, payload) => {
if (type === 'auth_required') {
refreshToken();
}
},
});
// 2. Render — SDK handles iframe, sizing, and theming
VisaAcceptance.render('transactions', '#container');
// 3. Token refresh — call your backend, then re-init
async function refreshToken() {
const token = await yourServer.refreshSession();
VisaAcceptance.updateConfig({ /* new config */ });
}Auth states your component cycles through
Searchable, sortable transaction history with status indicators and export.
Everything you need to ship payment features without becoming a payments expert.
Iframe isolation keeps card data out of your scope. No audits, no liability.
Pass a locale code and the component handles everything — currency, date formats, text direction.
Short-lived server-issued tokens. No client credentials, no API keys in your frontend.
A script tag is all it takes. Works in legacy apps, CMSes, or any HTML page.
Add your first payment component in under five minutes. Start with the sandbox and go live when you're ready.
Free sandbox · No credit card required