# 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.

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](https://babeljs.io/docs/en/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.png](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/1772785168541-af69bdbe-7c8e-4e00-b495-e5883d4a6f8d.png)](http://godban.github.io/browsers-support-badges/)**Edge** Lastest 2 versions | [![image.png](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/1772785168572-e9ce388c-5101-4e2d-b94c-c42fc2ac2baa.png)](http://godban.github.io/browsers-support-badges/)**Firefox** Lastest 2 versions | [![image.png](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/1772785168570-4a4dd733-9cdb-46f4-880a-dadd366118f6.png)](http://godban.github.io/browsers-support-badges/)**Chrome** Lastest 2 versions | [![image.png](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/1772785168575-1cbe7b28-d50a-4490-aa52-d42a423dab57.png)](http://godban.github.io/browsers-support-badges/)**Safari** Lastest 2 versions | [![image.png](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/1772785168615-360bca81-4b7b-4fda-bd7a-ca5c454127b1.png)](http://godban.github.io/browsers-support-badges/)**Opera** Lastest 2 versions | [![image.png](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/1772785169712-442609e1-9f11-40fd-bc8f-8ec9195d0d07.png)](http://godban.github.io/browsers-support-badges/)**Electron** 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:

```javascript
npm install @alipay/ams-checkout
```

#### Use CDN resources

Use the <script> tag in the HTML file.

#### Tab: For v2.x.x or later

When integrating the SDK v2.x.x or later, use the following script:

```html
<script src="https://js.antom.com/v2/ams-checkout.js"></script>
```

#### Tab: For v1.x.x or later

When integrating the SDK v1.x.x or later, replace `{latest_version}` in the code below with the specific version number, and ensure to use the [latest version](https://docs.antom.com/ac/sdks/sdk_release_note.md).

```html
<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.

```javascript
{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:

-   Payment Element: Call the [**createPaymentSession (One-time Payments)**](https://docs.antom.com/ac/ams/session_cashier.md) API to create a payment session.
-   Embedded Checkout Page: Call the [**createPaymentSession (One-time Payments)**](https://docs.antom.com/ac/ams/session_cashier.md) API to create a payment session.
-   EasySafePay: Call the [**createPaymentSession (EasySafePay)**](https://docs.antom.com/ac/ams/createpaymentsession_easypay.md) API to create a payment session.

## 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:

-   [Payment Element integration](https://docs.antom.com/ac/cashierpay/element.md): Antom offers two integration models for the Payment Element integration. Choose the one best suits your business needs:

-   Standalone constructor model: Use the [`AMSElement`](https://docs.antom.com/ac/sdks/web_AMSElement.md) constructor class to to create a Payment Element instance on the frontend page.
-   Factory pattern model: Create specialized elements such as [`CVVElement`](https://docs.antom.com/ac/sdks_zh-cn/web_CVVElement.md) or [`VaultingElement`](https://docs.antom.com/ac/sdks_zh-cn/web_VaultingElement.md) using the SDK factory methods for payment scenarios requiring CVV collection or card storing.

-   [Embedded Checkout Page integration](https://docs.antom.com/ac/cashierpay/embeddedckp.md)
-   [Accept payments with EasySafePay (SDK)](https://docs.antom.com/ac/easypay/easysafepay_sdk.md)