Merge pull request #84 from xsolla/DOC-12497-review-2

make review

README.md

@@ -415,16 +415,16 @@ Integration flow:
 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 need to render status component.
-   - The Next action with the `special_button` type means that need to render special button component (in our case it's Google Pay button).
+   - 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. 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. 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)
+## SDK payment methods integration guide (Barzahlen, Naver, Venmo, etc.)
 
 > A working example can be found [here](./examples/sdk-payment-methods).
 
@@ -440,12 +440,12 @@ Integration flow:
 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.
-   - Next action with the `redirect` type informs you that a redirect action is required on your side. You can get the URL to redirect from the action payload.
+   - 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.
 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. 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
@@ -464,14 +464,14 @@ Integration flow:
 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 URL to redirect from the action payload.
-   - The Next action with the `show_qr_code` type means that need render QR code component.
-   - The Next action with the `check_status` type means that need to render 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_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.
 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. 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
@@ -490,12 +490,12 @@ Integration flow:
 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 URL to redirect from the action payload.
-   - The Next action with the `show_mobile_payment_screen` type means that need render new submit button.
-   - The Next action with the `check_status` type means that need to render 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.
 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. 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.

examples/google-pay/index.html

@@ -26,12 +26,12 @@ <h1>Google Pay payment integration</h1>
 <div id='status-container'></div>
 
 <!--
-  Add finance details component to show purchase details
+  Add the finance details component to show purchase details.
 -->
 <psdk-finance-details></psdk-finance-details>
 
 <!--
-  Add legal component to provide links to legal documents
+  Add the legal component to provide links to legal documents.
 -->
 <psdk-legal></psdk-legal>
 <!-- Initialization script -->
@@ -45,7 +45,7 @@ <h1>Google Pay payment integration</h1>
   }
   /**
    * To learn more about creating tokens,
-   * please read https://developers.xsolla.com/api/pay-station/operation/create-token/
+   * refer to https://developers.xsolla.com/api/pay-station/operation/create-token/
    */
   const accessToken = '';
 
