Mollie Checkout 托管结算页详解 - 转化率优化与自定义选项
Checkout 是什么
Mollie Checkout 是 Mollie 服务器上托管的支付页面。当你的客户从购物车跳转到付款环节时,你把他们重定向到 Mollie Checkout 的 URL,由 Mollie 负责:
- 展示你启用的所有支付方式(自动带 Logo 和中文本地化)
- 处理每种支付方式对应的表单(卡类 → 卡号输入,iDEAL → 银行选择,SEPA → 授权确认)
- 完成 3DS 验证(如果需要)
- 处理支付结果并回调
- 重定向客户回你的网站
标准流程
你的网站 Mollie 服务器 支付方式
│ │ │
│── POST /payments │ │
│ │ │
│ 返回 checkout_url│ │
│ │ │
│── 302 重定向 ──▶│ │
│ │── 渲染结算页 ──▶ │
│ │ │
│ │ 客户选择支付方式 │
│ │── 调用支付方式 ──────▶ │
│ │ │
│ │◀── 支付成功/失败 ──── │
│ │ │
│◀── 302 重定向 ──│(回到你的 redirectUrl) │
│ │ │
│◀── Webhook POST │(payment.paid 事件) │
为什么推荐用 Checkout
PCI 合规成本最低
如果你自己处理卡号输入,需要满足 PCI DSS 合规要求——这套流程对小商家和创业团队来说成本很高。用 Checkout,卡号数据直接流向 Mollie 服务器,你的系统完全不触碰敏感支付数据,PCI 合规责任全在 Mollie 那边。
支付方式展示零代码
你不需要为每种支付方式单独写前端组件。Mollie 在 Dashboard 里勾选启用哪些方式,Checkout 就自动渲染对应的 Logo、按钮和表单。新增加一种支付方式时,你只需要在 Dashboard 里点一下"启用"——结算页立即生效。
3DS 自动处理
对于卡类支付,3DS 验证是强制定的(欧洲 SCA 法规)。Mollie Checkout 自动判断哪些卡需要 3DS、处理跳转、解析结果、把最终状态传给你。你只需要等待 payment.paid 事件。
移动端原生体验
Checkout 页面针对手机做了专门优化——大按钮、清晰的支付方式列表、自动弹出 iOS/Android 的原生 Apple Pay / Google Pay 弹窗。
自定义能力
Checkout 不是"完全黑盒",你可以在几个方面定制:
结算页语言
Checkout 会根据浏览器语言自动切换。也可以在创建 Payment 时手动指定:
{
"locale": "nl_NL",
"description": "Order #12345",
"redirectUrl": "...",
"amount": { "currency": "EUR", "value": "29.99" }
}
支持的 locale:en_US、nl_NL、nl_BE、fr_FR、fr_BE、de_DE、de_AT、de_CH、es_ES、ca_ES、pt_PT、it_IT、sv_SE、nb_NO、fi_FI、da_DK、is_IS、hu_HU、pl_PL、lv_LV、lt_LT、en_GB
支付方式排序
在 Dashboard → 支付方式页面,可以拖拽调整顺序。排在最前面的会在 Checkout 里优先展示。对于荷兰市场,把 iDEAL 放在第一位通常能提升转化率。
特定方式限制
你可以针对特定 Payment 启用或排除某些方式:
{
"amount": { "currency": "EUR", "value": "5000.00" },
"methods": ["creditcard", "ideal", "paypal"],
"description": "Bulk order #99999"
}
上例中,€5000 的大额订单只允许卡类、iDEAL 和 PayPal——排除了 SEPA 等小额常用方式。
结算页背景图和 Logo(Mollie Checkout Pro)
如果你使用 Mollie Checkout Pro(通过 Dashboard 升级),可以上传:
- 结算页头部 Logo
- 结算页背景图
- 主色调
这样 Checkout 会更接近你的品牌风格。Pro 版本免费,在 Dashboard 设置里开启即可。
转化优化建议
1. 默认显示最主流的本地方式
Mollie Checkout 默认显示所有启用的支付方式,排在最前面的通常获得最多点击。分析你的订单数据,找到目标市场里转化率最高的几种方式,把它们拖到最上面。
2. 卡类支付优先
Visa/Mastercard 是全球通吃的。把卡类放在靠前位置能抓住犹豫的"不知道选什么"的买家。
3. Klarna 适合高价商品
单价较高(>€100)或时尚品类的商品,Klarna 的转化提升效果最明显。
4. 缩短结算页步骤
Mollie Checkout 已经是单页面了——客户进来、选方式、付款、完成。确保你的网站在跳转到 Checkout 之前已经收集了足够的信息(收件地址、联系方式等),不要让客户在 Mollie 这边再填一遍。
替代方案:Mollie Components
如果你想要部分控制但不想完全自己写,可以用 Mollie Components——这是一组轻量级 JavaScript 组件,可以嵌入到你自己的结算页里,只处理卡号/3DS 等敏感部分,非敏感部分(地址、备注等)还是你自己写。
Components 的技术栈:
- JavaScript + CSS(无需框架依赖,原生可用)
- React / Vue 封装组件可用
- 自动遵循 PCI DSS SAQ A 标准
继续阅读:自定义 API 集成(开发者向) →