xsolla · ekireevxs · Mar 6, 2024 · Mar 5, 2024 · Mar 6, 2024
diff --git a/examples/credit-card/init-payment-flow.js b/examples/credit-card/init-payment-flow.js
@@ -160,7 +160,7 @@ function buildPaymentFlow() {
      */
     await headlessCheckout.init({
       isWebView: false,
-      sandbox: false,
+      sandbox: true,
     });
 
     /**
@@ -206,7 +206,8 @@ function buildPaymentFlow() {
       /*
        * This return URL means you start the current example on localhost with the 3000 port.
        * */
-      returnUrl: 'http://localhost:3000/return.html',
+      returnUrl:
+        'http://localhost:3000/pay-station-sdk/examples/credit-card/return.html',
     });
 
     /**

diff --git a/examples/credit-card/return.js b/examples/credit-card/return.js
@@ -16,7 +16,7 @@ function buildPaymentFlow() {
    * For more information about creating tokens,
    * refer to our documentation https://developers.xsolla.com/api/pay-station/operation/create-token/
    */
-  const accessToken = '';
+  const accessToken = new URL(window.location.href).searchParams.get('token');
 
   if (!accessToken) {
     alert('No token provided. Please, check the documentation');
@@ -32,7 +32,7 @@ function buildPaymentFlow() {
   async function initPayStationSdk() {
     await headlessCheckout.init({
       isWebView: false,
-      sandbox: false,
+      sandbox: true,
     });
 
     await headlessCheckout.setToken(accessToken);

diff --git a/examples/google-pay/index.html b/examples/google-pay/index.html
@@ -88,7 +88,8 @@ <h1>GooglePay payment integration (only https)</h1>
 
     const form = await headlessCheckout.form.init({
       paymentMethodId: googlePayPaymentMethodId,
-      returnUrl: 'https://headless-checkout-app.web.app/return'
+      returnUrl:
+        'http://localhost:3000/pay-station-sdk/examples/credit-card/return.html'
     });
 
     /**

diff --git a/examples/payment-form/index.html b/examples/payment-form/index.html
@@ -0,0 +1,134 @@
+<!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' />
+</head>
+
+<body>
+<h1>Pay Station SDK</h1>
+
+<h1>Payment Form component integration</h1>
+
+<div id='form-container'></div>
+<div id='status-container'></div>
+
+<!--
+  Add finance details component to show purchase details
+-->
+<psdk-finance-details></psdk-finance-details>
+
+<!--
+  Add legal component to provide links to legal documents
+-->
+<psdk-legal></psdk-legal>
+<!-- Initialization script -->
+<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,
+   * please read https://developers.xsolla.com/api/pay-station/operation/create-token/
+   */
+  const accessToken = '8sogGIVUx5xz1vWhRbYR7E0gUEjgN0er_lc_en';
+
+  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;
+
+  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 `sandbox` parameter
+     * Please note that this command executes asynchronously.
+     */
+    await headlessCheckout.init({
+      isWebView: false,
+      sandbox: true
+    });
+
+    /**
+     * After the Payments SDK has been initialized, the next step is setting the token.
+     * To learn more about creating tokens,
+     * please read 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 paymentMethodId = 1380;
+
+    await headlessCheckout.form.init({
+      paymentMethodId: paymentMethodId,
+      returnUrl:
+        'http://localhost:3000/pay-station-sdk/examples/credit-card/return.html'
+    });
+
+    /**
+     * Subscribe to payment actions
+     */
+    headlessCheckout.form.onNextAction((nextAction) => {
+      console.log('Next action', nextAction);
+      const statusContainer = document.querySelector('#status-container');
+
+      if (nextAction.type === 'check_status') {
+        /**
+         * Remove unnecessary form fields to render StatusComponent in the same place.
+         */
+        formElement.innerHTML = '';
+
+        const statusComponent = new PayStationSdk.StatusComponent();
+        statusContainer.append(statusComponent);
+      }
+    });
+
+    /**
+     * Create payment form
+     */
+    const formElement = document.querySelector('#form-container');
+
+    const paymentForm = new PayStationSdk.PaymentFormComponent();
+    formElement.append(paymentForm);
+
+    /**
+     * Render submit form button.
+     * You can use <psdk-submit-button></psdk-submit-button> as well
+     */
+    const submitButton = new PayStationSdk.SubmitButtonComponent();
+    submitButton.setAttribute('text', 'Pay Now');
+    formElement.append(submitButton);
+  }
+
+  // initialize sdk
+  initPayStationSdk();
+</script>
+</body>
+</html>
diff --git a/examples/payment-form/style.css b/examples/payment-form/style.css
@@ -0,0 +1,135 @@
+/* *** *** COMMON: START *** *** */
+
+.application {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 700px;
+}
+
+.columns-wrapper {
+    display: flex;
+    padding-bottom: 20px;
+}
+
+.left-col,
+.right-col {
+    width: 50%;
+}
+
+/* *** *** COMMON: END *** *** */
+
+/* *** *** CONTROLS: START *** *** */
+psdk-text,
+psdk-card-number {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 400px;
+    height: 60px;
+    margin-bottom: 30px;
+}
+
+psdk-card-number .wrapper {
+    align-items: center;
+}
+
+psdk-text iframe,
+psdk-card-number iframe {
+    border: none;
+    width: inherit;
+    height: 30px;
+}
+
+.field-error {
+    color: #f30;
+}
+
+/* Select style: the drop-down list will be hidden. */
+psdk-select button.select {
+    width: 100%;
+    max-width: 200px;
+}
+
+.dropdown-wrapper {
+    display: none;
+}
+
+/* Select style: the drop-down list will be opened. */
+.dropdown-wrapper.dropdown-opened {
+    display: block;
+}
+
+.dropdown {
+    border: 1px solid #c2c2c2;
+    border-radius: 8px;
+}
+
+.dropdown .select-options .option {
+    padding: 4px 8px;
+    cursor: pointer;
+    display: block;
+}
+
+.dropdown .select-options .option:hover {
+    background: #e8e8e8;
+}
+
+psdk-submit-button {
+    width: 100%;
+    max-width: 300px;
+    padding: 3px 6px;
+}
+
+/* *** *** CONTROLS: END *** *** */
+
+/* *** *** FINANCE DETAILS: START *** *** */
+
+psdk-finance-details {
+    display: block;
+    background: #f5f5f5;
+    margin-right: 10px;
+    padding: 10px;
+}
+
+.subtotal-row,
+.total-row {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    margin: 10px 0;
+}
+
+/* *** *** FINANCE DETAILS: END *** *** */
+
+/* *** *** STATUS: START *** *** */
+psdk-status {
+    display: flex;
+}
+
+psdk-status .image {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+psdk-status .title-text {
+    text-align: center;
+}
+/* *** *** STATUS: END *** *** */
+
+/* *** *** FOOTER LINKS: START *** *** */
+.company {
+    padding-top: 5px;
+    display: flex;
+}
+
+.company .logo {
+    margin-right: 3px;
+}
+
+.legal-links {
+    padding-top: 5px;
+    display: flex;
+    justify-content: space-between;
+}
+/* *** *** FOOTER LINKS: END *** *** */
diff --git a/examples/paypal/return.html b/examples/paypal/return.html
@@ -40,7 +40,7 @@ <h1>PayPal payment return page</h1>
        * To learn more about creating tokens,
        * please read https://developers.xsolla.com/api/pay-station/operation/create-token/
        */
-      const accessToken = '';
+      const accessToken = new URL(window.location.href).searchParams.get('token');
 
       if (!accessToken) {
         alert('No token provided. Please, check the documentation');

diff --git a/src/core/actions/is-show-fields-action.function.ts b/src/core/actions/is-show-fields-action.function.ts
@@ -0,0 +1,8 @@
+import { Action } from './action.interface';
+import { ShowFieldsAction } from './show-fields.action.type';
+
+export const isShowFieldsAction = (
+  value: Action<unknown, unknown>,
+): value is ShowFieldsAction => {
+  return value.type === 'show_fields';
+};
diff --git a/src/core/actions/next-action.interface.ts b/src/core/actions/next-action.interface.ts
@@ -6,6 +6,7 @@ import { StatusUpdatedAction } from './status-updated.action.type';
 import { ThreeDsAction } from './three-ds/three-ds.action.type';
 import { SpecialButtonAction } from './special-button.action.type';
 import { ShowQrCodeAction } from './show-qr-code.action.type';
+import { ShowMobilePaymentScreenAction } from './show-mobile-payment-screen.action.type';
 
 export type NextAction =
   | CheckStatusAction
@@ -15,4 +16,5 @@ export type NextAction =
   | RedirectAction
   | ThreeDsAction
   | SpecialButtonAction
-  | ShowQrCodeAction;
+  | ShowQrCodeAction
+  | ShowMobilePaymentScreenAction;
diff --git a/src/core/actions/show-mobile-payment-screen.action.type.ts b/src/core/actions/show-mobile-payment-screen.action.type.ts
@@ -0,0 +1,12 @@
+import { Action } from './action.interface';
+
+export type ShowMobilePaymentScreenActionType = 'show_mobile_payment_screen';
+
+export interface ShowMobilePaymentScreenActionData {
+  submitButtonText: string;
+}
+
+export type ShowMobilePaymentScreenAction = Action<
+  ShowMobilePaymentScreenActionType,
+  ShowMobilePaymentScreenActionData
+>;
diff --git a/src/core/actions/show-qr-code.action.type.ts b/src/core/actions/show-qr-code.action.type.ts
@@ -2,4 +2,11 @@ import { Action } from './action.interface';
 
 export type ShowQrCodeActionType = 'show_qr_code';
 
-export type ShowQrCodeAction = Action<ShowQrCodeActionType, null>;
+export interface ShowQrCodeActionData {
+  submitButtonText: string;
+}
+
+export type ShowQrCodeAction = Action<
+  ShowQrCodeActionType,
+  ShowQrCodeActionData
+>;
diff --git a/src/features/headless-checkout/web-components/payment-form/field-settings.interface.ts b/src/features/headless-checkout/web-components/payment-form/field-settings.interface.ts
@@ -0,0 +1,4 @@
+export interface FieldSettings {
+  name: string;
+  type: string;
+}