Alipay, China's leading third-party online payment solutionAlipay, China's leading third-party online payment solution

Web/WAP

此章节为您提供 Web/Wap 端独立绑卡 SDK 的集成指南,帮助您快速开始电脑浏览器及手机浏览器内绑卡相关页面的渲染。

 

集成准备

在您开始集成前,请阅读 集成指南API 概述 文档,了解服务端 API 的集成步骤及 API 的调用注意事项,并确保已完成以下预配置及环境准备工作:

  • 安装 npm 包管理器。
  • 处理兼容性问题:对于 IE 系列浏览器或其他低版本浏览器,需要提供相应的 Polyfill 支持,在项目构建时,建议使用 babel-preset-env 来解决浏览器兼容问题。
  • 请使用建议的浏览器版本:
    • 手机浏览器:
      • 确保 iOS 11 及以上版本
      • 确保 Android 6.0 及以上
    • 电脑浏览器:推荐使用的浏览器版本如下 : 

imageEdge

最近两个版本

imageFirefox

最近两个版本

imageChrome

最近两个版本

imageSafari

最近两个版本

imageOpera

最近两个版本

imageElectron

最近两个版本

集成步骤

请按照以下步骤完成集成:

1

集成 SDK 资源包

商户客户端

请查阅 Web/WAP 端集成 SDK 资源包文档。

 

2

通过 AMSVaulting 构造函数创建 SDK 实例:

商户客户端
  1. 创建 config 对象:必传,Object 类型。包含所有配置参数:
    • locale: 选传,String 类型。商户客户端识别用户浏览器使用的语言种类,并传入浏览器语言信息,SDK 根据此信息提供对应语言的页面。目前 SDK 支持以下多语言,如果传入的值不是如下几种,将提供英语页面:
      • en_US:英语
      • es_ES:西班牙语
      • fr_FR:法语
      • nl_NL:荷兰语
      • it_IT:意大利语
      • de_DE:德语
      • zh_CN:简体中文
    • environment: 必传,String 类型。用于传入环境参数,支持的值包括:
      • sandbox:沙箱环境
      • prod:生产环境
    • analytics:选传,Object 类型,用于配置分析数据服务,包含以下参数:
      • enabled: 选传,Boolean 类型。默认值为 true ,代表允许 SDK 上传分析运行数据以提供更好的服务。如您不允许上传分析运行数据,需指定此值为 false 。
    • onLog: 选传,输出 SDK 运行期间触发的日志、接口异常等错误信息的回调函数。
    • onEventCallback: 选传,输出 SDK 运行期间绑卡结果事件码、状态码等,例如绑卡成功、绑卡失败等。详情请参见 SDK 状态码。
    • onError: 选传,在 SDK 使用中发生错误时被触发(初始化异常、网络超时等)。 详情请参见 SDK 错误码说明。
  2. 实例化 AMSVaulting

 

获取浏览器语言的代码示例
JavaScript
Editor
以下示例分别针对 npm 引包方式和 CDN 引包方式展示创建 SDK 实例的代码示例:
npm
CDN
Editor
3

发起资产绑定会话创建请求

商户服务端

商户客户端自行监听 添加卡 按钮的点击事件。当买家选择支付方式并点击绑卡按钮后,商户服务端向 Antom 服务器发起 资产绑定会话创建 请求。一旦接收到 资产绑定会话创建 请求的响应,将响应中的 vaultingSessionData 值用于步骤四。

如果您需要在卡资产绑定完成后自动重定向买家到您的页面,通过 资产绑定会话创建 接口中的 redirectUrl 字段传入跳转地址。如果您希望通过客户端事件码自行控制绑卡完成后续流程,则无需传入该字段,并通过 onEventCallback 监听绑卡结果事件码。

注意:客户端返回的绑卡结果事件码仅用于客户端页面的跳转操作参考,绑卡状态的更新请以服务端 资产绑定结果通知 接口为准。

JavaScript
Editor
4

渲染绑卡要素收集组件

商户客户端
  • 使用实例对象中的 mountComponent 函数:
    • 使用 sessionData 参数创建配置对象: 将步骤 4 获取的 vaultingSessionData 字段的完整数据传入 mountComponent 的 sessionData 参数。
    • 调用实例对象中的 mountComponent() 函数,返回值为 Promise,内容为使用该函数所得的组件实例对象。支付区块 DOM 节点即可根据环境参数渲染出绑卡要素收集视图并插入当前页面中。您可以配置以下参数:
      • appearance:选传,Object 类型,用于自定义外观主题配置,包含以下参数:
        • showLoading: 选传,Boolean 类型。默认值为 true ,代表展示默认loading 动画。如您不使用默认 loading 动画,需指定此值为 false 。​​​
        • showSubmitButton:选传,Boolean 类型。默认值为false,表示是否由组件渲染绑卡按钮。若该值为false,则需要调用实例对象中 submit() 函数触发提交绑卡流程。
  • 调用实例对象中的 submit() 函数:
    • 调用该函数,可触发绑卡提交流程,返回值为Promise,返回特定事件码。这些事件码也会通过onError或onEventCallback等事件返回。
    • 如果您需要传入提前收集好的 billing address 信息用于 AVS 验证,您可配置如下参数通过 submit 函数传入。
      • billingAddress:选传,Object 类型。用来识别付款人身份和位置的账单地址信息。包含如下参数:
        • region:必传,String (2)。遵循 ISO 3166 标准的二位国家码。
        • state:选传,String (8)。州、国家或省名称。
        • city:选传,String (32)。城市、地区、郊区、城镇或村庄名称。
        • address1:选传,String (256)。地址行 1,例如街道地址、邮政信箱和公司名称。
        • address2:选传,String (256)。地址行 2,例如公寓、套房、单元和建筑物信息。
        • zipCode:选传,String (32)。邮政编码。
