Components
Available embedded components and their capabilities.
Available Components
Pass any of these names to VisaAcceptance.render():
| Component | Name | Category | Description |
|---|---|---|---|
| Transactions | transactions | Data | Display and manage payment transactions with filtering and sorting |
| Invoices | invoices | Data | View and manage invoices with status tracking |
| Payment Form | payment | Forms | Secure payment collection form with card validation |
| Payment Links | pay-by-link | Management | Create and manage shareable payment links |
| Subscriptions | subscriptions | Management | Manage recurring billing and subscription plans |
| Customers | customers | Data | View and manage customer records with search |
| Reports | reports | Data | Generate and view payment reports and analytics |
| Fraud Manager | fraud-manager | Management | Risk tolerance slider for fraud detection |
| Merchant Boarding | merchant-boarding | Forms | Multi-step merchant onboarding form |
| Dynamic Form | dynamic-form | Forms | Flexible form rendering engine — supports merchant boarding, Klarna, and custom forms |
| Login | login | Auth | Authentication component for session-based flows |
Rendering a Component
// Minimal
VisaAcceptance.render('transactions', '#container');
// With options
const instance = VisaAcceptance.render('invoices', document.getElementById('sidebar'), {
version: '1.0.0',
auth: { type: 'api-key', apiKey: 'ak_live_xyz' },
onReady: () => console.log('Invoice list loaded'),
onError: (err) => console.error('Failed:', err.code),
});Multiple Components on One Page
Each render() call creates an independent instance with its own iframe and lifecycle:
const transactions = VisaAcceptance.render('transactions', '#main');
const fraudManager = VisaAcceptance.render('fraud-manager', '#sidebar');
// Each has its own state
console.log(transactions.getState()); // 'AUTHENTICATED'
console.log(fraudManager.getState()); // 'INITIALIZING'
// Destroy individually
transactions.destroy();Component Lifecycle
Every component goes through these states:
INITIALIZING → MOUNTED → AUTH_REQUIRED → AUTH_IN_PROGRESS → AUTHENTICATED
│
(token expires)
▼
TOKEN_REFRESH_IN_PROGRESS
│
(refresh succeeds)
▼
AUTHENTICATEDAll components emit framework events at each state transition.
Container Requirements
The container element must:
- Exist in the DOM before
render()is called - Have a defined width (the component fills 100% width)
- Have sufficient height or allow the iframe to auto-resize via
HEIGHT_CHANGEmessages
<!-- Good: explicit container -->
<div id="transactions" style="min-height: 600px;"></div>
<!-- Good: CSS selector -->
<div class="embed-target"></div>
<!-- Bad: element doesn't exist yet -->
<script>
// This will fail if #container isn't in the DOM
VisaAcceptance.render('transactions', '#container');
</script>The container must be in the DOM before calling render(). If you're using a framework like React, render the container element first, then call render() in a useEffect.