diff --git a/README.md b/README.md
index 648a8ca..451fe18 100644
--- a/README.md
+++ b/README.md
@@ -417,92 +417,66 @@ Integration flow:
 1. Add the `<psdk-finance-details>`, `<psdk-status>` and `<psdk-legal>` components to the created `return` page to show a payment status.
 1. Set accessToken at `headlessCheckout.setToken`. Run `headlessCheckout.init` to initialize the headless checkout library.
 
-## Save method integration guide
+## Google Pay integration guide
 
-> A working example can be found [here](./examples/save-payment-method).
+> A working example can be found [here](./examples/google-pay).
 
 Integration flow:
 
-1. Add the SDK library to your project. You can use an npm-package or CDN link.
+1. Add the SDK library to your project. You can use an npm package.
 1. Access the `headlessCheckout` object that contains the Pay Station initialization logic.
 1. Add the `<psdk-legal>` component to the HTML markup to provide links to legal documents.
-1. Display methods that can be saved `<psdk-payment-methods save-method-mode='true'></psdk-payment-methods>`.
-1. Handle the selection of the payment method with `selectionChange` event.
+1. Add the `<psdk-finance-details>` component to the HTML markup to show purchase details.
+   - The financial details component are updated with transaction details once the payment is completed.
+1. Initialize the SDK with your environment parameters.
+1. Set the access token for the initialized SDK.
+1. Initialize the payment form with the Google Pay payment method ID and return URL.
+   - The `headlessCheckout.form.init` method returns the form object that can be used for future work with the payment form.
+1. Subscribe to events of the `NextActions` form to receive notifications about the next payment flow steps.
+   - The Next action with the `check_status` type means that you need to render the status component.
+   - The Next action with the `special_button` type means that you need to render the special button component (in our case it is the Google Pay button).
 1. Add a form message component to the form - `<psdk-payment-form-messages>`.
 1. Add a payment form component to the form - `<psdk-payment-form>`.
-1. Initialize the payment form with the `{ paymentMethodId: ${id}, savePaymentMethod: true, returnUrl: ${returnUrl}}` parameters, where `event.detail.paymentMethodId` is from the `selectionChange` event.
-1. Handle the next action event.
+1. Add the `<psdk-submit-button>` form submit button to the HTML markup.
+1. Create a `return` page.
+1. Add the `<psdk-finance-details>`, `<psdk-status>`, and `<psdk-legal>` components to the created `return` page to show a payment status.
+1. Set accessToken at `headlessCheckout.setToken`. Run `headlessCheckout.init` to initialize the headless checkout library.
 
-## Delete saved method integration guide
+## Apple Pay integration guide
 
-> A working example can be found [here](./examples/saved-methods).
+> A working example can be found [here](./examples/apple-pay).
 
-Integration flow:
+Features of the payment system:
 
-1. Add the SDK library to your project. You can use an npm-package or CDN link.
-1. Access the `headlessCheckout` object that contains the Pay Station initialization logic.
-1. Add the `<psdk-legal>` component to the HTML markup to provide links to legal documents.
-1. Display saved methods using the `<psdk-saved-methods>` component.
-1. To make the delete saved method button appear, you need to add the `delete-mode='true'` attribute to the `<psdk-saved-methods>` component.
-1. Handle the deleted saved method event - `deletedSavedMethodStatus`. This is optional. It can be used to display an informational message.
-
-## Payment via saved method integration guide
-
-> A working example can be found [here](./examples/payment-via-saved-method).
+1. An Apple Pay payment can only be made on a supported device.
+1. On the `PayStationSdk` side, only the possibility of payment on this device is checked, all necessary data is checked, and a new tab is opened where the payment itself will be made - https://secure.xsolla.com/paystation4/payment/external-pages/apple-pay.
+1. For the convenience of users, the `PayStationSdk` the `<psdk-apple-pay>` component is integrated into the `<psdk-submit-button>` component.
 
 Integration flow:
 
-1. Add the SDK library to your project. You can use an npm-package or CDN link.
+1. Add the SDK library to your project. You can use an npm package.
 1. Access the `headlessCheckout` object that contains the Pay Station initialization logic.
 1. Add the `<psdk-legal>` component to the HTML markup to provide links to legal documents.
