Skip to main content
Stripe Checkout 元素把一个安全的支付表单直接放在落地页上。访客无需离开页面就能输入卡号完成付款，买家从第一次点击到下单都留在你的漏斗里。 支付由 Stripe 处理。卡片信息直接传给 Stripe，不会经过 LanderLab。

​
开始之前

先在 Integrations 中连接你的 Stripe 账户。结账页面靠这个连接处理支付，并加载你在 Stripe 中的商品和优惠券。

​
添加 Stripe Checkout 元素

  1. 在编辑器中打开页面。
  2. 在左侧边栏打开 Elements，找到 Conversion 分类。
  3. 把 Stripe Checkout 拖到画布上。
  4. 点击该元素，在右侧面板中打开它的设置。
画布上显示的是 Preview Mode 下的结账表单。你改设置时它会实时更新，所以你看到的就是访客会看到的。
落地页画布上的 Stripe Checkout 元素

​
Product

用 Source 设置决定商品信息的来源。 选择 Manual 时，你会得到这几个字段：
  • Name：显示在结账页顶部的商品名称
  • Description：名称下方的一行短说明，例如 Free shipping
  • Image：可选的商品缩略图
选择 Stripe product 时，打开 Product 下拉框搜索你的 Stripe 商品库。商品按 One-time 和 Recurring 分组。如果你刚在 Stripe 中添加了商品却找不到，点击 Refresh products。你仍然可以添加 Image，显示在商品名称旁边。
如果 Source 设为 Stripe product，就必须选一个商品。没有选商品时，结账在线上页面上无法工作。

​
Billing

对于手动商品，选择 One-time 表示单次付款，Recurring 表示订阅，然后设置 Price 并选择币种。对于 Stripe 商品，这些设置会隐藏，因为价格和计费类型由 Stripe 决定。

​
Adaptive Pricing

开启 Adaptive Pricing 后，价格会以访客的本地币种显示。汇率换算由 Stripe 完成，结账页还会显示币种切换，让买家在你的币种和他们的币种之间选择。最终扣款金额可能因汇率略有差异。

​
Quantity

设置订单的默认 Quantity。开启 Let customers change quantity 会显示数量选择器，然后设置买家可选的 Min 和 Max。结账页会显示小计和总计，并随数量变化更新。

​
Discount

优惠券和优惠码来自你的 Stripe 账户。先在 Stripe 中创建它们，如果列表里没有出现，点击 Refresh coupons。
如果 Discount 设为 Coupon，就必须选一张优惠券。没有选时，结账在线上页面上无法工作。

​
Shipping

开启 Collect shipping address 可以在结账时收集收货地址。表单会增加一个 Shipping information 区域，包含姓名、国家和地址字段。Billing info is same as shipping 复选框让买家不必重复输入地址。
  • Countries：保持 All countries，或只选择你发货的国家
  • Shipping Options：点击 Add shipping option 创建配送费率
每个配送选项包含：
  • Name，例如 Standard shipping 或 Express
  • Price，设为 0 即为包邮
  • Delivery estimate，配送天数的最小和最大范围
添加多个选项，买家就可以自己选择。所选的费率会计入订单总额。
带有收货地址和配送选项的结账表单

​
Checkout

  • Button Text：付款按钮的自定义文字。留空则使用 Stripe 默认文字，它会显示金额，比如 Pay $88.20
  • Language：结账表单的语言。Auto 跟随访客的浏览器语言
  • Theme：表单的视觉样式。Match Page 会与页面设计融为一体
  • Billing Address：收集买家的完整账单地址
  • Stripe Link：让买家用 Stripe Link 保存支付信息，下次结账更快
  • One purchase per visitor：防止同一访客重复付款，适合一次性报价

​
支付成功后

用 Action 设置决定支付成功后发生什么。 选择 Stay on page 时，你可以自己写 Confirmation Message。留空的话，买家会看到 Payment received, thank you!。

​
布局

和其他元素一样，你可以调整 Position（左、中、右对齐）、Dimensions（默认宽度为 360px）和 Spacing（margin 与 padding）。

​
发布前的检查

  1. 点击 Preview，用访客的视角检查结账流程。
  2. 确认价格、币种、折扣和运费总额。
  3. 确认画布上的结账元素下方没有警告。有警告就说明缺了必填的商品或优惠券。
  4. 发布页面。

​
常见问题

不必。把 Source 设为 Manual，在 LanderLab 中输入名称、价格和币种即可。只有当你希望在 Stripe 中管理价格和计费时，才需要 Stripe product。不论哪种方式，你的 Stripe 账户都必须已在 Integrations 中连接。
可以。在 Billing 下选择 Recurring，或从 Stripe 商品库中选一个周期性商品。
优惠券对每个买家自动生效。优惠码则显示一个输入框，要买家自己输入代码。
在下拉框中点击 Refresh products 或 Refresh coupons，从 Stripe 加载最新数据。
所有付款、退款和客户信息都在你的 Stripe 控制台中。