Apex Embedded Components - Enterprise Payment Solutions

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.

Local Development Setup

Start the embed-host dev server

nx serve embed-host
# Starts at https://local.sdk.embed.visa.com:8081

Load the SDK from local

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

The SDK auto-detects the local environment from the hostname. See Environments for the full hostname-to-environment mapping.

Use the 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'

Testing & Sandbox