出海技术栈集成教程（三）：Stripe支付配置与开发

程普
612 阅读4分钟

我开发了 next.js saas 模板 Nexty.dev，很多用户告诉我文档太详细了，于是我决定把出海技术栈、海外第三方服务集成的文档发出来，希望帮到更多出海的朋友。👉 原文链接

本系列分享的内容包含：

Stripe 是目前最稳定也是最热门的全球支付处理平台，它简化了全球业务的支付流程，让 SaaS 产品能够轻松接受各种支付方式。

本章我们将介绍如何集成 Stripe 到你的 SaaS 产品。

注册与基础配置

  1. 访问 Stripe，注册账号

  2. 进入 Dashboard 页面，从左上角开始创建账户，然后根据页面指引完成前置步骤。

获取 API Key 和创建 Webhook

  1. 注册完成后，在开发阶段应该进入 Sandbox 模式，直到所有流程调试完成后，再把产品等信息复制到 Live 模式。

sandbox.png

  1. 进入 Developer - API Keys 页面，把 Secret key 和 Publishable key 分别复制到环境变量的 STRIPE_SECRET_KEY 和 STRIPE_PUBLISHABLE_KEY 中。

api-keys.png

  1. 进入 Developer - Webhooks 页面，创建 Webhook 端点。

webhook-1.png

  1. 在 Cursor 或者 VSCode 中，设置一个 Forward Port，并且设置为 Public，然后复制生成的 Forwarded Address。

webhook-2.png

提示：

  • 有时候长时间没有使用，Forward Port 虽然还是打开的，但实际上已经失效，这时候重新设置一下即可，这样不会改变 Forwarded Address。
  1. 把 Forwarded Address 复制到 Webhook Endpoint URL，然后点击 Select events 选择需要的事件。

webhook-3.png

  1. 选择以下7种事件：
  • charge.refunded
  • checkout.session.completed
  • customer.subscription.created
  • customer.subscription.updated
  • customer.subscription.deleted
  • invoice.paid
  • invoice.payment_failed

有了这些事件就足够完成一套稳健的一次性支付和周期订阅的支付流程，并且这些事件在 Nexty.dev 模板都有对应的处理逻辑。

webhook-4.png

  1. Webhook 创建完成后，获取 Secret，并复制到环境变量的 STRIPE_WEBHOOK_SECRET 中。

webhook-5.png

创建产品

现在来到 Product Catelog 页面，创建一个产品。

add-product.png

以下是 Nexty.dev 产品填写的内容，可以参考。

product-preview-1.png

product-preview-2.png

创建完成后，点击产品，进入详情页

product-details转存失败，建议直接上传图片文件

可以看到 Product ID 和 Price ID。后续步骤，我们会在管理员后台定价计划中用到这两个 ID。

product-id转存失败，建议直接上传图片文件

你可以按照同样的步骤创建订阅产品。

打开 Radar

Stripe 有一个 Radar 功能，这个功能可以自定义规则，来识别和拦截高风险的支付，以保障你的账号安全。

block-rules.png

不过这是一个收费功能，在 Sandbox 里可以免费使用。

如果你的 Live 模式开启了 Radar 功能，那么可以添加以下 rules：

一周内创建的新用户使用超过5张卡
:card_count_for_customer_weekly: > 5 and :hours_since_customer_was_created: <= 168

一周内同一客户使用超过4张信用卡
:card_count_for_customer_weekly: > 4 and :card_funding: = 'credit'

一周尝试高风险卡数量大于3
:card_count_for_customer_weekly: > 3 and :risk_score: > 50

一天同一IP地址进行大量高风险尝试
:total_charges_per_ip_address_daily: > 10 and :risk_score: > 40

限制用户同时段订阅数

如果你的产品有订阅制，且希望限制用户同时段的订阅数量只能有1个，那么可以在 Payments 模块进行设置

limit-customers-to-1-subscription-1.png

limit-customers-to-1-subscription-2.png

limit-customers-to-1-subscription-3.png

这样设置也可以防止用户重复订阅，造成争议订单的出现。限制出现争议订单，即使申诉成功，依然会扣除 $15 的手续费。

管理支付方式

在 Settings - Payment Methods 页面，可以管理用户的支付方式。建议申请开通支付宝和微信支付，这样可以让更多用户使用你的产品，特别是中国地区的用户。

alipay-wechatpay.png

申请开通支付宝和微信支付，Stripe 可能会通过邮件要求提交补充材料，按照邮件提示提供即可，这些材料是支付宝和微信支付要求的，也需要等支付宝和微信支付审核通过后，Stripe 才会为你正式开通。

不过，这里开通的权限仅支持一次性付款，不支持订阅产品，如果你希望你的订阅产品也能开通支付宝和微信支付，还需要联系 Stripe 客服单独填表申请。

设置用户 Portal

用户 Portal 是用户可以查看和修改自己的支付方式、订阅状态、账单等信息的页面，在产品里提供 Protal 的入口，可以增加用户的信任感。

user-portal.png

Live 模式

在 Sanbox 模式下完成支付流程调试后，你可以直接把创建的产品一键复制到 Live 模式。其他步骤则需要你手动完成，你可以把这里介绍的步骤当做 Checklist。

总结

出海技术栈集成系列文章会同步发布到我的掘金专栏，欢迎订阅关注。

同时也欢迎出海的朋友了解 Top3 的出海 Next.js SaaS 模板 Nexty.dev。

avatar
文章
阅读
粉丝