-1. Display saved methods using the `<psdk-saved-methods>` component.
-1. Handle the selection of the payment method with the `savedMethodSelected` event.
-1. Add a form message component to the form - `<psdk-payment-form-messages>`.
-1. Add a payment form component to the form - `<psdk-payment-form>`.
-1. Initialize the payment form with the `{ paymentMethodId: ${id}, paymentWithSavedMethod: true, savedMethodId, returnUrl: ${returnUrl}}` parameters, where `paymentMethodId` and `savedMethodId` are from the `savedMethodSelected` of the `event.details` parameter.
-1. Handle the next action event.
-
-## Payment via user balance
-
-1. If the user has sufficient virtual balance for full payment, a form for payment by balance will always be returned, regardless of the method passed when initiating the payment form using `headlessCheckout.form.init({...})`.
-2. Payment by balance will be reflected in the `<psdk-finance-details>` component.
-3. The user balance can also be displayed using the `<psdk-user-balance>` component.
-4. The user balance can be obtained using the `headlessCheckout.getUserBalance()` method.
-
-## Using default styles
-
-> A working example can be found [here](./examples/default-styles).
-
-1. To use the default styles of the SDK components, you need to connect the style.css file to your HTML document.
-2. To use the default styles of the secure components, you need to pass the `theme: 'default'` parameter when initializing `headlessCheckout`.
-
-## Changing country
-
-> A working example can be found [here](./examples/changing-country).
-
-Where can the country value be used?
-
-1. When initializing the form using `headlessCheckout.form.init({ ..., country: ${countryISO} })`.
-2. When passing it as an attribute for the `<psdk-payment-methods country="${countryISO}></psdk-payment-methods>` component.
-
-How to get the country value?
+1. Add the `<psdk-finance-details>` component to the HTML markup to show purchase details.
 
-1. To get the list of available countries, use the `headlessCheckout.getCountryList()` method.
-1. You can use the ready-made component - `<psdk-select type='country'></psdk-select>`. When using this component, you need to listen for the `userCountryChanged` event.
+- The financial details component are updated with transaction details once the payment is completed.
 
-## Changing locales
+1. Subscribe to events of the `NextActions` form to receive notifications about the next payment flow steps.
 
-Where can the language value be used?
+- The Next action with the `check_status` type means that you need to render the status component.
+- The Next action with the `hide_form` type informs you that can hide payment form with css.
+- The Next action with the `show_errors` type means that you need to show errors messages and payment can't be completed.
 
-1. The language value can be used when initializing `headlessCheckout` - `init({ language?: Lang; })`. Lang - `src/core/i18n/lang.enum.ts`.
+1. Add a payment form component to the form - `<psdk-payment-form>`.
+1. Initialize the payment form with the Apple-pay payment method ID and return URL.
 
-How can I get the value of the available locale?
+- The `headlessCheckout.form.init` method returns the form object that can be used for future work with the payment form.
 
-1. You can get the list of locales by using the `headlessCheckout.getAvailableLanguages()` method.
+1. Add the `<psdk-submit-button>` form submit button to the HTML markup.
 
-## Google Pay integration guide
+## SDK payment methods integration guide (Barzahlen, Naver, Venmo, etc.)
 
-> A working example can be found [here](./examples/google-pay).
+> A working example can be found [here](./examples/sdk-payment-methods).
 
 Integration flow:
 
@@ -510,14 +484,13 @@ Integration flow:
 1. Access the `headlessCheckout` object that contains the Pay Station initialization logic.
 1. Add the `<psdk-legal>` component to the HTML markup to provide links to legal documents.
 1. Add the `<psdk-finance-details>` component to the HTML markup to show purchase details.
-    - The financial details component are updated with transaction details once the payment is completed.
+   - The financial details component are updated with transaction details once the payment is completed.
 1. Initialize the SDK with your environment parameters.
 1. Set the access token for the initialized SDK.
-1. Initialize the payment form with the Google Pay payment method ID and return URL.
-    - The `headlessCheckout.form.init` method returns the form object that can be used for future work with the payment form.
+1. Initialize the payment form with the SDK payment method ID and return URL.
+   - The `headlessCheckout.form.init` method returns the form object that can be used for future work with the payment form.
 1. Subscribe to events of the `NextActions` form to receive notifications about the next payment flow steps.
-    - The Next action with the `check_status` type means that you need to render the status component.
-    - The Next action with the `special_button` type means that you need to render the special button component (in our case it is the Google Pay button).
+   - Next action with the `redirect` type informs you that a redirect action is required on your side. You can get the redirect URL from the action payload.
 1. Add a form message component to the form - `<psdk-payment-form-messages>`.
 1. Add a payment form component to the form - `<psdk-payment-form>`.
 1. Add the `<psdk-submit-button>` form submit button to the HTML markup.
