# Customized checkout

You have the option to customize the look and feel of your xMoney Checkout page. Here's how:

## 1. Create your custom payment page

Design your own payment page using HTML and CSS.

## 2. Use available tags

When building your custom page, you can use the following tags to dynamically display payment information:

### Payment Form Tags

| Tag Name | Description | Mandatory |
|  --- | --- | --- |
| `{{ error }}` | Payment form error messages | ✅ Yes |
| `{{ cardId }}` | Card selector for choosing a saved card | ❌ No |
| `{{ cardHolderName }}` | Cardholder name input field | ✅ Yes |
| `{{ cardHolderCountry }}` | Cardholder country selection | ❌ No |
| `{{ cardHolderState }}` | Cardholder state/province input | ❌ No |
| `{{ cardType }}` or `{{ cardTypeSelect }}` or `{{ cardTypeImage }}` | Card type as radio buttons, dropdown list, or image-based dropdown | ✅ Yes |
| `{{ cardNumber }}` | Card number input field | ✅ Yes |
| `{{ cardExpiryDate }}` | Card expiry date (month and year) | ✅ Yes |
| `{{ cardCvv }}` | Card CVV/CVC input field | ✅ Yes |
| `{{ saveCard }}` | Checkbox to save the card for future use | ❌ No |


### Customer Information Tags

| Tag Name | Description | Mandatory |
|  --- | --- | --- |
| `{{ invoiceEmail }}` | Invoice email address | ❌ No |
| `{{ firstName }}` | Customer first name | ❌ No |
| `{{ lastName }}` | Customer last name | ❌ No |
| `{{ country }}` | Customer country selection | ❌ No |
| `{{ state }}` | Customer state/province | ❌ No |
| `{{ city }}` | Customer city | ❌ No |
| `{{ zipCode }}` | Customer postal/zip code | ❌ No |
| `{{ address }}` | Customer address | ❌ No |
| `{{ phone }}` | Customer phone number | ❌ No |
| `{{ email }}` | Customer email address | ❌ No |


### Order & Interface Tags

| Tag Name | Description | Mandatory |
|  --- | --- | --- |
| `{{ submit }}` | Payment form submit button | ✅ Yes |
| `{{ cart }}` or `{{ cartLiner }}` | Cart content, payment description, and total amount | ✅ Yes |
| `{{ currency }}` | Order currency code | ❌ No |
| `{{ description }}` | Order description text | ❌ No |
| `{{ amount }}` | Order amount value | ❌ No |
| `{{ logo }}` | Company/merchant logo image | ❌ No |
| `{{ language }}` | Language selection dropdown | ❌ No |
| `{{ closeModal }}` | Close modal button | ❌ No |
| `{{ termsAndConditions }}` | Terms & conditions with clickable link | ✅ Yes |
| `{{ descriptor }}` | Site descriptor information | ✅ Yes |
| `{{ merchant }}` | Name of the merchant | ✅ Yes |
| `{{ mandatoryFields }}` | Description text for mandatory fields | ❌ No |


## 3. Set a default language

You can set a default language for your payment page by adding the `?lang=` GET parameter to the URL.

**Example:** `https://secure.xmoney.com/card?lang=it`

### Supported Languages

| Language Code | Language | Flag |
|  --- | --- | --- |
| `en` | English | 🇺🇸 |
| `fr` | French | 🇫🇷 |
| `de` | German | 🇩🇪 |
| `ro` | Romanian | 🇷🇴 |
| `es` | Spanish | 🇪🇸 |
| `it` | Italian | 🇮🇹 |
| `ru` | Russian | 🇷🇺 |


## 4. Add custom fields (optional)

To include custom text fields in your payment form, you can use the following format:

### Custom Field Syntax


```html
{{ customField({
  'name': 'unique-field-name',
  'label': 'Field Label Text',
  'placeholder': 'Placeholder text for user guidance',
  'error': 'Error message when validation fails',
  'required': true,
  'lang': 'en'
}) }}
```

### Custom Field Parameters

| Parameter | Type | Description | Required |
|  --- | --- | --- | --- |
| `name` | String | Unique identifier for the field | ✅ Yes |
| `label` | String | Display label for the field | ✅ Yes |
| `placeholder` | String | Placeholder text shown in the input | ❌ No |
| `error` | String | Error message for validation failures | ❌ No |
| `required` | Boolean | Whether the field is mandatory (`true`/`false`) | ❌ No |
| `lang` | String | Language code for localization | ❌ No |


### Example Custom Fields


```html
<!-- Required field example -->
{{ customField({
  'name': 'company-name',
  'label': 'Company Name',
  'placeholder': 'Enter your company name',
  'error': 'Company name is required',
  'required': true,
  'lang': 'en'
}) }}

<!-- Optional field example -->
{{ customField({
  'name': 'reference-number',
  'label': 'Reference Number',
  'placeholder': 'Optional reference (e.g., PO number)',
  'required': false,
  'lang': 'en'
}) }}
```