# @exerp/odin-dropin 中文文档规范地址：https://npmcn.com/package/%40exerp/odin-dropin/ 版本：2\.1\.0 npm 元数据更新时间：2026-02-05T20:09:33.123Z 中文译文更新时间：2026-11-14T03:31:38.566Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。原始 npm 页面：https://www.npmjs.com/package/%40exerp/odin-dropin 原文对照：https://npmcn.com/package/%40exerp/odin-dropin/?lang=original 项目主页：https://github.com/exerpteam/odin-drop-in/tree/main/packages/odin-dropin#readme 源码仓库：https://github.com/exerpteam/odin-drop-in ## 关键信息（来自 npm 元数据） - 包体积（解压后）：6.4 MB，11 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：0 个 - 首次发布：2025-05-15T20:40:17.190Z - 最新版本发布：2026-02-05T20:09:33.006Z - 近 30 天下载量：12703（2026-10-14 至 2026-11-12，npm 官方下载统计） - 已发布版本数：8（近 12 个月 1 个） ## 中文简介 ODIN 支付 ## 安装 ```sh npm install @exerp/odin-dropin ``` 也可以使用：`pnpm add @exerp/odin-dropin`、`yarn add @exerp/odin-dropin`、`bun add @exerp/odin-dropin` ## README [工作空间读取器](https://npmcn.com/package/README.md) - 说吧 [QQ 更改日志](https://npmcn.com/package/%40exerp/odin-dropin/CHANGELOG.md) * * * # ODIN 支付`@exerp/odin-dropin`(中文(简体) ) 这个软件包为将ODIN Pay Drop-in组件整合到网络应用程序提供了公共外观. 它简化了与 Stencil 网络基本组件和 `OdinPay.js` 图书馆.

示例:卡片支付表
ODIN Drop-in Card Example

示例:银行支付表
ODIN Drop-in BANK_ACCOUNT Example

## 安装 ```bash # Using pnpm pnpm add @exerp/odin-dropin # Using npm npm install @exerp/odin-dropin # Using yarn yarn add @exerp/odin-dropin ``` ## API 文档此套件的主要导出是 `OdinDropin` 课. ### 导入 ```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 ``` ## 常见问题 ### @exerp/odin-dropin 是什么？ ODIN 支付 ### 如何安装 @exerp/odin-dropin？在项目目录运行 npm install @exerp/odin-dropin，或使用 pnpm add / yarn add / bun add。 ### @exerp/odin-dropin 支持 TypeScript 吗？支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @exerp/odin-dropin 支持 ESM 还是 CommonJS？同时提供 ES Module 与 CommonJS 入口，import 和 require 都可以使用，打包工具会自动选择合适的版本。 ### @exerp/odin-dropin 可以商用吗？ @exerp/odin-dropin 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @exerp/odin-dropin 的下载量有多少？根据 npm 官方下载统计，@exerp/odin-dropin 在 2026/10/14 – 2026/11/12 这 30 天内被下载 12,703 次，日均约 423 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @exerp/odin-dropin 还在维护吗？最新版本 2\.1\.0 发布于 2026/02/06（9 个月前）；至今共发布 8 个版本，其中过去 12 个月发布了 1 个；首次发布于 2025/05/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。