--- # ODIN Payment Drop-in Facade (`@exerp/odin-dropin`) This package provides the public facade for integrating the ODIN Payment Drop-in component into web applications. It simplifies the interaction with the underlying Stencil web components and the `OdinPay.js` library.

Example: Card Payment Form
ODIN Drop-in Card Example

Example: BANK_ACCOUNT Payment Form
ODIN Drop-in BANK_ACCOUNT Example

## Installation ```bash # Using pnpm pnpm add @exerp/odin-dropin # Using npm npm install @exerp/odin-dropin # Using yarn yarn add @exerp/odin-dropin ``` ## API Documentation The primary export of this package is the `OdinDropin` class. ### Importing ```javascript // ES Module import import { OdinDropin, type LogLevel, type OdinDropinInitializationParams, // For typing params type OdinFieldValidationEvent, // For the Validation callback type OdinV2ThemeConfig, // For the theme config type OdinSubmitPayload, // For onSubmit callback type OdinPayErrorPayload // For onError callback } from '@exerp/odin-dropin'; // For UMD builds (if included via ``` ```javascript // app.js import { OdinDropin, type BillingFieldsConfig, // Keep if used in example logic type OdinFieldValidationEvent, type OdinV2ThemeConfig, type OdinSubmitPayload, type OdinPayErrorPayload, type LogLevel } from '@exerp/odin-dropin'; const odinContainer = document.getElementById('odin-container'); const resultDisplay = document.getElementById('result-display'); const errorDisplay = document.getElementById('error-display'); const validationEventDisplay = document.getElementById('validation-event-display'); let odinDropinInstance = null; // To hold the instance // --- Fetch Public Token (Replace with your actual backend call) --- async function getPublicToken() { // Simulate fetching from backend console.log("Fetching ODIN Public Token..."); // In a real app, replace this with: // const response = await fetch('/api/get-odin-public-token'); // if (!response.ok) throw new Error('Failed to fetch token'); // const data = await response.json(); // return data.publicToken; // For example purposes: return prompt("Enter ODIN Public Token:"); // DO NOT use prompt in production } function handleFieldValidation(event: OdinFieldValidationEvent) { console.log('[Example App] onChangeValidation:', event); if (validationEventDisplay) { validationEventDisplay.textContent = `Last Validation: ${event.fieldName} - Valid: ${event.isValid}, Code: ${event.errorCode || 'N/A'}`; } // Add custom logic here, e.g., dynamic styling based on event.isValid } // --- Initialize and Mount --- async function initializeOdin() { if (!odinContainer) { console.error('Mount point not found'); return; } try { const token = await getPublicToken(); if (!token) { throw new Error('ODIN Public Token is required.'); } const country = prompt("Enter Country Code (US or CA):"); // Example, get this from your app's context if (country !== 'US' && country !== 'CA') { throw new Error('Valid Country Code (US or CA) is required.'); } const pmtType = confirm("Use BANK_ACCOUNT? (Cancel for Card)") ? 'BANK_ACCOUNT' : 'CARD'; // Example of selecting payment method type const enableNameField = confirm("Enable 'Name on Card' field?"); // Example const currentBillingFieldsConfig: BillingFieldsConfig = { name: enableNameField, // addressLine1: { label: "Street Address", placeholder: "123 Main St" }, // addressLine2: false, }; const exampleTheme: OdinV2ThemeConfig = { "fontFamily": "Arial, sans-serif", "fontSize": "16px", "color": "#333", "::placeholder": { "color": "#888" } }; // Clean previous state if re-initializing if (odinDropinInstance) { odinDropinInstance.unmount(); } if (resultDisplay) resultDisplay.textContent = ''; if (errorDisplay) errorDisplay.textContent = ''; if (validationEventDisplay) validationEventDisplay.textContent = ''; odinDropinInstance = new OdinDropin({ odinPublicToken: token, countryCode: country as 'US' | 'CA', paymentMethodType: pmtType as 'CARD' | 'BANK_ACCOUNT', billingFieldsConfig: currentBillingFieldsConfig, logLevel: 'DEBUG', // Example: set a log level onChangeValidation: handleFieldValidation, onSubmit: (result) => { console.log('onSubmit received:', result); let message = `Success! PM ID: ${result.paymentMethodId}\nType: ${result.paymentMethodType}`; if (result.paymentMethodType === 'CARD' && result.details) { const cardDetails = result.details; // Type assertion might be needed in TS, not in JS example message += `\nCard Brand: ${cardDetails.cardBrand || 'N/A'}`; message += `\nLast 4: ${cardDetails.last4 || 'N/A'}`; message += `\nExpires: ${cardDetails.expirationDate || 'N/A'}`; // You might want to display maskedAccountNumber or binDetails too // console.log('Masked Account Number:', cardDetails.maskedAccountNumber); // console.log('BIN Details:', cardDetails.binDetails); } else if (result.paymentMethodType === 'BANK_ACCOUNT' && result.details) { const achDetails = result.details as AchPaymentMethodDetails; // Type assertion for clarity message += `\nAccount Type: ${achDetails.bankAccountType || 'N/A'}`; message += `\nAccount Last4: ${achDetails.accountNumberLast4 || 'N/A'}`; if (achDetails.routingNumber) message += `\nRouting: ${achDetails.routingNumber}`; if (achDetails.transitNumber) message += `\nTransit: ${achDetails.transitNumber}`; if (achDetails.institutionNumber) message += `\nInstitution: ${achDetails.institutionNumber}`; } if (result.billingInformation) { message += `\nBilling Info: ${JSON.stringify(result.billingInformation, null, 2)}`; } if (resultDisplay) resultDisplay.textContent = message; if (errorDisplay) errorDisplay.textContent = ''; alert(`Payment Method ID: ${result.paymentMethodId} - Review console for all details. Send ID to backend.`); // Optionally unmount after success: // odinDropinInstance.unmount(); }, onError: (error) => { console.error('onError received:', error); if (errorDisplay) errorDisplay.textContent = `Error: ${error.message}`; if (resultDisplay) resultDisplay.textContent = ''; }, }); odinDropinInstance.mount(odinContainer); // Mount into the div element } catch (error) { console.error('Initialization or mounting failed:', error); if (errorDisplay) errorDisplay.textContent = `Error: ${error.message || error}`; } } // --- Run Initialization --- initializeOdin(); // Example of how to unmount if needed later (e.g., on component destroy in a framework) // function cleanup() { // if (odinDropinInstance) { // odinDropinInstance.unmount(); // odinDropinInstance = null; // console.log('Odin Drop-in unmounted.'); // } // } // window.addEventListener('beforeunload', cleanup); // Example cleanup trigger