调用 mountComponent()
Javascript
Editor
5

卸载组件

商户客户端

调用实例对象中的 unmount() 函数,可以销毁已经创建的组件。如下情况下您需要卸载组件:

  • 如果你的客户端设置了超时时间,到达所设置的超时时间时。
  • 买家退出绑卡页面时。
  • 您收到绑卡结果回调时。

注意】同一时间只能创建一个组件,如果需要使用不同 vaultingSessionData 或重新创建组件,需要先执行卸载函数。

调用 unmount():
JavaScript
Editor
6

获取绑卡结果

商户服务端

当绑卡成功后,支付宝会通过 资产绑定通知 发送异步通知到您在资产创建会话创建接口里传入的通知接收地址。若您收到支付宝的异步通知,需要您在返回中按照处理通知的示例代码格式返回响应。同时,您需要更新您系统内买家的绑卡状态,建议在您的绑卡管理页根据通知里的卡信息展示对应的脱敏卡号。

事件码

SDK 提供的错误码如下:

  • SDK_INTERNAL_ERROR:SDK 内部错误。请联系蚂蚁集团技术支持。
  • SDK_CREATEPAYMENT_PARAMETER_ERRORmountComponent 函数传入参数异常,请检查参数是否正确后更换 vaultingRequestId 重试请求。
  • SDK_INIT_PARAMETER_ERRORAMSVaulting 函数传入参数异常。请检查参数是否正确后更换 vaultingRequestId 重试请求。
  • SDK_CREATECOMPONENT_ERROR:组件初始化异常。请联系蚂蚁集团技术支持。
  • SDK_ABNORMAL_RENDERING_DATA:渲染数据异常。请重试初始化流程或联系技术支持排查。
  • SDK_SUBMIT_NETWORK_ERROR:网络原因,导致接口调用失败。在 submit 函数提交中可能会出现。请买家再尝试重新提交。

SDK 提供的状态码如下:

  • SDK_START_OF_LOADING:创建组件时,loading 动画开始显示。当配置隐藏 loading,使用自定义动画时,可以在这个时机渲染自定义动画。
  • SDK_END_OF_LOADING:创建组件时,loading 动画结束显示。当配置隐藏 loading,使用自定义动画时,这个时机可以隐藏动画。
  • SDK_CALL_URL_ERROR:跳转商户页面失败。检查跳转商户链接是否可以正常可访问。若回跳 URL 可正常访问,请联系蚂蚁集团技术支持。
  • SDK_CALL_URL_SUCCESS:跳转商户页面成功。无需后续操作。
  • SDK_FORM_VERIFICATION_FAILED:提交表单后校验不通过。SDK 会在要素收集页面展示表单错误。商户也可以通过文案引导用户输入正确信息。
  • SDK_DUPLICATE_SUBMISSION_BEHAVIOR:表单重复提交。商户可以通过 toast 提示用户,无需重复点击提交。

SDK 提供的绑卡结果事件码与结果码如下:

SDK 提供的绑卡结果事件码(code

  • SDK_ASSET_BINDING_FAIL:绑卡失败。建议您根据 vaultingResultCode 错误码提示信息,并重新引导用户绑卡。
  • SDK_ASSET_BINDING_SUCCESSFUL:绑卡成功,需要注销SDK。建议重定向到绑卡结果页。
  • SDK_ASSET_BINDING_ERROR:绑卡异常。建议您等待绑卡结果通知或重新引导用户绑卡。

SDK 查询服务端绑卡状态(vaultingStatus

  • SUCCESS: 表示绑卡成功。
  • FAIL: 表示绑卡失败。

SDK 查询服务端结果码(result.resultCode

结果码

消息

建议

SUCCESS

S

Success

-

PROCESS_FAIL

F

A general business failure occurred.

通常需要人工确认该问题。 建议您联系 Antom 技术支持解决该问题。

UNKNOWN_EXCEPTION

U

An API call has failed, which is caused by unknown reasons.

-

SDK 查询服务端绑卡结果码(vaultingResultcode

结果码

消息

建议

PROCESS_FAIL

F

A general business failure occurred.

通常需要人工确认该问题。 建议您联系 Antom 技术支持解决该问题。

 

绑卡结果事件码处理示例:
JavaScript
Editor
绑卡结果示例:
绑卡成功
绑卡失败
Editor