@@ -525,9 +498,9 @@ Integration flow:
 1. Add the `<psdk-finance-details>`, `<psdk-status>`, and `<psdk-legal>` components to the created `return` page to show a payment status.
 1. Set accessToken at `headlessCheckout.setToken`. Run `headlessCheckout.init` to initialize the headless checkout library.
 
-## SDK payment methods integration guide (Barzahlen, Naver, Venmo, etc.)
+## QR code payment integration guide
 
-> A working example can be found [here](./examples/sdk-payment-methods).
+> A working example can be found [here](./examples/qr-code).
 
 Integration flow:
 
@@ -535,13 +508,15 @@ Integration flow:
 1. Access the `headlessCheckout` object that contains the Pay Station initialization logic.
 1. Add the `<psdk-legal>` component to the HTML markup to provide links to legal documents.
 1. Add the `<psdk-finance-details>` component to the HTML markup to show purchase details.
-    - The financial details component are updated with transaction details once the payment is completed.
+   - The financial details component are updated with transaction details once the payment is completed.
 1. Initialize the SDK with your environment parameters.
 1. Set the access token for the initialized SDK.
-1. Initialize the payment form with the SDK payment method ID and return URL.
-    - The `headlessCheckout.form.init` method returns the form object that can be used for future work with the payment form.
+1. Initialize the payment form with the QR code payment method ID and return URL.
+   - The `headlessCheckout.form.init` method returns the form object that can be used for future work with the payment form.
 1. Subscribe to events of the `NextActions` form to receive notifications about the next payment flow steps.
-    - Next action with the `redirect` type informs you that a redirect action is required on your side. You can get the redirect URL from the action payload.
+   - The Next action with the `redirect` type informs you that a redirect action is required on your side. You can get the redirect URL from the action payload.
+   - The Next action with the `show_qr_code` type means that you need to render the QR code component.
+   - The Next action with the `check_status` type means that you need to render the status component.
 1. Add a form message component to the form - `<psdk-payment-form-messages>`.
 1. Add a payment form component to the form - `<psdk-payment-form>`.
 1. Add the `<psdk-submit-button>` form submit button to the HTML markup.
@@ -549,9 +524,9 @@ Integration flow:
 1. Add the `<psdk-finance-details>`, `<psdk-status>`, and `<psdk-legal>` components to the created `return` page to show a payment status.
 1. Set accessToken at `headlessCheckout.setToken`. Run `headlessCheckout.init` to initialize the headless checkout library.
 
-## QR code pay integration guide
+## Mobile payment integration guide
 
-> A working example can be found [here](./examples/qr-code).
+> A working example can be found [here](./examples/mobile-payment).
 
 Integration flow:
 
@@ -559,15 +534,15 @@ Integration flow:
 1. Access the `headlessCheckout` object that contains the Pay Station initialization logic.
 1. Add the `<psdk-legal>` component to the HTML markup to provide links to legal documents.
 1. Add the `<psdk-finance-details>` component to the HTML markup to show purchase details.
-    - The financial details component are updated with transaction details once the payment is completed.
+   - The financial details component are updated with transaction details once the payment is completed.
 1. Initialize the SDK with your environment parameters.
 1. Set the access token for the initialized SDK.
 1. Initialize the payment form with the QR code payment method ID and return URL.
-    - The `headlessCheckout.form.init` method returns the form object that can be used for future work with the payment form.
+   - The `headlessCheckout.form.init` method returns the form object that can be used for future work with the payment form.
 1. Subscribe to events of the `NextActions` form to receive notifications about the next payment flow steps.
-    - The Next action with the `redirect` type informs you that a redirect action is required on your side. You can get the redirect URL from the action payload.
-    - The Next action with the `show_qr_code` type means that you need to render the QR code component.
-    - The Next action with the `check_status` type means that you need to render the status component.
+   - The Next action with the `redirect` type informs you that a redirect action is required on your side. You can get the redirect URL from the action payload.
+   - The Next action with the `show_mobile_payment_screen` type means that you need to render new submit button.
+   - The Next action with the `check_status` type means that you need to render the status component.
 1. Add a form message component to the form - `<psdk-payment-form-messages>`.
 1. Add a payment form component to the form - `<psdk-payment-form>`.
 1. Add the `<psdk-submit-button>` form submit button to the HTML markup.
