之前有一篇关于如何注册 PayPal 个人版,这篇我们来讨论如何将 PayPal 接入到自己的网站中,在此之前,我们介绍一下有哪些接入的方案。
PayPal 接入方式概览
静态支付
PayMe 支付链接
本质上是一个属于你的支付 URL 链接,类似于国内支付的商家码,可以直接让对方打开链接输入金额给你支付。
可以通过地址:www.paypal.com/paypalme/my… 直接进行权限申请
PayPal Button
通过设计自己的付款信息可以快速生成支付链接,快速集成到网站页面中。
可以通过地址:www.paypal.com/buttons 进行设置
静态支付的优点和缺点就很明显,优点就是继承速度非常快, PayMe 可以直接发给用户使用,Button 可以快速生成支付链接集成到自己的网站,进而快速验证需求。
同样缺点也非常明显,它因为没集成到自己的网站中,没办法收到 WebHook,所以没办法进行复杂的订单管理,比如说库存、会员权限等额外的功能。
此时就要介绍如何将 PayPal 通过 SDK 集成到自己的网站中了。
动态集成
这个方案也是目前90% 独立站开发者的首选方案,它不仅支持 PayPal 余额,还能自动根据用户地区显示 Venmo、SEPA 等本地支付方式。
也支持 WebHook,能够在网站后台管理自己的相关支付信息,所以能够对订单做一些复杂的业务处理逻辑。
文档地址:developer.paypal.com/studio/chec…
JS SDK 是前端引用,作为体验优化的,比起使用后端重定向流程
用户点击支付 -> 页面白屏/刷新 -> 浏览器跳转到 paypal.com -> 用户登录支付 -> 页面再次白屏/刷新 -> 跳回你的 yoursite.com/success。
他的流程更具有优势:
用户点击支付 -> 当前页面不动 -> 屏幕中间弹出一个 PayPal 浮层窗口 -> 用户在浮层里支付 -> 浮层关闭 -> 你的页面显示“成功”。
集成步骤
1. 准备工作
1.1 配置 Client ID 和 Sercet
登录 developer.paypal.com/dashboard/ 开发者后台,点击 Apps & Credentials 后点击 Create App
App 名称填写自己的项目名称,Type 选 Merchant即可。
生成 Client ID (给前端用) 和 Secret (给后端用)
生成后加到自己项目的配置文件中即可
PAYPAL_CLIENT_ID=你的ClientID PAYPAL_CLIENT_SECRET=你的Secret PAYPAL_MODE=sandbox
将来测试没问题后,切到 Live 环境重新创建一个 App,拿到生产环境的 Client ID 和 Sercet,把 PAYPAL_MODE 改成 live 就行。
1.2 配置测试账号
在开发者后台点击 Testing Tools,再点击 Sandbox Accounts 查看自己的测试账号,选择账号后面的··· 点击 View/Edit account 即可看到测试账号的账号密码信息
支付的时候用测试账号登录就行,不会不会真的扣自己账号的钱
2. 正式接入
使用 Claude Codex、 Codex 接入即可。有了 AI 后,这种开发已经完全不需要人力了。
3. 沙盒测试
3.1 配置Webhook
因为是本地调试阶段,所以需要用到Ngrok作为端口映射工具。我在曾经的文章中介绍过,感兴趣的朋友可以移步观看,在这里不多做赘述 mp.weixin.qq.com/s/WpzwEBUWx…
点击 Apps & Credentials ,选择自己的APP,将页面拖到最后,可以看到 Sandbox 的 Webhooks 配置。
点击Add Webhook 添加Webhook配置,选择用Ngrok代理的地址即可
配置成功后需要将 Webhook ID 复制到自己的项目中作为接收 Webhook 的凭据。
3.2 测试付款
点击付款按钮以后没回跳出弹窗,并提示登录
使用测试账号登录成功以后,就可以选择渠道支付进行支付了
最后可以在 PayPal 的工作台看到 Webhook 的执行结果
至此我们的对接就完成了。
踩过的坑
中国买家不能付款给中国卖家
由于 PayPal 的政策限制。如果你的 PayPal 账户注册地是中国,国内买家用借记卡或信用卡付款的时候是没办法付款的。
如果想要接入国内的客户,要么是需要国内的支付方式,要么是去注册香港或美国的 PayPal 账户。另外 Stripe 是支持国内支付宝和微信收款的,可以通过接入 Stripe 的方式去对接。
上线时配置切换
- 切换 Client ID: 从 Sandbox 换成 Live。
- 切换 API URL: 从
api-m.sandbox.paypal.com换成api-m.paypal.com。 - 重新配置 Webhook: Live 环境的 Webhook ID 和 Sandbox 是不一样的,需要在 Live App 里重新添加 URL。