feat(PAYMENTS-17877): update docs

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

Hide file tree

Showing 11 changed files with 802 additions and 101 deletions.
diff --git a/README.md b/README.md
@@ -398,3 +398,104 @@ Integration flow:
 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.
+
+## Google Pay integration guide
+
+> 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.
+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 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).
+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.
+
+## SDK payment methods integration guide (Barzahlen, Naver, Venmo etc)
+
+> A working example can be found [here](./examples/sdk-payment-methods).
+
+Integration flow:
+
+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. 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 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.
+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.
+
+## QR code pay integration guide
+
+> A working example can be found [here](./examples/qr-code).
+
+Integration flow:
+
+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. 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 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.
+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.
+
+## Mobile payment integration guide
+
+> A working example can be found [here](./examples/mobile-payment).
+
+Integration flow:
+
+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. 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 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.
+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.
diff --git a/examples/google-pay/index.html b/examples/google-pay/index.html
@@ -14,12 +14,13 @@
 -->
   <script src='../../dist/main.js'></script>
   <link rel='stylesheet' href='style.css' />
+  <link rel='stylesheet' href='../../dist/style.css' />
 </head>
 
 <body>
 <h1>Pay Station SDK</h1>
 
-<h1>GooglePay payment integration (only https)</h1>
+<h1>Google Pay payment integration</h1>
 
 <div id='form-container'></div>
 <div id='status-container'></div>
@@ -69,7 +70,8 @@ <h1>GooglePay payment integration (only https)</h1>
      */
     await headlessCheckout.init({
       isWebView: false,
-      sandbox: false
+      sandbox: false,
+      theme: 'default'
     });
 
     /**
@@ -88,8 +90,12 @@ <h1>GooglePay payment integration (only https)</h1>
 
     const form = await headlessCheckout.form.init({
       paymentMethodId: googlePayPaymentMethodId,
-      returnUrl:
-        'http://localhost:3000/pay-station-sdk/examples/credit-card/return.html'
+      /**
+       * Initialize payment.
+       * returnUrl will be opened after payment completed on external payment method side.
+       * Please see `examples/return.html` for more details
+       */
+      returnUrl: 'http://return',
     });
 
     /**
@@ -109,7 +115,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/google-pay/style.css b/examples/google-pay/style.css
@@ -6,102 +6,10 @@
     max-width: 700px;
 }
 
-.columns-wrapper {
-    display: flex;
-    padding-bottom: 20px;
-}
-
-.left-col,
-.right-col {
-    width: 50%;
-}
-
-/* *** *** COMMON: END *** *** */
-
-/* *** *** CONTROLS: START *** *** */
-psdk-google-pay-button iframe {
-    border: none;
-    width: inherit;
-    height: 40px;
-}
-
-psdk-text {
+#form-container {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    width: 400px;
-    height: 60px;
-    margin-bottom: 30px;
-}
-
-psdk-text iframe {
-    border: none;
-    width: inherit;
-    height: 30px;
+    align-items: center;
 }
 
-.field-error {
-    color: #f30;
-}
-
-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 *** *** */
+/* *** *** COMMON: END *** *** */