14. 三方支付的接入

在上一章讲了有关支付的底层表结构设计，那么这一章我们就来接入三方支付。

在海外的支付收款生态中，Paypal是一个绕不开很重要的部分，我通常打款也是两种方式一种是Credit Card，一种是Paypal。相对各种复杂的支付渠道来说，Paypal的个人号的门槛是最低的，可以直接收钱+循环扣款的，在注册PayPal后我们只需要找一个支付网关将其接入。

那么在进一步支付网关中门槛比较低的是Upgrade.chat，它什么都不需要，只需要你有个Paypal个人户，绑定它的网关就可以支付了。

并且因为相当于是Paypal来进行循环扣款，它的订阅扣款失败率是很低的。

本章Tag

Upgrade.chat API与配置

在注册绑定Paypal后，先创建商品，我创建了2个One-Time和一个Subscription的商品。

紧接着添加商品的嵌入代码，其实在这一步已经可以付钱了，点开这个链接会跳出他们的支付方式，紧接着点PayPal来进行支付

但我们要进行开发得先创建一个API Key

紧接着看看他们提供了哪些API，大部分都是很常规的GET查询类接口（可能他们觉得太简单了，我也没找到详细解释的API）：

接下来我们创建一个Webhook来接收支付成功的通知。

完成业务逻辑

前端

在layout中添加他们的Script

<head>
  <script src="https://upgrade.chat/embed/embed.js" defer />
</head>
```

在`pricing`页面中添加2个刚刚添加的商品支付嵌入代码（他的本质其实嵌入Iframe）

```typescript
'use client'

export default function PricingPage() {
  return (
    <div className="flex gap-4">
      <div
        className="h-96 w-80"
        data-upgrade-chat-embed="2d7ea31d-bcb0-4062-b476-327bd6d7a8d6"
        data-upgrade-chat-products="be66b10a-69dd-42f0-bf0d-97083b46344e"
        data-upgrade-chat-baseurl="https://upgrade.chat"
      />
      <div
        className="h-96 w-80"
        data-upgrade-chat-embed="2d7ea31d-bcb0-4062-b476-327bd6d7a8d6"
        data-upgrade-chat-products="62312764-a2ce-4e71-b585-0eefc55ec27d"
        data-upgrade-chat-baseurl="https://upgrade.chat"
      />
      <div
        data-upgrade-chat-embed="2d7ea31d-bcb0-4062-b476-327bd6d7a8d6"
        data-upgrade-chat-products="3eea989a-9e7a-454f-bcb6-909fd92b8759"
        data-upgrade-chat-baseurl="https://upgrade.chat"
      />
    </div>
  )
}
```

在页面上的展示

![](https://ik.imagekit.io/ixou4q6nu/embed-success.png?updatedAt=1752399689115)

但其实它的本质是`Iframe`,我在后续改良了一下。

```typescript
'use client'

function UpgradeChat({ products }: { products: string }) {
  const toUpgradeChat = () => {
    let src = `https://upgrade.chat/view-embed/2d7ea31d-bcb0-4062-b476-327bd6d7a8d6`
    const queryParams = [`embedder_url=${encodeURIComponent(window.location.href)}`]
    if (products) {
      for (const product of products.split(',')) {
        queryParams.push(`productId=${product}`)
      }
    }
    if (queryParams.length > 0) {
      src += `?${queryParams.join('&')}`
    }

    const width = 350
    const height =

Upgrade.chat API与配置

完成业务逻辑

前端

订阅后解锁完整文章