README

Craft Commerce 的 Web Payments

使用 Web Payments API 和 Apply & Google Pay 大幅改善您的结账过程！

使用说明

设置

安装插件后

创建一个 Stripe 支付网关。
在插件选项中选择该网关。
在 Stripe 和 Apple Pay 中注册您的域名（只需在此处添加您的域名此处）。
使用以下模板标签在任何位置输出按钮。
???
盈利。

`{{ craft.webPayments.button(options) }}`

将此 twig 放置在您希望支付按钮出现的位置。

选项

将一个 twig 对象作为唯一参数传递以配置按钮。

`items`

要购买的项目数组。使用此或 cart。

`items[x].id`

可购买项目的 ID。

`items[x].qty`

购买数量。

`cart`

Craft Commerce 订单（即当前购物车）。使用此或 items。

`requestShipping`

一个布尔值或字符串。如果为 true，则需要收货地址。也可以设置为以下之一： 'shipping'，'delivery'，'pickup'，true，false（默认）。这将还会更改 UI 对产品配送的称呼。例如，在讲英语的国家，你会说“比萨配送”而不是“比萨配送”。将此设置为 true 将默认为“配送”。

`requestDetails`

要请求的附加详细信息数组。可以是以下之一： name，email（email 总是收集，因此您不需要添加它），phone。

`onComplete`

在支付完成后触发事件的对象。

`onComplete.redirect`

支付完成后重定向到的 URL。可以包含 {number}，这将输出订单编号。

`onComplete.js`

支付完成后将执行的 JavaScript。可以访问 cwp 对象。目前这只有 cwp.number（订单编号）。

`js`

按钮将在 JS 中设置的变量。如果您想动态更新虚拟购物车中的项目，这很有用。

`style`

自定义按钮的外观

{
    type: 'default' | 'donate' | 'buy', // default: 'default'
    theme: 'dark' | 'light' | 'light-outline', // default: 'dark'
    height: '64px', // default: '40px', the width is always '100%'
}

示例

{{ craft.webPayments.button({
    items: [
        { 
            id: product.defaultVariant.id, 
            qty: 1,
            options: {
                giftWrapped: 'yes',
            },
         },
    ],
    requestShipping: 'delivery',
    js: 'window.pay_item_' ~ product.id,
}) }}

{{ craft.webPayments.button({
    cart: craft.commerce.carts.cart,
    requestDetails: ['name', 'phone'],
    onComplete: {
        redirect: '/thanks?number={number}',
        js: 'window.paymentCompleted(cwp.number);',
    },
}) }}

动态更新

您可以通过 JS 动态更新按钮。

使用 js 选项定义要绑定到按钮的变量

{{ craft.webPayments.button({
    items: [{ id: 1, qty: 1 }],
    js: 'window.payButton',
}) }}

然后您可以获取当前项目并更新它们

const items = [ ...window.payButton.items ];
items[0].options = { giftWrapped: 'yes' };
window.payButton.items = items;

您不能直接更新项目（例如 window.payButton.items[0].id = 2）。项目是不可变的，因此如果要更新它们，必须将它们设置为新的数组。在上面，我们在修改之前将现有的项目克隆到一个新的数组中。

如果您传入了一个购物车，您可以简单地调用 refresh() 以更新按钮的最新购物车内容。

window.payButton.refresh();

请注意，您不能在支付对话框活动时更新按钮。

如果您需要重新加载按钮（例如，如果 DOM 已更改），您可以使用 reload() 函数。

window.payButton = window.payButton.reload();

reload() 将返回一个新的按钮实例，因此您希望用那个新实例替换现有的变量。

待办事项

当使用购物车时，实际上使用购物车来保持字段/选项的持久性
- 移除购物车选项（如果未设置项目，则使用活动购物车）
- 移除清空购物车选项
使用项目时支持行项目选项
在支付完成事件时（例如，清空活动购物车，跳转到感谢页面）
JS钩子用于更新项目（如果未使用 commerce 购物车）
JS钩子用于刷新购物车数据（如果使用 commerce 购物车）
选择使用默认的 Apple / Google Pay 按钮（而不是 Stripe 的按钮）
使用 Stripe 的账单地址（不要设置账单地址为配送地址）
使配送地址为可选
设置
- 选择 Stripe 网关
- 按钮配置默认值
- 映射请求详情（名称、电话）到订单字段
编写设置说明
浏览器测试 JS
使用 Commerce Lite 测试
添加标志到订单，标记此订单是通过网络支付完成的
添加订阅支持

ether / web-payments

维护者

详细信息