Web SDK

Antom SDK 提供安全可靠的多平台支付能力，帮助开发者快速集成支付流程到 Web/WAP 应用中。本文为您介绍如何使用 npm 和 CDN 两种方式集成 Web/WAP SDK 资源包以及快速使用 SDK 资源包的必要步骤。

集成准备

在开始集成之前，请确保您已完成以下环境准备：

• 安装 npm 包管理器。
• 处理兼容性问题：为 Internet Explorer 和其他旧版浏览器提供相应的 Polyfills。建议您在构建项目时使用 babel-preset-env 来解决浏览器兼容性问题。
• 使用以下推荐的浏览器版本：

• 对于移动浏览器：

• iOS 11 及更高版本。
• Android 5.0 及更高版本。

• 对于电脑浏览器，使用以下推荐版本：

开始集成

步骤 1：集成 SDK 资源包

使用以下任一种方式集成 Antom SDK 资源包：

npm 包管理器集成

在命令行中输入安装命令：

npm install @alipay/ams-checkout

CDN 资源集成

在 HTML 文件中使用 <script> 标签：

<script src="https://sdk.marmot-cloud.com/package/ams-checkout/1.47.1/dist/umd/ams-checkout.min.js"></script>

（可选）步骤 2：预加载 SDK 客户端

在创建支付会话前，强烈建议您预加载 SDK，以提升收银台页面的渲染速度，减少买家在支付过程中的等待时间。按照以下代码示例执行预加载操作：

注意：

• 按您的业务需求，将以下示例代码中的 {ClassName} 替换成对应的类名称。
• Payment Element 目前不支持 SDK 预加载。

{ClassName}.preload();

步骤 3：创建支付会话 服务端

按照业务场景，传入订单信息以调用对应的 createPaymentSession 接口来创建支付会话，获取唤起 SDK 的 paymentSessionData：

• Payment Element: 调用 createPaymentSession（单笔支付）接口来创建支付会话。
• 嵌入式 Checkout Page (CKP): 调用 createPaymentSession（单笔支付）接口来创建支付会话。
• 快捷支付: 调用 createPaymentSession（快捷支付）接口来创建支付会话。

后续步骤

完成 SDK 集成后，即可在所需的支付场景中使用该 SDK。具体操作请参阅相应的集成指南：

• Payment Element 集成指南
• 嵌入式 Checkout Page (CKP) 集成指南
• 快捷支付集成指南