@@ -575,28 +550,93 @@ Integration flow:
 1. Add the `<psdk-finance-details>`, `<psdk-status>`, and `<psdk-legal>` components to the created `return` page to show a payment status.
 1. Set accessToken at `headlessCheckout.setToken`. Run `headlessCheckout.init` to initialize the headless checkout library.
 
-## Mobile payment integration guide
+## Payment via user balance
 
-> A working example can be found [here](./examples/mobile-payment).
+1. If the user has sufficient virtual balance for full payment, a form for payment by balance will always be returned, regardless of the method passed when initiating the payment form using `headlessCheckout.form.init({...})`.
+2. Payment by balance will be reflected in the `<psdk-finance-details>` component.
+3. The user balance can also be displayed using the `<psdk-user-balance>` component.
+4. The user balance can be obtained using the `headlessCheckout.getUserBalance()` method.
+
+## Saved payment methods
+
+### Save method integration guide
+
+> A working example can be found [here](./examples/save-payment-method).
 
 Integration flow:
 
-1. Add the SDK library to your project. You can use an npm package.
+1. Add the SDK library to your project. You can use an npm-package or CDN link.
 1. Access the `headlessCheckout` object that contains the Pay Station initialization logic.
 1. Add the `<psdk-legal>` component to the HTML markup to provide links to legal documents.
-1. Add the `<psdk-finance-details>` component to the HTML markup to show purchase details.
-    - The financial details component are updated with transaction details once the payment is completed.
-1. Initialize the SDK with your environment parameters.
-1. Set the access token for the initialized SDK.
-1. Initialize the payment form with the QR code payment method ID and return URL.
-    - The `headlessCheckout.form.init` method returns the form object that can be used for future work with the payment form.
-1. Subscribe to events of the `NextActions` form to receive notifications about the next payment flow steps.
-    - The Next action with the `redirect` type informs you that a redirect action is required on your side. You can get the redirect URL from the action payload.
-    - The Next action with the `show_mobile_payment_screen` type means that you need to render new submit button.
-    - The Next action with the `check_status` type means that you need to render the status component.
+1. Display methods that can be saved `<psdk-payment-methods save-method-mode='true'></psdk-payment-methods>`.
+1. Handle the selection of the payment method with `selectionChange` event.
 1. Add a form message component to the form - `<psdk-payment-form-messages>`.
 1. Add a payment form component to the form - `<psdk-payment-form>`.
