> ## Documentation Index > Fetch the complete documentation index at: https://docs.avraapi.com/llms.txt > Use this file to discover all available pages before exploring further. # Visual Playground > Try the real Payment Elements customer form without API credentials or a payment request. export const CustomerFormPlayground = () => { const CDN_VERSION = '1.1.2'; const markup = (String.raw)`
← Back to Payment Elements overview
Interactive playground

Customer Form

Try the real Payment Elements form locally. Nothing here creates an order or sends a network request.

Package@avraapi/payment-elements
Version1.1.2
Released1st Oct 2026

Live preview

Your customer form

Dark

● This is the published browser component. Checkout actions are intentionally unavailable in this preview.

`; const loadScript = (id, src, attributes = {}) => { const existing = document.getElementById(id); if (existing) return Promise.resolve(); return new Promise((resolve, reject) => { const script = document.createElement('script'); script.id = id; script.src = src; Object.assign(script, attributes); script.onload = resolve; script.onerror = () => reject(new Error(`Could not load ${src}.`)); document.head.append(script); }); }; const root = useRef(null); useEffect(() => { let cancelled = false; const isLocalDocs = ['localhost', '127.0.0.1'].includes(window.location.hostname); const cdnBase = `https://cdn.avraapi.com/payment-elements/v${CDN_VERSION}`; const bundleUrl = isLocalDocs ? 'http://localhost:8002/avraapi-payment-elements.umd.js' : `${cdnBase}/avraapi-payment-elements.umd.js`; const playgroundUrl = isLocalDocs ? '/images/payment-elements/playground.js?v=payment-methods-v2' : `${cdnBase}/docs/playground.js`; const styleUrl = isLocalDocs ? '/images/payment-elements/playground.css?v=payment-methods-v2' : `${cdnBase}/docs/playground.css`; const style = document.createElement('link'); style.id = 'avra-payment-elements-playground-styles'; style.rel = 'stylesheet'; style.href = styleUrl; if (!isLocalDocs) { style.integrity = 'sha384-RDMa2adscZlXzXK/BADfA1CuOLx2TFzKZuVU/74i78WCqrwQykEGPIicoi8FqbJi'; style.crossOrigin = 'anonymous'; } document.head.append(style); const mount = () => { if (!cancelled && root.current) window.AvraAPIPaymentElementsPlayground?.mount(); }; Promise.resolve().then(() => loadScript('avra-payment-elements-bundle', bundleUrl, isLocalDocs ? {} : { integrity: 'sha384-OFlOd6fgBnHYPoVCXZ9AbKa1VH4GalDBS6fK1Tqib1wecbf2aJ0mMpmJOrma+aSt', crossOrigin: 'anonymous' })).then(() => loadScript('avra-payment-elements-playground-script', playgroundUrl, isLocalDocs ? {} : { integrity: 'sha384-gUJk/kbGexd54R4q8ljcJz9k25Y4W558QR98h+iN5DkyeW48IubSa5Fw456ja1tK', crossOrigin: 'anonymous' })).then(mount).catch(() => { if (root.current) root.current.innerHTML = '

The interactive preview could not load. Refresh the page and try again.

'; }); return () => { cancelled = true; style.remove(); }; }, []); return
; };