\n )\n}\n```\n\n---\n\n## 🔧 Backend Integration\n\nYour backend needs three endpoints:\n\n### 1. Generate Capture Context\n```javascript\nPOST /api/capture-context\nBody: { targetOrigins: ['https://yoursite.com'] }\nResponse: { captureContext: 'eyJraWQ...' }\n```\n\n### 2. Start 3DS Enrollment\n```javascript\nPOST /api/start\nBody: {\n transientToken: string\n cardType: string\n amount: string\n currency: string\n deviceInformation: object\n customerInfo: object\n}\nResponse: {\n transactionId: string\n enrollment: {\n challengeRequired: boolean\n stepUpUrl?: string\n accessToken?: string\n }\n}\n```\n\n### 3. Complete Payment (Frictionless)\n```javascript\nPOST /api/complete\nBody: { transactionId: string }\nResponse: { status: 'success', payment: {...} }\n```\n\n### 4. Webhook (Friction Flow)\n```javascript\nPOST /api/webhook/3ds?transactionId=xxx&cardType=xxx\nBody: { TransactionId: string, ... }\nResponse: HTML with postMessage script\n```\n\nThe webhook should:\n1. Validate the authentication\n2. Process the payment\n3. Return HTML that sends a `postMessage` to the parent window:\n\n```html\n\n```\n\n---\n\n## 🎨 Styling the Challenge Modal\n\nYou can customize the modal appearance:\n\n```javascript\nclient.setModalStyles({\n overlay: {\n backgroundColor: 'rgba(0, 0, 0, 0.75)'\n },\n modal: {\n borderRadius: '16px',\n boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)'\n },\n header: {\n background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',\n padding: '24px'\n }\n})\n```\n\n---\n\n## 🐛 Troubleshooting\n\n### Microform fields not showing\n- Ensure the container element exists in the DOM before calling `setupFlexMicroform`\n- Check browser console for script loading errors\n- Verify the capture context is valid and not expired\n\n### Challenge modal not closing\n- Ensure your webhook returns proper HTML with `postMessage` script\n- Check that the `transactionId` in the message matches\n- Verify the message event listener is set up before showing the modal\n\n### \"Flex SDK not available\" error\n- The SDK automatically loads the Flex script, but network issues can cause failures\n- Check your Content Security Policy allows loading from `flex.cybersource.com`\n- Try manually including the script tag in your HTML\n\n---\n\n## Contributing\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for details.\n\n## License\nMIT License.\n","readmeFilename":"README.md"}