-1. Add the `<psdk-submit-button>` form submit button to the HTML markup.
-1. Create a `return` page.
-1. Add the `<psdk-finance-details>`, `<psdk-status>`, and `<psdk-legal>` components to the created `return` page to show a payment status.
-1. Set accessToken at `headlessCheckout.setToken`. Run `headlessCheckout.init` to initialize the headless checkout library.
+1. Initialize the payment form with the `{ paymentMethodId: ${id}, savePaymentMethod: true, returnUrl: ${returnUrl}}` parameters, where `event.detail.paymentMethodId` is from the `selectionChange` event.
+1. Handle the next action event.
+
+### Delete saved method integration guide
+
+> A working example can be found [here](./examples/saved-methods).
+
+Integration flow:
+
+1. Add the SDK library to your project. You can use an npm-package or CDN link.
+1. Access the `headlessCheckout` object that contains the Pay Station initialization logic.
+1. Add the `<psdk-legal>` component to the HTML markup to provide links to legal documents.
+1. Display saved methods using the `<psdk-saved-methods>` component.
+1. To make the delete saved method button appear, you need to add the `delete-mode='true'` attribute to the `<psdk-saved-methods>` component.
+1. Handle the deleted saved method event - `deletedSavedMethodStatus`. This is optional. It can be used to display an informational message.
+
+### Payment via saved method integration guide
+
+> A working example can be found [here](./examples/payment-via-saved-method).
+
+Integration flow:
+
+1. Add the SDK library to your project. You can use an npm-package or CDN link.
+1. Access the `headlessCheckout` object that contains the Pay Station initialization logic.
+1. Add the `<psdk-legal>` component to the HTML markup to provide links to legal documents.
+1. Display saved methods using the `<psdk-saved-methods>` component.
+1. Handle the selection of the payment method with the `savedMethodSelected` event.
+1. Add a form message component to the form - `<psdk-payment-form-messages>`.
+1. Add a payment form component to the form - `<psdk-payment-form>`.
+1. Initialize the payment form with the `{ paymentMethodId: ${id}, paymentWithSavedMethod: true, savedMethodId, returnUrl: ${returnUrl}}` parameters, where `paymentMethodId` and `savedMethodId` are from the `savedMethodSelected` of the `event.details` parameter.
+1. Handle the next action event.
+
+## Payment country
+
+### Changing country
+
+> A working example can be found [here](./examples/changing-country).
+
+Where can the country value be used?
+
+1. When initializing the form using `headlessCheckout.form.init({ ..., country: ${countryISO} })`.
+2. When passing it as an attribute for the `<psdk-payment-methods country="${countryISO}></psdk-payment-methods>` component.
+
+How to get the country value?
+
+1. To get the list of available countries, use the `headlessCheckout.getCountryList()` method.
+1. You can use the ready-made component - `<psdk-select type='country'></psdk-select>`. When using this component, you need to listen for the `userCountryChanged` event.
+
+## Localization
+
+### Changing locales
+
+Where can the language value be used?
+
+1. The language value can be used when initializing `headlessCheckout` - `init({ language?: Lang; })`. Lang - `src/core/i18n/lang.enum.ts`.
+
+How can I get the value of the available locale?
+
+1. You can get the list of locales by using the `headlessCheckout.getAvailableLanguages()` method.
+
+## Default styles
+
+## Using default styles
+
+> A working example can be found [here](./examples/default-styles).
+
+1. To use the default styles of the SDK components, you need to connect the style.css file to your HTML document.
+2. To use the default styles of the secure components, you need to pass the `theme: 'default'` parameter when initializing `headlessCheckout`.
diff --git a/examples/apple-pay/index.html b/examples/apple-pay/index.html
new file mode 100644
index 0000000..d852e6f
--- /dev/null
+++ b/examples/apple-pay/index.html
@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+    <!--
+Link the SDK bundle.
+NOTE: In this example, we use a local build just for convenience purposes.
+-->
+    <script src="../../dist/main.js"></script>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="../../dist/style.css" />
+    <script src="../variables.js"></script>
+  </head>
+
+  <body>
+    <h1>Apple pay</h1>
+    <div class="errors-container"></div>
+    <div class="content"></div>
+    <div class="submit-button-container"></div>
+    <psdk-legal></psdk-legal>
+
+    <!-- Initialization script -->
+    <script>
+      if (typeof PayStationSdk === 'undefined') {
+        alert(payStationSdkUndefinedError);
+        throw new Error('PayStationSdk not found');
+      }
+      /**
+       * To learn more about creating tokens,
+       * refer to https://developers.xsolla.com/api/pay-station/operation/create-token/
+       */
+      const accessToken = '';
+
+      if (!accessToken) {
+        alert(`No token provided. Please, check the documentation`);
+        throw new Error('No token provided');
+      }
+      /**
+       * The SDK is available under the PayStationSdk namespace.
+       * To begin initialization, obtain a reference to the headlessCheckout object.
+       */
+      const { headlessCheckout } = PayStationSdk;
+      const contentElement = document.querySelector('.content');
+      const submitButtonContainerElement = document.querySelector(
+        '.submit-button-container',
+      );
+      const applePayId = 3175;
+
+      async function initPayStationSdk() {
+        /**
+         * Call the `init()` method with the provided environment object.
+         * The isWebView parameter is required and indicates whether your
+         * integration type is a WebView or not.
+         * Please note that this command executes asynchronously.
+         */
+        await headlessCheckout.init({
+          isWebView: false,
+          sandbox: false,
+          theme: 'default',
+        });
+
+        /**
+         * After the Payments SDK has been initialized, the next step is setting the token.
+         * To learn more about creating tokens,
+         * refer to https://developers.xsolla.com/api/pay-station/operation/create-token/
+         */
+        await headlessCheckout.setToken(accessToken);
+      }
+
+      function clearPaymentForm() {
+        contentElement.innerHTML = '';
+      }
+
+      function addSubmitButtonElement() {
+        const submitButtonElement = new PayStationSdk.SubmitButtonComponent();
+        submitButtonContainerElement.appendChild(submitButtonElement);
+      }
+
+      function addPaymentFormElement() {
+        const paymentFormElement = new PayStationSdk.PaymentFormComponent();
+        contentElement.appendChild(paymentFormElement);
+      }
+
+      function initPaymentForm(paymentMethodId) {
+        headlessCheckout.form.init({
+          paymentMethodId: paymentMethodId,
+
+          /**
+           * Initialize payment.
+           * returnUrl will be opened after payment is completed on external payment method side.
+           * Refer to `examples/return.html` for more details.
+           */
+          returnUrl: 'http://return',
+        });
+      }
+
+      function handleNextActions() {
+        headlessCheckout.form.onNextAction((action) => {
+          if (action.type === 'hide_form') {
+            contentElement.classList.add('hidden');
+          }
+          if (action.type === 'check_status') {
+            checkStatusAction();
+          }
+          if (action.type === 'show_errors') {
+            showErrorsAction(action);
+            clearPaymentForm();
+            submitButtonContainerElement.innerHTML = '';
+          }
+        });
+      }
+
+      function checkStatusAction() {
+        clearPaymentForm();
+        const statusElement = new PayStationSdk.StatusComponent();
+        contentElement.appendChild(statusElement);
+      }
+
+      function showErrorsAction(action) {
+        const errors = action.data.errors ?? [];
+        const formError = errors[0]?.message ?? null;
+
+        const errorsContainer = document.querySelector('.errors-container');
+        const formErrorElement = document.createElement('div');
+        formErrorElement.innerHTML = formError;
+        formErrorElement.classList.add('error');
+        if (errorsContainer) {
+          errorsContainer.append(formErrorElement);
+        }
+      }
+
+      async function main() {
+        await initPayStationSdk();
+        handleNextActions();
+        addPaymentFormElement();
+        await initPaymentForm(applePayId);
+        addSubmitButtonElement();
+      }
+
+      main();
+    </script>
+  </body>
+</html>
diff --git a/examples/apple-pay/style.css b/examples/apple-pay/style.css
new file mode 100644
index 0000000..ccb72c1
--- /dev/null
+++ b/examples/apple-pay/style.css
@@ -0,0 +1,21 @@
+.hidden {
+  visibility: hidden;
+  position: absolute;
+}
+
+.error {
+  padding: 12px;
+  margin-bottom: 1rem;
+  border-radius: var(--psdk-common-border-radius);
+  color: var(--psdk-alert-color);
+  background: var(--psdk-alert-bg);
+  font-family: var(--psdk-font-family);
+  font-size: var(--psdk-font-size);
+  line-height: var(--psdk-line-height);
+}
+
+.error a,
+.error a:hover,
+.error a:visited {
+  color: var(--psdk-alert-color);
+}
diff --git a/examples/sdk-payment-methods/index.html b/examples/sdk-payment-methods/index.html
index 670951f..adcf615 100644
--- a/examples/sdk-payment-methods/index.html
+++ b/examples/sdk-payment-methods/index.html
@@ -1,195 +1,195 @@
-<!DOCTYPE html>
-<html lang='en'>
-<head>
-  <meta charset='UTF-8' />
-  <meta
-    name='viewport'
-    content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
-  />
-  <meta http-equiv='X-UA-Compatible' content='ie=edge' />
-  <title>Document</title>
-  <!--
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+    <!--
 Link the SDK bundle.
 NOTE: In this example, we use a local build just for convenience purposes.
 -->
