回到所有的课程
课程库

使网络支付

在您的电子商务商店上启用Web支付并自定义Web支付按钮。

这个视频的特点是一个旧的UI。更新版本即将发布!

Web支付,如Apple Pay和谷歌Pay,允许你的顾客通过使用他们的数字钱包跳过默认的结账过程,快速结账离开你的商店。

如果您为您的站点启用了Web Payment,那么您的商店的购物车和结帐页面将在支持的浏览器上自动显示相关的Web Payment按钮。还可以从add面板手动将Web支付组件添加到购物车或结帐页面。

在这节课中
  1. 使网络支付
  2. 样式网页支付按钮
  3. 了解客户如何使用Web Payments支付

使网络支付

默认情况下,所有结帐页面都启用了Web支付。通过从页面中删除Web Payments元素,可以禁用此支付方法。

你可能需要将你的网站发布到你的自定义域来验证你的Apple pay域。

您也可以在您的电子商务支付设置中手动启用或禁用Web支付(设置→电子商务→支付→条纹→Web支付),但首先,您必须:

  1. 连接您的Stripe账户
  2. 添加电子商务网站计划并启用结帐

样式网页支付按钮

如果你启用了Web支付,你会在购物车中看到默认的“Apple pay”按钮。然后,一旦你选择了按钮,你就可以从“网络支付设置的章节。元素设置面板

还可以从add面板将Web Payments元素添加到结帐表单或购物车中。

预览Web Payment选项并自定义它们。

现在,您可以在Web Payments Settings中选择每个选项来预览和定制每个按钮。

需要知道
你不能对“Apple Pay”按钮进行太多的定制,这是因为“Apple Pay”按钮必须遵循《Apple Pay》中描述的品牌和用户界面指南Apple Pay身份识别指南[xxx]而且人机界面指南[xxx]

你还可以自定义你的网页支付按钮的外观和感觉,甚至在你启用之前网络支付为您的现场网站。在本例中,要访问支付按钮,您需要在Navigator中选择“Web Payments”包装器。然后,你就能进入"网络支付设置的章节。元素设置面板

访问购物车中的Web付款设置
选择画布上的“Continue to checkout”按钮,那么它将更容易被发现 网络支付 的包装器,它是“ 结帐按钮”

结帐页面中的Web付款

网络支付也存在于结帐页面.所以,不要忘记在那里定制它们。如果您已经从付款页面中删除了Web Payments组件,那么您可以从add面板中将其添加回来。

了解更多:定制结帐体验

了解客户如何使用Web Payments支付

Web支付选项只对在支持的浏览器上访问您的商店的购物者可见,在浏览器中他们存储了可用的支付方法。因此,客户可采用的具体支付方式取决于他们使用的浏览器和设备。

可以看到Web支付的购物者可以通过点击Web支付按钮并通过Touch ID、PIN或密码授权交易,从而绕过您站点的本地结账过程。如果购物者也存储了他们的账单和运输信息,Web payment可以减少结帐的摩擦,特别是在移动设备上。

苹果支付

Apple Pay适用于那些在iPhone、iPad或Apple Watch上存储了支付细节(信用卡或借记卡)的消费者。Apple Pay还支持iPhone、iPad或Mac OS上Safari上的Web支付。

资源:

用浏览器

谷歌Pay和Microsoft Pay适用于在Android和Windows设备上存储了支付和发货细节的用户。谷歌Pay也适用于Chrome桌面和安卓系统,但不适用于iOS系统。微软支付也适用于通过微软Edge浏览器访问的网站。

资源:

需要知道
目前,Firefox和其他移动浏览器不支持Web支付。随着这些浏览器开始支持Web支付,将提供更多的支付方式。

Web付款结帐过程

如上所述,选择使用web支付方式支付订单,绕过了商店的本地结账流程。启动一个浏览器本地结帐过程来完成购买。此窗口显示订单摘要和应用的运输费率。如果消费者的账户中有多张卡,他们可能需要选择一种支付方式。计费和运输细节也是如此。然后,他们可以授权支付和订单将被下。他们会被带到你的商店的“订单确认页面”,并收到一封确认订单的电子邮件。

注意:由于网络支付绕过了你的商店的本地结账过程,你将无法在结账时收集额外的信息

重要提示:你不能使用浏览器的本地UI定制web支付结帐体验。

Web支付和SCA遵从性

如果你的网上商店在欧洲经济区(EEA) [xxx]在美国,任何来自欧洲经济区国家的客户都将被要求提供额外的身份验证层,以确认购买的付款。刷卡等支付方式苹果支付(↗)而且谷歌支付(↗)已经有一个内置的认证层,为在线买家提供了无摩擦的结账体验,同时也符合新的PSD2 SCA要求[xxx]

尝试Webflow——它是免费的
Baidu
map