Web/WAP
此章节为您提供 Web/Wap 端独立绑卡 SDK 的集成指南,帮助您快速开始电脑浏览器及手机浏览器内绑卡相关页面的渲染。
在您开始集成前,请阅读 集成指南 及 API 概述 文档,了解服务端 API 的集成步骤及 API 的调用注意事项,并确保已完成以下预配置及环境准备工作:
- 安装 npm 包管理器。
- 处理兼容性问题:对于 IE 系列浏览器或其他低版本浏览器,需要提供相应的 Polyfill 支持,在项目构建时,建议使用 babel-preset-env 来解决浏览器兼容问题。
- 请使用建议的浏览器版本:
- 手机浏览器:
- 确保 iOS 11 及以上版本
- 确保 Android 6.0 及以上
- 电脑浏览器:推荐使用的浏览器版本如下 :
请按照以下步骤完成集成:
集成 SDK 资源包
请查阅 Web/WAP 端集成 SDK 资源包文档。
通过 AMSVaulting
构造函数创建 SDK 实例:
- 创建 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
。
- enabled: 选传,Boolean 类型。默认值为
-
onLog
: 选传,输出 SDK 运行期间触发的日志、接口异常等错误信息的回调函数。 onEventCallback
: 选传,输出 SDK 运行期间绑卡结果事件码、状态码等,例如绑卡成功、绑卡失败等。详情请参见 SDK 状态码。onError
: 选传,在 SDK 使用中发生错误时被触发(初始化异常、网络超时等)。 详情请参见 SDK 错误码说明。
- locale: 选传,String 类型。商户客户端识别用户浏览器使用的语言种类,并传入浏览器语言信息,SDK 根据此信息提供对应语言的页面。目前 SDK 支持以下多语言,如果传入的值不是如下几种,将提供英语页面:
- 实例化
AMSVaulting
。
发起资产绑定会话创建请求
商户客户端自行监听 添加卡 按钮的点击事件。当买家选择支付方式并点击绑卡按钮后,商户服务端向 Antom 服务器发起 资产绑定会话创建 请求。一旦接收到 资产绑定会话创建 请求的响应,将响应中的 vaultingSessionData 值用于步骤四。
如果您需要在卡资产绑定完成后自动重定向买家到您的页面,通过 资产绑定会话创建 接口中的 redirectUrl 字段传入跳转地址。如果您希望通过客户端事件码自行控制绑卡完成后续流程,则无需传入该字段,并通过 onEventCallback
监听绑卡结果事件码。
注意:客户端返回的绑卡结果事件码仅用于客户端页面的跳转操作参考,绑卡状态的更新请以服务端 资产绑定结果通知 接口为准。
渲染绑卡要素收集组件
- 使用实例对象中的
mountComponent
函数:- 使用 sessionData 参数创建配置对象: 将步骤 4 获取的 vaultingSessionData 字段的完整数据传入
mountComponent
的 sessionData 参数。 - 调用实例对象中的
mountComponent()
函数,返回值为 Promise,内容为使用该函数所得的组件实例对象。支付区块 DOM 节点即可根据环境参数渲染出绑卡要素收集视图并插入当前页面中。您可以配置以下参数:- appearance:选传,Object 类型,用于自定义外观主题配置,包含以下参数:
- showLoading: 选传,Boolean 类型。默认值为
true
,代表展示默认loading 动画。如您不使用默认 loading 动画,需指定此值为false
。 - showSubmitButton:选传,Boolean 类型。默认值为false,表示是否由组件渲染绑卡按钮。若该值为false,则需要调用实例对象中
submit()
函数触发提交绑卡流程。
- showLoading: 选传,Boolean 类型。默认值为
- appearance:选传,Object 类型,用于自定义外观主题配置,包含以下参数:
- 使用 sessionData 参数创建配置对象: 将步骤 4 获取的 vaultingSessionData 字段的完整数据传入
- 调用实例对象中的
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)。邮政编码。
- billingAddress:选传,Object 类型。用来识别付款人身份和位置的账单地址信息。包含如下参数:
卸载组件
调用实例对象中的 unmount()
函数,可以销毁已经创建的组件。如下情况下您需要卸载组件:
- 如果你的客户端设置了超时时间,到达所设置的超时时间时。
- 买家退出绑卡页面时。
- 您收到绑卡结果回调时。
【注意】同一时间只能创建一个组件,如果需要使用不同 vaultingSessionData 或重新创建组件,需要先执行卸载函数。
SDK 提供的错误码如下:
SDK_INTERNAL_ERROR
:SDK 内部错误。请联系蚂蚁集团技术支持。SDK_CREATEPAYMENT_PARAMETER_ERROR
:mountComponent
函数传入参数异常,请检查参数是否正确后更换 vaultingRequestId 重试请求。SDK_INIT_PARAMETER_ERROR
:AMSVaulting
函数传入参数异常。请检查参数是否正确后更换 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 技术支持解决该问题。 |