-  <script src='../../dist/main.js'></script>
-  <link rel='stylesheet' href='style.css' />
-  <link rel='stylesheet' href='../../dist/style.css' />
-</head>
-
-<body>
-<div class='application'>
-  <h1>Pay Station SDK</h1>
-
-  <h1>SDK payment methods integration</h1>
-
-  <ul>
-    <li>Barzahlen</li>
-    <li>Naver</li>
-    <li>Venmo</li>
-    <li>etc</li>
-  </ul>
-
-  <!--
+    <script src="../../dist/main.js"></script>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="../../dist/style.css" />
+    <script src="../variables.js"></script>
+  </head>
+
+  <body>
+    <div class="application">
+      <h1>Pay Station SDK</h1>
+
+      <h1>SDK payment methods integration</h1>
+
+      <ul>
+        <li>Barzahlen</li>
+        <li>Naver</li>
+        <li>Venmo</li>
+        <li>etc</li>
+      </ul>
+
+      <!--
     Add the payment form messages component to show form messages.
   -->
-  <psdk-payment-form-messages></psdk-payment-form-messages>
-  <div id='form-container'></div>
-  <div id='status-container'></div>
+      <psdk-payment-form-messages></psdk-payment-form-messages>
+      <div id="form-container"></div>
+      <div id="status-container"></div>
 
-  <!--
+      <!--
     Add the finance details component to show purchase details.
   -->
