Testing & Sandbox

No-Auth Mode (Sandbox)

Skip authentication entirely during development by passing noAuth: true:

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

// Components render with mock data immediately
VisaAcceptance.render('transactions', '#container');

You can also enable no-auth per-component:

VisaAcceptance.render('transactions', '#container', {
  noAuth: true,
});

No-auth mode is for development only. The production SDK ignores noAuth flags entirely.

Interactive Demo

Visit the Live Demo page to test components with different themes, locales, and auth modes without writing code.

Testing with Frameworks

import { useEffect, useRef } from 'react';

function TransactionsWidget() {
const containerRef = useRef<HTMLDivElement>(null);

useEffect(() => {
if (!containerRef.current) return;
const instance = VisaAcceptance.render(
'transactions',
containerRef.current,
{ noAuth: true }
);
return () => instance.destroy();
}, []);

return <div ref={containerRef} className="min-h-[600px]" />;
}

<div id="transactions-container"></div>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    VisaAcceptance.init({ noAuth: true });
    VisaAcceptance.render('transactions', '#transactions-container');
  });
</script>

<template>
  <div ref="container" style="min-height: 600px" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const container = ref(null);
let instance = null;

onMounted(() => {
  instance = VisaAcceptance.render('transactions', container.value, {
    noAuth: true,
  });
});

onUnmounted(() => instance?.destroy());
</script>

Timeouts & Retry

The SDK uses these defaults during component loading:

Constant	Default	Description
`AUTH_TIMEOUT_MS`	60 s	Max time for login popup to complete
`IFRAME_LOAD_TIMEOUT_MS`	10 s	Max time for iframe to signal `IFRAME_READY`
`CREDENTIAL_DELIVERY_TIMEOUT_MS`	15 s	Max time for iframe to acknowledge credentials
`MAX_LOAD_RETRIES`	3	Number of iframe reload attempts on failure
`RETRY_BASE_DELAY_MS`	1 s	Exponential backoff base (1 s, 2 s, 4 s)

Debugging

Enable verbose logging to see SDK internal state transitions:

VisaAcceptance.init({
  noAuth: true,
  onEvent: (type, payload) => {
    console.log(`[SDK] ${type}`, payload);
  },
});

Check detected environment to verify you're hitting the right backend:

console.log(VisaAcceptance.getEnvironment()); // 'local' | 'dev' | 'cte' | 'prod'