ExtensionPay.js核心功能解析：getUser()与openPaymentPage()使用教程

ExtensionPay.js核心功能解析：getUser()与openPaymentPage()使用教程

【免费下载链接】ExtPayThe JavaScript library for ExtensionPay.com — payments for your browser extensions, no server needed.项目地址: https://gitcode.com/gh_mirrors/ex/ExtPay

ExtensionPay.js是一款专为浏览器扩展开发者设计的JavaScript库，它能帮助开发者轻松实现扩展内支付功能，无需搭建后端服务器。本文将详细解析其两个核心功能——getUser()和openPaymentPage()的使用方法，让你快速掌握浏览器扩展收款方案。

快速了解ExtensionPay.js

ExtensionPay.js通过简化支付流程，让开发者可以专注于扩展功能开发。它提供了用户认证、支付状态查询和支付页面管理等核心能力，支持Chrome、Firefox等主流浏览器，是开源项目中实现扩展 monetization 的理想选择。

核心功能概览

• 用户状态管理：通过getUser()获取用户订阅状态
• 支付流程处理：通过openPaymentPage()打开支付页面
• 自动订阅验证：无需服务器即可验证用户支付状态

功能一：getUser() - 用户状态查询

getUser()方法是ExtensionPay.js最基础也最常用的功能，它能获取当前用户的支付状态和订阅信息。

基本使用方法

// 初始化ExtensionPay实例 const extpay = ExtPay('your-extension-id') // 获取用户信息 extpay.getUser().then(user => { if (user.paid) { console.log('用户已付费！🎉') // 显示付费功能 } else { console.log('用户未付费') // 显示付费提示 } }).catch(err => { console.error('获取用户信息失败:', err) })

返回结果解析

getUser()返回的用户对象包含以下关键信息：

• paid: 布尔值，表示用户是否已付费
• paidAt: 日期对象，用户付费时间
• installedAt: 日期对象，扩展安装时间
• trialStartedAt: 日期对象，试用开始时间（如适用）

实际应用场景

在扩展popup页面中，我们可以根据用户付费状态动态展示不同内容：

// sample-extension-mv3/popup.js extpay.getUser().then(user => { if (user.paid) { document.querySelector('p').innerHTML = 'User has paid! 🎉' document.querySelector('button').remove() // 移除付费按钮 } })

功能二：openPaymentPage() - 打开支付页面

openPaymentPage()方法用于打开ExtensionPay的支付页面，引导用户完成支付流程。

基本使用方法

// 绑定按钮点击事件 document.querySelector('button').addEventListener('click', function(evt) { evt.preventDefault(); extpay.openPaymentPage(); // 打开支付页面 })

带参数的使用方式

你还可以指定特定套餐，直接打开对应套餐的支付页面：

// 打开指定套餐的支付页面 extpay.openPaymentPage('premium-monthly');

支付页面展示

ExtensionPay支付页面展示，支持多种支付方式和套餐选择

完整集成示例

下面是一个完整的ExtensionPay.js集成示例，包含初始化、用户状态检查和支付流程：

// 1. 初始化ExtensionPay实例（替换为你的扩展ID） const extpay = ExtPay('sample-extension') // 2. 页面加载时检查用户状态 document.addEventListener('DOMContentLoaded', function() { checkUserStatus(); setupPaymentButton(); }); // 3. 检查用户状态 function checkUserStatus() { extpay.getUser().then(user => { if (user.paid) { showPremiumFeatures(); } else { showFreeFeatures(); } }).catch(err => { console.error('获取用户信息失败:', err); document.querySelector('.status').textContent = '连接服务器失败，请稍后重试'; }); } // 4. 设置支付按钮 function setupPaymentButton() { document.querySelector('#pay-button').addEventListener('click', function() { extpay.openPaymentPage(); }); } // 5. 显示付费功能 function showPremiumFeatures() { document.querySelector('.premium-content').style.display = 'block'; document.querySelector('.free-content').style.display = 'none'; } // 6. 显示免费功能 function showFreeFeatures() { document.querySelector('.premium-content').style.display = 'none'; document.querySelector('.free-content').style.display = 'block'; }

套餐选择与管理

ExtensionPay支持多种套餐类型，开发者可以在ExtensionPay后台配置不同的价格方案。用户将看到如下的套餐选择界面：

用户可以根据需求选择适合的订阅套餐

高级应用：支付状态监听

除了主动查询用户状态，你还可以使用onPaid监听器实时监听支付事件：

extpay.onPaid.addListener(function(user) { console.log('用户刚刚完成支付!', user); // 立即解锁付费功能 showPremiumFeatures(); });

常见问题解决

1. 如何获取扩展ID？

扩展ID需要在ExtensionPay官网注册获取，注册后在控制台中可以找到你的扩展ID。

2. 支付后用户状态不更新怎么办？

ExtensionPay会自动处理支付状态更新，通常在支付完成后几秒钟内生效。如果遇到延迟，可以调用extpay.getUser()手动刷新用户状态。

3. 支持哪些浏览器？

ExtensionPay支持Chrome、Firefox、Edge等基于Chromium的浏览器，以及Safari浏览器。

总结

ExtensionPay.js通过getUser()和openPaymentPage()两个核心方法，为浏览器扩展开发者提供了简单而强大的支付解决方案。它消除了搭建后端服务器的复杂性，让开发者可以轻松实现扩展的 monetization。

如果你正在开发浏览器扩展并需要添加支付功能，不妨尝试使用ExtensionPay.js，它将帮助你快速实现专业的支付体验。

要开始使用ExtensionPay.js，只需将仓库克隆到本地：

git clone https://gitcode.com/gh_mirrors/ex/ExtPay

然后参考sample-extension-mv3目录中的示例代码，快速集成到你的扩展项目中。

【免费下载链接】ExtPayThe JavaScript library for ExtensionPay.com — payments for your browser extensions, no server needed.项目地址: https://gitcode.com/gh_mirrors/ex/ExtPay