-  <psdk-finance-details></psdk-finance-details>
+      <psdk-finance-details></psdk-finance-details>
 
-  <!--
+      <!--
     Add the legal component to provide links to legal documents.
   -->
-  <psdk-legal></psdk-legal>
-  <!-- Initialization script -->
-</div>
-<script>
-  if (typeof PayStationSdk === 'undefined') {
-    alert(`
-It seems SDK library is undefined.
-Please, link CDN source or create local build (recommended to test purposes only).
-        `);
-    throw new Error('PayStationSdk not found');
-  }
-  /**
-   * To learn more about creating tokens,
-   * refer to https://developers.xsolla.com/api/pay-station/operation/create-token/
-   */
-  const accessToken = '';
-
-  if (!accessToken) {
-    alert('No token provided. Please, check the documentation');
-    throw new Error('No token provided');
-  }
-
-  /**
-   * The SDK is available under the PayStationSdk namespace.
-   * To begin initialization, obtain a reference to the headlessCheckout object.
-   */
-  const { headlessCheckout } = PayStationSdk;
-
-  /**
-   * Render the submit form button.
-   * You can use <psdk-submit-button></psdk-submit-button> as well.
-   */
-  function renderSubmitButton(formElement, text = 'Pay Now') {
-    const submitButton = new PayStationSdk.SubmitButtonComponent();
-    submitButton.setAttribute('text', text);
-    formElement.append(submitButton);
-  }
-
-  async function initPayStationSdk() {
-    /**
-     * Call the `init()` method with the provided environment object.
-     * The isWebView parameter is required and indicates whether your
-     * integration type is a WebView or not.
-     * You can set sandbox payment mode with the `sandbox` parameter.
-     * Please note that this command executes asynchronously.
-     */
-    await headlessCheckout.init({
-      isWebView: false,
-      sandbox: false,
-      theme: 'default'
-    });
-
-    /**
-     * After the Payments SDK has been initialized, the next step is setting the token.
-     * To learn more about creating tokens,
-     * refer to https://developers.xsolla.com/api/pay-station/operation/create-token/
-     */
-    await headlessCheckout.setToken(accessToken);
-
-    /**
-     * Define payment method ID.
-     * To get lists of payment methods, use psdk-payment-methods.
-     * Please see `examples/select-method` for more details.
-     */
-    const sdkPaymentMethodId = 3636;
-
-    const form = await headlessCheckout.form.init({
-      paymentMethodId: sdkPaymentMethodId,
+      <psdk-legal></psdk-legal>
+      <!-- Initialization script -->
+    </div>
+    <script>
+      if (typeof PayStationSdk === 'undefined') {
+        alert(payStationSdkUndefinedError);
+        throw new Error('PayStationSdk not found');
+      }
       /**
-       * Initialize payment.
-       * returnUrl will be opened after payment is completed on external payment method side.
-       * Please see `examples/return.html` for more details.
+       * To learn more about creating tokens,
+       * refer to https://developers.xsolla.com/api/pay-station/operation/create-token/
        */
-      returnUrl: 'http://return',
-    });
+      const accessToken = '';
+
+      if (!accessToken) {
+        alert('No token provided. Please, check the documentation');
+        throw new Error('No token provided');
+      }
 
-    /**
-     * Subscribe to payment actions.
-     */
-    headlessCheckout.form.onNextAction((nextAction) => {
-      console.log('Next action', nextAction);
-      const statusContainer = document.querySelector('#status-container');
-      const formMessages = document.querySelector('psdk-payment-form-messages');
+      /**
+       * The SDK is available under the PayStationSdk namespace.
+       * To begin initialization, obtain a reference to the headlessCheckout object.
+       */
+      const { headlessCheckout } = PayStationSdk;
 
       /**
-       * Handle redirect action.
+       * Render the submit form button.
+       * You can use <psdk-submit-button></psdk-submit-button> as well.
        */
-      if (nextAction.type === 'redirect') {
+      function renderSubmitButton(formElement, text = 'Pay Now') {
+        const submitButton = new PayStationSdk.SubmitButtonComponent();
+        submitButton.setAttribute('text', text);
+        formElement.append(submitButton);
+      }
+
+      async function initPayStationSdk() {
         /**
-         * Generate the redirect URL.
+         * Call the `init()` method with the provided environment object.
+         * The isWebView parameter is required and indicates whether your
+         * integration type is a WebView or not.
+         * You can set sandbox payment mode with the `sandbox` parameter.
+         * Please note that this command executes asynchronously.
          */
-        const url = new URL(nextAction.data.redirect.redirectUrl);
-        const params = Object.entries(nextAction.data.redirect.data);
-        params.forEach((entry) => {
-          const [key, value] = entry;
-          url.searchParams.append(key, value);
+        await headlessCheckout.init({
+          isWebView: false,
+          sandbox: false,
+          theme: 'default',
         });
 
         /**
-         * Open SDK payment system.
+         * After the Payments SDK has been initialized, the next step is setting the token.
+         * To learn more about creating tokens,
+         * refer to https://developers.xsolla.com/api/pay-station/operation/create-token/
          */
-        window.location.href = url;
+        await headlessCheckout.setToken(accessToken);
 
         /**
-         * Create status component. It will be updated once the payment status changed.
-         * You can use <psdk-status></psdk-status> component as well.
+         * Define payment method ID.
+         * To get lists of payment methods, use psdk-payment-methods.
+         * Please see `examples/select-method` for more details.
          */
-        const statusComponent = new PayStationSdk.StatusComponent();
-        statusContainer.append(statusComponent);
-      }
-    });
-
-    /**
-     * Create the payment form.
-     */
-    const formElement = document.querySelector('#form-container');
-
-    /**
-     * form.fields provide available fields for selected payment method.
-     * You can filter it by the `isMandatory` flag to get required fields only.
-     */
-    const requiredFields = form.fields.filter(
-      (field) => field.isMandatory === '1'
-    );
-    console.log('Required form fields', requiredFields);
-
-    /**
-     * Render requried fields.
-     */
-    requiredFields.forEach((field) => {
-      if (field.type === 'text') {
+        const sdkPaymentMethodId = 3636;
+
+        const form = await headlessCheckout.form.init({
+          paymentMethodId: sdkPaymentMethodId,
+          /**
+           * Initialize payment.
+           * returnUrl will be opened after payment is completed on external payment method side.
+           * Please see `examples/return.html` for more details.
+           */
+          returnUrl: 'http://return',
+        });
+
         /**
-         * You can use <psdk-text name="field.name"></psdk-text> as well.
+         * Subscribe to payment actions.
          */
-        const input = new PayStationSdk.TextComponent();
-        input.setAttribute('name', field.name);
-        formElement.append(input);
-      }
-    });
+        headlessCheckout.form.onNextAction((nextAction) => {
+          console.log('Next action', nextAction);
+          const statusContainer = document.querySelector('#status-container');
+          const formMessages = document.querySelector(
+            'psdk-payment-form-messages',
+          );
+
+          /**
+           * Handle redirect action.
+           */
+          if (nextAction.type === 'redirect') {
+            /**
+             * Generate the redirect URL.
+             */
+            const url = new URL(nextAction.data.redirect.redirectUrl);
+            const params = Object.entries(nextAction.data.redirect.data);
+            params.forEach((entry) => {
+              const [key, value] = entry;
+              url.searchParams.append(key, value);
+            });
+
+            /**
+             * Open SDK payment system.
+             */
+            window.location.href = url;
+
+            /**
+             * Create status component. It will be updated once the payment status changed.
+             * You can use <psdk-status></psdk-status> component as well.
+             */
+            const statusComponent = new PayStationSdk.StatusComponent();
+            statusContainer.append(statusComponent);
+          }
+        });
 
-    renderSubmitButton(formElement);
-  }
+        /**
+         * Create the payment form.
+         */
+        const formElement = document.querySelector('#form-container');
+
+        /**
+         * form.fields provide available fields for selected payment method.
+         * You can filter it by the `isMandatory` flag to get required fields only.
+         */
+        const requiredFields = form.fields.filter(
+          (field) => field.isMandatory === '1',
+        );
+        console.log('Required form fields', requiredFields);
+
+        /**
+         * Render requried fields.
+         */
+        requiredFields.forEach((field) => {
+          if (field.type === 'text') {
+            /**
+             * You can use <psdk-text name="field.name"></psdk-text> as well.
+             */
+            const input = new PayStationSdk.TextComponent();
+            input.setAttribute('name', field.name);
+            formElement.append(input);
+          }
+        });
+
+        renderSubmitButton(formElement);
+      }
 
-  // Initialize SDK.
-  initPayStationSdk();
-</script>
-</body>
+      // Initialize SDK.
+      initPayStationSdk();
+    </script>
+  </body>
 </html>