ExtensionPay.js完全入门从安装到收款的完整步骤附示例代码【免费下载链接】ExtPayThe JavaScript library for ExtensionPay.com — payments for your browser extensions, no server needed.项目地址: https://gitcode.com/gh_mirrors/ex/ExtPayExtensionPay.js是一款专为浏览器扩展开发者设计的JavaScript库能帮助开发者轻松实现扩展的支付功能无需自建服务器。通过ExtensionPay.com服务开发者可以快速为扩展添加订阅或一次性付款功能目前已帮助扩展创作者获得超过50万美元的收入。快速了解ExtensionPay.jsExtensionPay.js的核心优势在于简单集成和零服务器配置。只需几行代码就能为你的浏览器扩展添加专业的支付系统支持多种支付方式和订阅管理。无论你是开发Manifest V2还是V3扩展都能轻松适配。为什么选择ExtensionPay.js无需后端开发所有支付逻辑由ExtensionPay.com处理开发者只需专注前端集成支持多种支付模式订阅制月付/年付和终身购买模式跨浏览器兼容支持Chrome、Firefox等主流浏览器完整的订阅管理用户可随时查看和管理自己的订阅状态详细的用户数据获取用户支付状态、订阅信息等关键数据准备工作安装与环境配置1. 安装ExtensionPay.js最简便的安装方式是使用npmnpm install extpay --save如果你不使用打包工具可以直接复制项目中的ExtPay.js文件到你的扩展目录。项目提供了多种版本ExtPay.js - 标准版本ExtPay.module.js - ESM模块版本ExtPay.common.js - CommonJS版本2. 配置manifest.json无论你使用Manifest V2还是V3都需要在manifest.json中添加必要的权限{ permissions: [storage] }对于Firefox用户还需要添加额外的权限{ permissions: [https://extensionpay.com/*] }如果你的扩展使用了内容安全策略CSP请确保添加以下配置content_security_policy: connect-src https://extensionpay.com核心实现从初始化到收款1. 初始化ExtensionPay必做首先需要在ExtensionPay.com注册账号并创建扩展获取你的扩展ID。然后在background.js中初始化ExtPayManifest V3示例// background.js importScripts(ExtPay.js); const extpay ExtPay(your-extension-id); extpay.startBackground();Manifest V2示例// background.js const extpay ExtPay(your-extension-id); extpay.startBackground();⚠️ 注意extpay.startBackground()必须在background文件中调用且只能调用一次这是确保支付系统正常工作的关键步骤。2. 检查用户支付状态使用extpay.getUser()方法可以获取用户的支付状态和相关信息extpay.getUser().then(user { if (user.paid) { // 用户已付费开启高级功能 console.log(用户已付费到期时间, user.subscriptionCancelAt); } else { // 用户未付费引导至支付页面 extpay.openPaymentPage(); } }).catch(error { // 处理网络错误等异常情况 console.error(获取用户信息失败, error); });用户对象user包含以下关键属性paid: 布尔值表示用户是否已付费plan: 用户当前订阅的计划信息如价格、周期subscriptionStatus: 订阅状态active/past_due/canceledemail: 用户邮箱如果用户已登录3. 创建支付页面调用extpay.openPaymentPage()会打开一个新标签页展示你的支付计划供用户选择// 在按钮点击事件中调用 document.getElementById(upgrade-btn).addEventListener(click, () { extpay.openPaymentPage(); });用户将看到类似以下的支付计划选择页面选择计划后用户会进入Stripe支付页面完成付款4. 订阅管理功能已付费用户可以通过同样的extpay.openPaymentPage()方法管理他们的订阅// 提供管理订阅按钮 document.getElementById(manage-subscription).addEventListener(click, () { extpay.openPaymentPage(); });用户将看到他们的订阅详情页面可以更新支付方式或取消订阅高级功能提升用户转化率1. 折扣码功能ExtensionPay支持创建折扣码吸引更多用户购买。在ExtensionPay后台创建折扣码后用户可以在支付页面输入2. 免费试用功能你可以提供免费试用期来让用户体验扩展的全部功能使用extpay.openTrialPage()方法// 引导用户开始免费试用 document.getElementById(start-trial).addEventListener(click, () { extpay.openTrialPage(7-day); // 显示7-day提示文本 });3. 支付成功回调使用onPaid监听器在用户完成支付时执行特定操作extpay.onPaid.addListener(user { console.log(用户已成功支付, user); // 可以在这里发送欢迎邮件或提供使用指南 });要使用此功能需要在manifest.json中添加内容脚本配置{ content_scripts: [ { matches: [https://extensionpay.com/*], js: [ExtPay.js], run_at: document_start } ] }示例项目参考项目提供了完整的示例扩展你可以直接参考或作为模板使用Manifest V2示例Manifest V3示例安装示例扩展的步骤克隆仓库git clone https://gitcode.com/gh_mirrors/ex/ExtPay打开浏览器扩展页面chrome://extensions/启用开发者模式点击加载已解压的扩展程序选择示例文件夹总结通过ExtensionPay.js你可以在不到一小时内为浏览器扩展添加专业的支付系统。无需处理复杂的后端逻辑和支付安全问题让你专注于扩展功能的开发。无论是订阅制还是一次性购买ExtensionPay都能满足你的需求帮助你将创意转化为收入。如果必须直接使用Stripe我可能根本不会尝试 monetize我的扩展。ExtensionPay让整个过程变得如此简单设置和测试不到一个小时就完成了。 — 开发者David【免费下载链接】ExtPayThe JavaScript library for ExtensionPay.com — payments for your browser extensions, no server needed.项目地址: https://gitcode.com/gh_mirrors/ex/ExtPay创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考