Stripe Elements

如何通过 Stripe Elements 收取银行卡付款

使用 Stripe Elements 在你的预订页面上收取银行卡付款。

国家

  • 阿拉伯联合酋长国
  • 爱尔兰
  • 爱沙尼亚
  • 奥地利
  • 澳大利亚

货币

  • AED
  • AFN
  • ALL
  • AMD
  • ANG
  • AOA
  • ARS
文档联系我们
API 凭据
  • API 密钥
  • 可发布密钥
  • Webhook 密钥

Stripe Elements 会把 Stripe 的银行卡输入框放到你的预订页面上,旅客无需离开页面即可用银行卡付款。你需要一个能收取真实付款的 Stripe 账户:Stripe 指南介绍了如何开设。

从 Stripe 复制你的密钥


  1. 1

    在正式模式下打开 API 密钥

    打开 dashboard.stripe.com/apikeys,确认你处于正式模式,而不是沙盒中。测试密钥不会报错:它会用并不存在的钱把预订标记为已付款。

  2. 2

    复制可发布密钥

    在 Standard keys 下,复制 Publishable key。它以 pk_live_ 开头。

  3. 3

    复制密钥

    复制 Secret key(如果它被隐藏,请点击 Reveal live key)。它以 sk_live_ 开头。请妥善保密:它能以你的名义从银行卡扣款。

在 Stripe 中添加 Webhook


Webhook 负责把预订标记为已付款

没有它,旅客会被扣款,但预订会一直未确认。

你用于 Stripe Elements 的 TourTask Webhook 地址

https://api.tourtask.com/v1/payments/stripe-elements/notifications/booking
  1. 1

    创建事件目标

    仍在正式模式下,打开 dashboard.stripe.com/webhooks,点击 Create an event destination。

  2. 2

    选择你的账户和 Snapshot

    选择 Your account 和 Snapshot 负载格式:TourTask 无法读取 Stripe 推荐的 Thin 事件。

  3. 3

    选择事件

    选择 payment_intent.succeeded,不要选择其他事件。

  4. 4

    选择 Webhook 端点

    点击 Continue,选择 Webhook endpoint 作为目标类型。

  5. 5

    输入 TourTask 地址

    点击 Continue,把上面的 TourTask 地址粘贴到 Endpoint URL,然后点击 Create destination。

  6. 6

    复制签名密钥

    在该目标的页面上点击 Reveal secret,复制签名密钥。它以 whsec_ 开头。

每个网关各用一个端点

已经为 Stripe 网关设置了端点?仍然要再添加一个:每个网关都需要自己的端点。

在 TourTask 中添加 Stripe Elements


  1. 1

    打开 Stripe Elements 卡片

    前往 配置 → 付款方式,在 网上支付 → 支付网关 下点击 Stripe Elements 卡片。找不到?在卡片下方选择 显示所有网关。

  2. 2

    选择国家和货币

    在 国家 中选择你的 Stripe Elements 账户及其银行账户所在的国家,在 货币 中选择旅客付款所用的货币,然后点击 添加。之后如要更改其中任何一项,请用 移除 移除 Stripe Elements 后重新添加。

  3. 3

    填写 API 凭据

    在 验证 下,卡片为每一项提供一个字段:
    API 密钥
    可发布密钥
    Webhook 密钥

    在字段外点击即可保存该字段。

  4. 4

    启用 Stripe Elements

    填写完所有字段后,点击 启用。卡片会变为 已启用,旅客即可在你的预订页面上使用 Stripe Elements 付款。每笔付款都直接进入你自己的 Stripe Elements 账户:TourTask 从不经手你的资金。

API 密钥:你的 sk_live_… 密钥
可发布密钥:你的 pk_live_… 密钥
Webhook 密钥:你的 whsec_… 签名密钥

默认展开(可选)

点击卡片上的默认展开,让银行卡表单在你的预订页面顶部以展开状态显示。

检查 Stripe Elements 是否正常工作


TourTask 没有 Stripe Elements 测试模式,而 Stripe 的条款禁止用真实银行卡进行测试付款。

  1. 1

    打开银行卡表单

    在你自己的预订页面上预订一个行程并选择银行卡付款:Stripe 的银行卡表单会出现。不付款直接关闭页面。

  2. 2

    取消测试预订

    在 TourTask 中打开该预订,点击取消预订。

  3. 3

    检查你的第一笔付款

    旅客用银行卡付款后,预订会显示为已付款,这笔付款也会出现在你的 Stripe Dashboard 中。

  4. 4

    检查 Webhook

    在 Stripe 中打开该目标的 Event deliveries 选项卡:payment_intent.succeeded 应显示为 Delivered。

已扣款,但 TourTask 中未显示已付款?

请在 Stripe 中检查 Webhook:正式模式、Snapshot 格式、payment_intent.succeeded 事件以及准确的地址。在 TourTask 中,Webhook 密钥必须填写这个端点的签名密钥。Stripe 中该目标的 Event deliveries 选项卡会显示每次失败的尝试。

添加 Apple Pay 和 Google Pay


Apple Pay 和 Google Pay 是各自独立的支付网关,设置方法与 Stripe Elements 相同,使用同样的两个密钥。每个网关都需要自己的 Webhook 端点和地址,该端点的签名密钥要填入对应网关的 Webhook 密钥。

Apple Pay

https://api.tourtask.com/v1/payments/apple-pay/notifications/booking

Google Pay

https://api.tourtask.com/v1/payments/google-pay/notifications/booking
在 Stripe 中登记你的网址

与银行卡表单不同,钱包按钮只在 Stripe 的 Settings → Payment method domains 下登记过的网址上显示。请登记旅客预订时用到的每个网址:你自己的网站、yourname.tourtask.com 和你的 TourTask 网站(yourname.tourtask.site 或其自有域名)。example.com 和 www.example.com 算作两条记录。

常见问题


不会。银行卡信息会直接从旅客的浏览器发送到 Stripe。

Stripe Elements 让旅客留在你的预订页面上;Stripe 则会把旅客转到 Stripe 自己的页面,付款后再返回。两者可以同时使用。

就是你在 Stripe Dashboard 的付款方式设置中开启的那些方式。银行卡默认开启。

不必。TourTask 会把预订总额换算成你为该网关选择的货币。

这个页面对你有帮助吗?