尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

ExtPay 浏览器扩展支付快速接入指南

ExtPay 浏览器扩展支付快速接入指南 ExtPay 浏览器扩展支付快速接入指南【免费下载链接】ExtPayThe JavaScript library for ExtensionPay.com — payments for your browser extensions, no server needed.项目地址: https://gitcode.com/gh_mirrors/ex/ExtPayExtPay 是一个面向浏览器扩展的 JavaScript 支付库。它基于 Stripe内置订阅管理、优惠券、免费试用三项能力不用写一行后端代码就能向用户收费适合想给自己的扩展做变现的 JS 开发者。 浏览器扩展变现的三座大山不少扩展作者想做收费功能却卡在最前面一步扩展只跑在用户机器上没有服务器接收支付回调。第一座山是校验——Stripe 的支付链接和 webhook 验证都要后端配合没有后端你没法确认用户真的付了款。第二座山是订阅生命周期自动续费、扣款失败后的重试、催款邮件都需要一套计费系统。直接调 Stripe API意味着每个状态都得自己维护。第三座山是用户状态谁付过款、谁的试用到期、谁的卡刚刚失效这些状态要有地方存还要跨浏览器同步。ExtPay 的做法是把这三件事搬到云端。扩展端只调几个方法getUser 拿支付状态、openPaymentPage 打开支付页、getPlans 拿套餐列表省掉的是整个自建计费后端的工程量。 拿到项目后的前 10 分钟先克隆仓库git clone https://gitcode.com/gh_mirrors/ex/ExtPay仓库里有两个示例扩展sample-extension-mv3/ 和 sample-extension-mv2/。新项目选 MV3你的扩展还停在 MV2 就直接用 MV2 那份两者的接入方式几乎一致。接着做三件事先在 ExtensionPay 注册你的扩展拿到一个扩展 ID再把 background.js、popup.js、content.js 三个文件里的占位符 sample-extension 换成你自己的 ID最后打开浏览器扩展开发者页面开启开发者模式用加载已解压的扩展选中示例目录。manifest.json 里注意两处加 storage 权限Firefox 还要给 extensionpay.com 域加 host 权限自定义了 CSP 的话补一条 connect-src。 用户从点订阅到付款成功的全链路用户视角一共四步开发者一页都不用搭。第一步扩展调用 openPaymentPage 打开新标签页的选套餐页面。套餐数据来自 getPlans字段包含价格美分、币种和计费周期月、年、一次性。第二步用户点套餐后跳转 Stripe 结账页填卡成功后生成一条 Stripe 订阅记录。第三步结账页下方有 Add promotion code 入口用户输入折扣码页面自动算出折后价。第四步付款成功后用户看到订阅管理页可以换卡或取消订阅。扩展端用 getUser() 里的 user.paid 判断是否放开付费功能也可以注册 onPaid 回调在付款瞬间执行自己的逻辑。MV3 有个坑service worker 的回调里全局 extpay 实例会变成 undefined要在回调里重新用 ExtPay(你的ID) 实例化startBackground 只调一次。 让免费用户付费的三件套免费试用。它省掉自建邮件确认和试用状态存储的活。浏览器扩展免费试用的流程是openTrialPage 打开试用页用户填邮箱收到确认链接点链接后试用才正式开始。平台只记录 trialStartedAt时长由扩展自己判断——7 天试用就对比 trialStartedAt 与当前时间的差值。传 7-day 这样的参数用户提交前就能看清试用周期。优惠券。扩展优惠券在 Stripe 后台创建支持固定金额和百分比两种类型扩展端不用写折扣计算代码结账时由 Stripe 自动算好折后价。关键是创建时勾上 Use customer-facing coupon codes才会生成可发给用户的短码详见 docs/discount_code_guide.md。促销策略。定价结构本身就是策略月费 $10 加年费 $99 的组合让年付显得更划算引导用户选年付。折扣码走邮件等渠道发放再配一条试用到期提醒就能拼出试用 → 折扣码 → 首单的转化路径。⚙️ Stripe 后台与失败支付必配项连上 Stripe 账号后对照检查这几项支付方式设置里能开的尽量都开别漏掉用户本来能完成的支付。3D Secure保持开启不要为了通过率关掉。失败支付重试Stripe 默认会再尝试扣款几次后才把订阅标记为取消重试策略可按业务调整。邮件通知打开 Send emails when card payments fail卡失效时由 Stripe 发邮件提醒用户换卡。状态映射扣款失败后订阅进入 past_duepaid 变为 false扩展要识别这个状态并提示用户更新卡细节见 docs/how_subscriptions_work.md。✅ 上线前的自测路线开发模式下订阅管理页会换成开发者控制台可以模拟各种订阅状态、重置试用。测试支付需要输入你的账号密码用 Stripe 测试卡就能把整条流程走通。自检项用测试卡支付一次确认 user.paid 变 trueonPaid 回调触发。用邮箱发起试用确认 trialStartedAt 有值到期时间与预期一致。模拟一次扣款失败确认扩展弹出更新卡片的提示。取消订阅确认周期内 paid 仍为 true 且 subscriptionCancelAt 有值周期结束后变 false。换一个浏览器通过登录页用邮箱找回付费状态。从个人小项目到商业扩展ExtPay 是一个基于 Stripe、不需要自建服务器的浏览器扩展支付库。个人小项目拿它收月费商业扩展跑在它上面接入方式不随规模变化。下一步把你的扩展 ID 填进 MV3 示例加载运行用测试卡跑一遍试用 → 订阅 → 取消的完整循环再把它换成你自己的功能。【免费下载链接】ExtPayThe JavaScript library for ExtensionPay.com — payments for your browser extensions, no server needed.项目地址: https://gitcode.com/gh_mirrors/ex/ExtPay创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表