适用于: Web支付SDK|支付API|卡API|客户API
了解Square Web Payments SDK和在Web客户端中进行支付。
Web支付SDK是一个JavaScript浏览器客户端SDK,它提供了一种安全的支付卡输入方法以及其他安全的支付方法。
以下视频介绍了Web Payments SDK并演示了如何开始。要获得最佳观看体验,请将视频窗口扩展到所需大小或在YouTube上观看视频。有关详细概述,请参阅以下部分。
Web Payments SDK支持客户端实现客户端/服务器Square在线支付解决方案。SDK生成一个安全的一次性支付令牌,您的应用程序web客户端将其发送到后端,并在后端使用支付API将其作为支付进行处理。有关更多信息,请参阅接受付款.
后端是客户端/服务器Square支付解决方案的服务器部分,该解决方案使用支付令牌处理支付。Square提供了Payments API作为应用程序开发人员处理付款的后端解决方案。
- Web支付SDK不能与Internet Explorer 11一起使用。
- 网络支付SDK不会单独创建支付或客户。SDK必须与支付API和客户API.
- Chrome扩展不适用于Web Payments SDK。
- 在欧盟,不提供身份验证的付款将获得
卡片_拒绝_验证_要求
需要身份验证的事务出错。这个错误意味着卖方没有实施验证买方
以客户为中心的支付。有关更多信息,请参阅验证买家错误.
Web Payments SDK和支付接受后端服务的总体实现流程如下:
- 使用应用程序配置Web Payments SDK客户端库,以呈现付款方法表单并生成付款令牌。
- 配置支付API或其他后端服务以获取支付令牌并处理支付。
要查看应用程序web客户端的示例,请参阅Web支付SDK快速启动。要查看使用Web Payments SDK构建的受支持支付方法的其他示例,请参阅Web Payments SDK展示.
创建Web Payments SDK是为了简化与Web应用程序的集成并提供更好的性能。SDK具有以下优点:
细粒度配置-您只需要为应用程序接受的支付方法编写配置代码。每种支付方法都有自己的对象,这些对象具有适合该方法的配置选项。
基于承诺的模式-使用异步/等待模式代替早期支付库的回调模式。这种模式使您的应用程序能够用更少的代码以更合理的方式对事件做出反应。
自动本地化-SDK自动确定买方浏览器的语言环境。但是,您的应用程序可以通过设置配置选项来覆盖本地化。要使用应用程序设置区域设置,请使用setLocale()方法,并在应用程序创建新的付款对象实例。Web支付SDK支持以下语言:
- 英语(澳大利亚)
- 英语(加拿大)
- 英语(爱尔兰)
- 英语(英国)
- 英语(美国)
- 法语(加拿大)
- 法语(法国)
- 日本人
- 西班牙的
Web Payments SDK通过以下支持的支付方式生成支付令牌:信用卡、礼品卡、数字钱包、ACH银行转账、Afterpay和现金应用支付。
这些支付方法生成的支付令牌共享一种通用格式,并被支付API接受为源id
值。您为其中一个令牌编写的服务器端支付API代码可以无缝地用于所有其他方法。您可以为每种支付方式编写唯一的客户端逻辑,但在服务器上只需要一个支付流程。
您还可以获得一个支付令牌,用于卡API如果你需要在客户档案中存储卡片。当您的应用程序必须支持定期的无卡支付时,这很有用。
Web Payments SDK不会在Square帐户中创建一个新客户,该帐户中的付款将记入贷方。如果您想创建一个新客户并在Square帐户上付款,您需要收集至少以下有关买家的信息之一:
应用程序的后端可以获取此信息并创建客户配置文件使用客户API。当后端创建付款
对象使用创建付款端点,它包括Web Payments SDK提供的支付令牌和新的客户ID。
Web Payments SDK在确定买方信用卡的发行国后,在付款表单上显示邮政编码输入字段。Web Payments SDK根据国家/地区显示邮政编码的正确表格标签:
- 对于美国,表单显示“ZIP”。
- 对于CA,表单显示“邮政编码”。
- 对于英国,表单显示“邮政编码”。
如果付款表单显示邮政编码字段,则付款需要买方的邮政编码才能继续。SDK根据国家强制对邮政编码进行输入字段验证。
重要
日本不支持邮政编码字段。如果卡是由日本银行发行的,则付款单上不会显示该字段。如果您是在Square Sandbox中为日本卖家构建应用程序,那么如果将Sandbbox测试卡用于测试目的,您可能仍然会看到付款表单显示邮政编码字段。
支付会话在24小时后超时。如果买方尚未完成付款表格,则买方必须刷新浏览器才能完成付款。根据信用卡发卡国生成的字段可能无法保存买方输入的输入。
如果您的应用程序部署了内容安全策略(CSP)使用Web Payments SDK,您必须启用以下CSP指令才能添加额外的安全层:
CSP指令 | 沙盒 | 生产 |
---|
脚本-src | https://*.squarecn.com https://js.squareupsandbox.com | https://*.squarecdn.com https://js.squareup.com |
连接-src | https://pci-connect.squareupsandbox.com | https://pci-connect.squareup.com |
Square提供了应用程序集成的示例,您可以在其中使用后端初始化Web Payments SDK来处理付款。GitHub上提供了以下示例。
注释
如果您已经在应用程序中实现了支付API,您可以替换本地服务器
Web Payments SDK示例代码和示例中使用的域和URL以及您自己的服务器端点URL。