@@ -64,8 +64,8 @@ <h1>Google Pay payment integration</h1>
     /**
      * 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
+     * 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({
@@ -77,29 +77,29 @@ <h1>Google Pay payment integration</h1>
     /**
      * 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/
+     * 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
+     * Define payment method ID.
+     * To get lists of payment methods, use psdk-payment-methods.
+     * Refer to `examples/select-method` for more details.
      */
     const googlePayPaymentMethodId = 3431;
 
     const form = await headlessCheckout.form.init({
       paymentMethodId: googlePayPaymentMethodId,
       /**
        * Initialize payment.
-       * returnUrl will be opened after payment completed on external payment method side.
-       * Please see `examples/return.html` for more details
+       * returnUrl will be opened after payment is completed on external payment method side.
+       * Please see `examples/return.html` for more details.
        */
       returnUrl: 'http://return',
     });
 
     /**
-     * Subscribe to payment actions
+     * Subscribe to payment actions.
      */
     headlessCheckout.form.onNextAction((nextAction) => {
       console.log('Next action', nextAction);
@@ -117,7 +117,7 @@ <h1>Google Pay payment integration</h1>
 
 
       /**
-       * To render the GooglePay button, it's necessary to handle the "special_button" NextAction.
+       * To render the GooglePay button, it is necessary to handle the "special_button" NextAction.
        */
       if (nextAction.type === 'special_button') {
         /**
@@ -133,26 +133,26 @@ <h1>Google Pay payment integration</h1>
     });
 
     /**
-     * Create payment form
+     * Create a 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
+     * 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
+     * Render requried fields.
      */
     requiredFields.forEach((field) => {
       if (field.type === 'text') {
         /**
-         * You can use <psdk-text name="field.name"></psdk-text> as well
+         * You can use <psdk-text name="field.name"></psdk-text> as well.
          */
         const input = new PayStationSdk.TextComponent();
         input.setAttribute('name', field.name);
@@ -161,15 +161,15 @@ <h1>Google Pay payment integration</h1>
     });
 
     /**
-     * Render submit form button.
-     * You can use <psdk-submit-button></psdk-submit-button> as well
+     * Render the 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
+  // Initialize SDK.
   initPayStationSdk();
 </script>
 </body>

examples/mobile-payment/index.html

@@ -24,19 +24,19 @@ <h1>Pay Station SDK</h1>
   <h1>Mobile payment methods integration</h1>
 
   <!--
-    Add payment form messages component to show form messages
+    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>
 
   <!--
-    Add finance details component to show purchase details
+    Add the finance details component to show purchase details.
   -->
   <psdk-finance-details></psdk-finance-details>
 
   <!--
-    Add legal component to provide links to legal documents
+    Add the legal component to provide links to legal documents.
   -->
   <psdk-legal></psdk-legal>
   <!-- Initialization script -->
@@ -51,7 +51,7 @@ <h1>Mobile payment methods integration</h1>
   }
   /**
    * To learn more about creating tokens,
-   * please read https://developers.xsolla.com/api/pay-station/operation/create-token/
+   * refer to https://developers.xsolla.com/api/pay-station/operation/create-token/
    */
   const accessToken = '';
 
@@ -68,7 +68,7 @@ <h1>Mobile payment methods integration</h1>
 
   /**
    * Render submit form button.
-   * You can use <psdk-submit-button></psdk-submit-button> as well
+   * You can use <psdk-submit-button></psdk-submit-button> as well.
    */
   function renderSubmitButton(formElement, text = 'Pay Now') {
     const submitButton = new PayStationSdk.SubmitButtonComponent();
@@ -80,8 +80,8 @@ <h1>Mobile payment methods integration</h1>
     /**
      * 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
+     * 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({
@@ -93,14 +93,14 @@ <h1>Mobile payment methods integration</h1>
     /**
      * 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/
+     * 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
+     * Define payment method ID.
+     * To get lists of payment methods, use psdk-payment-methods.
+     * Please see `examples/select-method` for more details.
      */
     const mobilePaymentMethodId = 1738;
 
@@ -109,25 +109,25 @@ <h1>Mobile payment methods integration</h1>
       /**
        * Initialize payment.
        * returnUrl will be opened after payment completed on external payment method side.
-       * Please see `examples/return.html` for more details
+       * Please see `examples/return.html` for more details.
        */
       returnUrl: 'http://return',
     });
 
     /**
-     * Subscribe to payment actions
+     * 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');
 
       /**
-       * Handle redirect action
+       * Handle the redirect action.
        */
       if (nextAction.type === 'redirect') {
         /**
-         * Generate redirect url
+         * Generate the redirect URL.
          */
         const url = new URL(nextAction.data.redirect.redirectUrl);
         const params = Object.entries(nextAction.data.redirect.data);
@@ -142,8 +142,8 @@ <h1>Mobile payment methods integration</h1>
         window.location.href = url;
 
         /**
-         * Create status component. It will be updated once payment status changed.
-         * You can use <psdk-status></psdk-status> component as well
+         * 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);
@@ -162,17 +162,17 @@ <h1>Mobile payment methods integration</h1>
 
 
       /**
-       * To render submit button with new texts for mobile payment, it's necessary to handle the "show_mobile_payment_screen" NextAction.
+       * To render the submit button with new texts for mobile payment, it is necessary to handle the "show_mobile_payment_screen" NextAction.
        */
       if (nextAction.type === 'show_mobile_payment_screen') {
         /**
-         * Remove unnecessary form fields
+         * Remove unnecessary form fields.
          */
         formElement.innerHTML = '';
 
 
         /**
-         *  Along with the Mobile payment, a button is provided which can be used to check the status of the payment.
+         *  Along with the Mobile payment, the button is provided and can be used to check the payment status.
          *  You need to extract the text from nextAction and render a new button.
          */
         const submitButtonText = nextAction.data.submitButtonText;
@@ -182,26 +182,26 @@ <h1>Mobile payment methods integration</h1>
     });
 
     /**
-     * Create payment form
+     * Create the 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
+     * 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
+     * Render requried fields.
      */
     requiredFields.forEach((field) => {
       if (field.type === 'text') {
         /**
-         * You can use <psdk-text name="field.name"></psdk-text> as well
+         * You can use <psdk-text name="field.name"></psdk-text> as well.
          */
         const input = new PayStationSdk.TextComponent();
         input.setAttribute('name', field.name);
@@ -212,7 +212,7 @@ <h1>Mobile payment methods integration</h1>
     renderSubmitButton(formElement);
   }
 
-  // initialize sdk
+  // Initialize SDK.
   initPayStationSdk();
 </script>
 </body>