Antom, leading provider of tailored payment solutionsAntom, leading provider of tailored payment solutions

Web SDK

Antom SDK provides secure and reliable cross-platform payment capabilities, helping developers quickly integrate payment processes into Web/WAP applications. This topic introduces how to integrate the Web/WAP SDK resource package using two methods (npm and CDN) and provides the essential steps for rapidly using the SDK resource package.

Integration preparations

Before beginning the integration, ensure that you have completed the following environment preparations:

  • Install npm (Node Package Manager).
  • Properly handle compatibility issues: Provide corresponding polyfills for Internet Explorer and other old browser versions. We recommend that you use babel-preset-env to address browser compatibility issues when you build a project.
  • Use the following recommended browser versions:
    • For mobile browsers:
      • iOS 11 and later.
      • Android 5.0 and later.
    • For computer browsers, use the following recommended versions:

image.pngEdge

Lastest 2 versions

image.pngFirefox

Lastest 2 versions

image.pngChrome

Lastest 2 versions

image.pngSafari

Lastest 2 versions

image.pngOpera

Lastest 2 versions

image.pngElectron

Lastest 2 versions

Getting started

Step 1: Integrate the SDK package

Integrate the Antom SDK package using one of the following methods:

Use npm

Input the install command in the command line:

copy
npm install @alipay/ams-checkout

Use CDN resources

Use the <script> tag in the HTML file.

Note: Please replace ​{latest_version}​ in the code with the latest version.

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

(Optional) Step 2: Preload the SDK

Before creating a payment session, it is highly recommended that you preload the SDK to improve the rendering speed of the checkout page, reducing the waiting time for buyers during the payment. Follow the code example below to perform the preloading:

Note:

  • Replace {ClassName} in the sample code with the corresponding class name based on your business requirements.
  • Payment Element currently does not support SDK preloading.
copy
{ClassName}.preload();

Step 3: Create a payment session

Based on your business scenario, call the corresponding createPaymentSession API by passing order information to create a payment session and obtain paymentSessionData required to invoke the SDK:

Next steps

After completing the SDK integration, you can use the SDK in your desired payment scenarios. For specific operations, refer to the corresponding integration guides: