feat(PAYMENTS-17877): update docs

xsolla · Apr 2, 2024 · cbc2353 · cbc2353
1 parent 4f508ba
commit cbc2353
Show file tree

Hide file tree

Showing 5 changed files with 604 additions and 0 deletions.
diff --git a/examples/google-pay/index.html b/examples/google-pay/index.html
@@ -109,7 +109,14 @@ <h1>GooglePay payment integration (only https)</h1>
         statusContainer.append(statusComponent);
       }
 
+
+      /**
+       * To render the GooglePay button, it's necessary to handle the "special_button" NextAction.
+       */
       if (nextAction.type === 'special_button') {
+        /**
+         * Remove unnecessary form fields to render GooglePayButtonComponent in the same place.
+         */
         formElement.innerHTML = '';
 
         if (nextAction.data.buttonName === 'google-pay') {

diff --git a/examples/qr-code/index.html b/examples/qr-code/index.html
@@ -0,0 +1,183 @@
+<!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>
+<div class='application'>
+  <h1>Pay Station SDK</h1>
+
+  <h1>Qr code payment methods 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 -->
+</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,
+   * please read 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 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 `sandbox` parameter
+     * Please note that this command executes asynchronously.
+     */
+    await headlessCheckout.init({
+      isWebView: false,
+      sandbox: false
+    });
+
+    /**
+     * 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 alipayPaymentMethodId = 3623;
+
+    const form = await headlessCheckout.form.init({
+      paymentMethodId: alipayPaymentMethodId,
+      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);
+      }
+
+
+      /**
+       * To render the QR code component, it's necessary to handle the "show_qr_code" NextAction.
+       */
+      if (nextAction.type === 'show_qr_code') {
+        /**
+         * Remove unnecessary form fields to render QrCodeComponent in the same place.
+         */
+        formElement.innerHTML = '';
+
+        const qrCodeComponent = new PayStationSdk.QrCodeComponent();
+        formElement.append(qrCodeComponent);
+
+
+        /**
+         *  Along with the QR code, a button is provided which can be used to check the status of the payment.
+         *  You need to extract the text from nextAction and render a new button.
+         */
+        const submitButtonText = nextAction.data.submitButtonText;
+
+        renderSubmitButton(formElement, submitButtonText);
+      }
+    });
+
+    /**
+     * Create payment form
+     */
+    const formElement = document.querySelector('#form-container');
+
+    /**
+     * form.fields provide available fields for selected payment method.
+     * You can filter it by `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>
+</html>
diff --git a/examples/qr-code/style.css b/examples/qr-code/style.css
@@ -0,0 +1,109 @@
+/* *** *** COMMON: START *** *** */
+
+.application {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 700px;
+}
+
+.columns-wrapper {
+    display: flex;
+    padding-bottom: 20px;
+}
+
+.left-col,
+.right-col {
+    width: 50%;
+}
+
+#form-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* *** *** COMMON: END *** *** */
+
+/* *** *** CONTROLS: START *** *** */
+psdk-text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    height: 60px;
+    margin-bottom: 30px;
+}
+
+psdk-text iframe {
+    border: none;
+    width: inherit;
+    height: 30px;
+}
+
+.field-error {
+    color: #f30;
+}
+
+psdk-submit-button {
+    padding: 3px 6px;
+}
+
+psdk-qr-code iframe {
+    width: 100%;
+    border: none;
+}
+
+/* *** *** 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 *** *** */