# AMSElement

> Use the AMSElement class to create a Payment Element instance on the frontend page. When creating the instance, you need to pass configuration information, including the environment, language, and payment session data (paymentSessionData) obtained from the server.

Use the `AMSElement` class to create a Payment Element instance on the frontend page. When creating the instance, you need to pass configuration information, including the environment, language, and payment session data (_paymentSessionData_) obtained from the server. The instance can be used to embed payment components, initiate payments, and other operations.

## **Method signature**

When calling this method, please use the following standard method signature format.

#### Tab: TypeScript

```typescript
new AMSElement(options: IElementOptions)
```

#### Tab: JavaScript

```javascript
new AMSElement(options)
```

## Parameters

| **Parameter** | **Data type** | **Required** | **Description** |
| --- | --- | --- | --- |
| _environment_ | String | No | It is used to pass in environmental information. Valid values are: - `sandbox`: Sandbox environment. - `prod`: Default value. Production environment. |
| _locale_ | String | No | It is used to pass in language information. You can choose the value to pass based on the region of the payment method. Valid values are: - `en_US`: Default value. English - `pt_BR`: Portuguese (Brazil) - `pt_PT`: Portuguese - `es_ES`: Spanish - `ko_KR`: Korean - `zh_CN`: Simplified Chinese - `zh_HK`: Traditional Chinese - `ms_MY`: Malay - `in_ID`: Indonesian - `th_TH`: Thai - `vi_VN`: Vietnamese - `tl_PH`: Filipino - `it_IT`: Italian - `de_DE`: German - `fr_FR`: French - `nl_NL`: Dutch - `ja_JP`: Japanese - `ro`: Romanian - `pl_PL`: Polish - `ar_SA`: Arabic - `tr_TR`: Turkish - `hi_IN`: Hindi > **Note**: If the parameter is omitted or contains an unsupported value, the system will default to English. |
| _sessionData_ | String | Yes | Payment session data. Use this parameter to create the configuration object: Pass the full _paymentSessionData_ parameter obtained from the [**createPaymentSession (One-time Payments)**](https://docs.antom.com/ac/ams/session_cashier.md) API response to this parameter. |

## Sample

### CDN

```javascript
// Get the browser language
let language = navigator.language || navigator.userLanguage;
language = language.replace("-", "_"); // Replace "-" with "_"

// Create Payment Element instance
const elementPayment = new window.AMSElement({
    environment: "sandbox",
    locale: "en_US",
    sessionData:sessionData
})
```

### npm

```javascript
import { AMSElement, ThemeType, PaymentElementLayout } from '@alipay/ams-checkout' // Package management

// Get the browser language
let language = navigator.language || navigator.userLanguage;
language = language.replace("-", "_"); // Replace "-" with "_"

// Create Payment Element instance
const elementPayment = new AMSElement({
    environment: "sandbox",
    locale: "en_US",
    sessionData:sessionData
})
```