XPay x XStak MIDs

If a client is onboarded with XStak MIDs:

Onboard brand on XAP
Send a welcome note/msg in the group to the client
Shopify integration (App installation, Add the script in the checkout tab, Add a manual payment method)
XAP integration (Add Shopify details and Gateway details)

Step 1: Client onboarding on XAP

curl --location 'https://api.copilot-live.xstak.com/v1/realm/create' \
--header 'Content-Type: application/json' \
--data-raw '{
    "realm": "Laam",
    "username":"admin-tools@xstak.com","email":"admin-tools@xstak.com","firstName":"Admin","lastName":"tools","realmRoles":["xpay"],"userRoles": ["xpay"]
}'

Step 2: Shopify Integration

App Installation:

Go to settings> Apps and sales channel> Click on develop app> Select create an app> Write XPay App> Add scopes

List of scopes to select:

Admin API integration:

write_order_edits, read_order_edits, write_orders, read_orders, write_themes, read_themes, write_content, read_content, write_products, read_products, read_customers

Storefront API integration:

`unauthenticated_write_checkouts, unauthenticated_read_checkouts, unauthenticated_write_customers, unauthenticated_read_customers,unauthenticated_read_product_listings`

Save the Storefront API access token, API Access token, API Secret key, and API key

Add script in the checkout tab:

Click on the Checkout tab scroll down, and Select Additional Scripts. Do not change existing ones just place your script under existing scripts:

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
const orderPaymentStatus = "{{order.financial_status }}";
const paymentStatus = orderPaymentStatus.toUpperCase();
console.log("status is : ",paymentStatus );
const orderPaidAmount = "{{ order.total_net_amount | money_with_currency }}";
let isXPay = false;
let paymentGatewayType=null;
if (window.location.pathname.indexOf('/orders') === -1) {
 {% for transaction in checkout.transactions  %}
       paymentGatewayType="{{transaction.gateway}}";
       console.log("Payment Gateway is : ",paymentGatewayType);
      if(paymentGatewayType.toLowerCase() === "credit/debit card - xpay" ){
       isXPay = true;
       }
{% endfor %}
}
else {
$(window).on('load', function(){
Shopify.Checkout.OrderStatus.addContentBox(`<div class="content-box__row content-box__row--no-border">
  <h2>Payment details</h2>
</div>
<div class="content-box__row">
  <div class="section__content">
    <div class="section__content__column section__content__column--half">
      <div class="text-container">
        <h3 class="heading-3">Payment Status</h3>
        <p><bdo dir="ltr">${paymentStatus}</bdo></p>
      </div>
    </div>
    <div class="section__content__column section__content__column--half">
      <div class="text-container">
         <h3 class="heading-3">${paymentStatus === 'PARTIALLY_REFUNDED' || paymentStatus === 'PAID' || paymentStatus === 'REFUNDED' ? 'Paid Amount' : 'Order Amount' }</h3>
        <p><bdo dir="ltr">${orderPaidAmount}</bdo></p>
      </div>
    </div>
  </div>
</div>
 `);
});
}
if(isXPay){
const XPAY_CHECKOUT_HOST = 'https://xpay-checkout.xstak.com';
const storeDomain = '{{shop.permanent_domain}}';
const gatewayInstanceId= '';
document.body.innerHTML =" ";
 document.body.innerHTML =`<html lang="en">
  <head>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
          "Segoe UI Symbol", sans-serif;
      }
      #loading-spinner {
        animation: loading-spinner 0.5s linear infinite;
      }

      @keyframes loading-spinner {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div
      class="loader"
      style="
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      "
    >
      <svg
        id="loading-spinner"
        xmlns="http://www.w3.org/2000/svg"
        width="64"
        height="64"
        viewBox="-270 364 66 66"
      >
        <g fill="#1878b9">
          <path
            d="M-237 428c-17.1 0-31-13.9-31-31s13.9-31 31-31v-2c-18.2 0-33 14.8-33 33s14.8 33 33 33 33-14.8 33-33h-2c0 17.1-13.9 31-31 31z"
          ></path>
        </g>
      </svg>
      <div
        style="
          font-size: 0.87em;
          font-weight: 500;
          line-height: 1.3em;
          margin-bottom: 0.5em;
          margin-top: 1.4em;
        "
      >
        Your order’s being processed.
      </div>
      <div
        style="
          font-size: 14px;
          line-height: 1.5em;
          margin: 0;
          color: #545454;
          display: flex;
          flex-direction: row;
        "
      >
        If you’re not automatically redirected,<a
          href="javascript:window.location.href=window.location.href"
          style="
            text-decoration: none;
            border: none;
            outline: none;
            margin-left: 0.3em;
          "
        >
          refresh this page.</a
        >
      </div>
    </div>
  </body>
</html>
`;
 window.location.href = `${XPAY_CHECKOUT_HOST}/?source=shopify&order_id={{checkout.order_id}}&domain=${storeDomain}${gatewayInstanceId ? `&gatewayInstanceId=${gatewayInstanceId}` : ''}`;
}
</script>

Add manual payment method:

Click on Payments, and scroll down to find Add custom payment method.
Enter the name of your payment method i.e. Credit/Debit Card - XPay
Add this message in additional details:

“You will be redirected to XPay Payment Gateway, where you can use any Credit/Debit card to complete your purchase securely.“

Step 3: Onboarded brand on XAP

Login to the XAP portal using Xap credentials> Set password from keycloack to login
Go to settings
Add Shopify details given below:

Step 4: Gateway Integration

If the client is onboarded with XStak MIDs we need to integrate the gateway via API by following these steps:

Use the following cURL command to add default Xstak MIDs:

curl --location 'https://xstak-pay.xstak.com/admin/default/instance/640f079b5ebabdc5da1698d3' \
--header 'authorization: Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJuWExPUS0zelVXZHY5UDZaZjYwRkdLdmtQQ2hsb3NoV0hYdGZ0aXZVYVVFIn0.eyJleHAiOjE3MDU0OTAzMjQsImlhdCI6MTcwNTQ5MDAyNCwianRpIjoiMGVhNjQzYWEtZDZlZi00YTE4LThkN2UtZTdkZjkwYzU1NmQzIiwiaXNzIjoiaHR0cHM6Ly9rZXljbG9hay1saXZlLnhzdGFrLmNvbS9hdXRoL3JlYWxtcy9hZmRkZWNjMWE3N2EyNzU2IiwiYXVkIjoiYWNjb3VudCIsInN1YiI6ImE1Y2NjMGNmLTQ0NjEtNGJiMy1hNzBiLTdkOWY4YmYzMDNjNiIsInR5cCI6IkJlYXJlciIsImF6cCI6ImNvcGlsb3QiLCJzZXNzaW9uX3N0YXRlIjoiYjkyMjViY2MtOTVkYy00NjA1LTgxM2QtMGY3YzZiYWE0M2VkIiwiYWNyIjoiMSIsInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJ4cGF5X3N1cGVyX2FkbWluIiwiZGVmYXVsdC1yb2xlcy1hZmRkZWNjMWE3N2EyNzU2Iiwib2ZmbGluZV9hY2Nlc3MiLCJ4cGF5IiwidW1hX2F1dGhvcml6YXRpb24iLCJ4c3Rhay1jb3BpbG90LWFkbWluIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiY29waWxvdCI6eyJyb2xlcyI6WyJ2aWV3X2Rhc2hib2FyZCIsInZpZXdfdXNlcnMiLCJlZGl0X3VzZXJzIiwiYWRkX3VzZXJzIl19LCJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6ImVtYWlsIHByb2ZpbGUiLCJzaWQiOiJiOTIyNWJjYy05NWRjLTQ2MDUtODEzZC0wZjdjNmJhYTQzZWQiLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsIm5hbWUiOiJub3JlZW4gYXllc2hhIiwicHJlZmVycmVkX3VzZXJuYW1lIjoibm9yZWVuLmF5ZXNoYUB4c3Rhay5jb20iLCJnaXZlbl9uYW1lIjoibm9yZWVuIiwiZmFtaWx5X25hbWUiOiJheWVzaGEiLCJlbWFpbCI6Im5vcmVlbi5heWVzaGFAeHN0YWsuY29tIn0.fKECghW1bA5qehPZImQWYJc1HtZaVVwVTBqvFc5efe2t9QUGzUksPLHC0eehqjqwYae36xH1cqro5Eahb93gtfTEggIVM5jFXxXL9120B6KdlDPjaTk3C6L3y28pozQOoe7axwdrboaM3mwtcv3CxHLKl0kOMMRJvWFF4IR_NrGRMIhee9XnQsmM4hWpdauNM3mHxwpcOonHa4KXtIqRpSnRQjZuablvJKJBneatpk6YajZbPWOpIwy6sWfoc-wDaBrCUAvnuUJ6_oaSUT-kz4g8ipV_RBXbZ1apOkJX0Qp7lI0NTKMdYAxBEwjBgp4tgtu28nuD5Xkd3TZz29CVlg' \
--header 'Content-Type: application/json' \
--data '{
    "name": "BAFL",
    "gateway": {
        "merchant": "HEADLESSECOM",
        "type": "bank-alfalah",
        "username": "merchant.HEADLESSECOM",
        "password": "6a751e45a67f5466730517aa60ab797f",
        "webhook_secret": "20344A8333F42F8D8537BC0FEFBCC08D"
    },
    "mode": "regular-payments"
}'

Updated cURL:

curl --location 'https://xstak-pay.xstak.com/admin/default/instance/640f079b5ebabdc5da1698d3' \
--header 'authorization: Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJuWExPUS0zelVXZHY5UDZaZjYwRkdLdmtQQ2hsb3NoV0hYdGZ0aXZVYVVFIn0.eyJleHAiOjE3MDU0OTAzMjQsImlhdCI6MTcwNTQ5MDAyNCwianRpIjoiMGVhNjQzYWEtZDZlZi00YTE4LThkN2UtZTdkZjkwYzU1NmQzIiwiaXNzIjoiaHR0cHM6Ly9rZXljbG9hay1saXZlLnhzdGFrLmNvbS9hdXRoL3JlYWxtcy9hZmRkZWNjMWE3N2EyNzU2IiwiYXVkIjoiYWNjb3VudCIsInN1YiI6ImE1Y2NjMGNmLTQ0NjEtNGJiMy1hNzBiLTdkOWY4YmYzMDNjNiIsInR5cCI6IkJlYXJlciIsImF6cCI6ImNvcGlsb3QiLCJzZXNzaW9uX3N0YXRlIjoiYjkyMjViY2MtOTVkYy00NjA1LTgxM2QtMGY3YzZiYWE0M2VkIiwiYWNyIjoiMSIsInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJ4cGF5X3N1cGVyX2FkbWluIiwiZGVmYXVsdC1yb2xlcy1hZmRkZWNjMWE3N2EyNzU2Iiwib2ZmbGluZV9hY2Nlc3MiLCJ4cGF5IiwidW1hX2F1dGhvcml6YXRpb24iLCJ4c3Rhay1jb3BpbG90LWFkbWluIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiY29waWxvdCI6eyJyb2xlcyI6WyJ2aWV3X2Rhc2hib2FyZCIsInZpZXdfdXNlcnMiLCJlZGl0X3VzZXJzIiwiYWRkX3VzZXJzIl19LCJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6ImVtYWlsIHByb2ZpbGUiLCJzaWQiOiJiOTIyNWJjYy05NWRjLTQ2MDUtODEzZC0wZjdjNmJhYTQzZWQiLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsIm5hbWUiOiJub3JlZW4gYXllc2hhIiwicHJlZmVycmVkX3VzZXJuYW1lIjoibm9yZWVuLmF5ZXNoYUB4c3Rhay5jb20iLCJnaXZlbl9uYW1lIjoibm9yZWVuIiwiZmFtaWx5X25hbWUiOiJheWVzaGEiLCJlbWFpbCI6Im5vcmVlbi5heWVzaGFAeHN0YWsuY29tIn0.fKECghW1bA5qehPZImQWYJc1HtZaVVwVTBqvFc5efe2t9QUGzUksPLHC0eehqjqwYae36xH1cqro5Eahb93gtfTEggIVM5jFXxXL9120B6KdlDPjaTk3C6L3y28pozQOoe7axwdrboaM3mwtcv3CxHLKl0kOMMRJvWFF4IR_NrGRMIhee9XnQsmM4hWpdauNM3mHxwpcOonHa4KXtIqRpSnRQjZuablvJKJBneatpk6YajZbPWOpIwy6sWfoc-wDaBrCUAvnuUJ6_oaSUT-kz4g8ipV_RBXbZ1apOkJX0Qp7lI0NTKMdYAxBEwjBgp4tgtu28nuD5Xkd3TZz29CVlg' \
--header 'Content-Type: application/json' \
--data '{
    "name": "BAFL",
    "gateway": {
        "merchant": "HEADLESSECOM",
        "type": "bank-alfalah",
        "username": "merchant.HEADLESSECOM",
        "password": "6a751e45a67f5466730517aa60ab797f",
        "webhook_secret": "20344A8333F42F8D8537BC0FEFBCC08D"
    },
    "mode": "regular-payments",
"payment_method": "card"
}'

Import this cURL on Postman
Copy the store ID from the settings and paste it on Postman (update store ID in request param)
To get an access token please use the below curl:

curl --location 'https://api.copilot-live.xstak.com/v1/user/login' \
--header 'Content-Type: application/json' \
--data-raw '{
    "username": "noreen.ayesha@xstak.com",
    "password": "Admin12345@",
    "realm": "afddecc1a77a2756"
}'

Replace the details in the Body with the XAP credentials.
Then hit the cURL an access token will generate
Copy the access token
In the previous cURL in the Header write Bearer add the space and paste the copied access token

Step 5: User creation

Ask clients to share email addresses via which they will be accessing the XPay portal
Create accounts via user management

Step 6: Placed test order

Now place the test order to test the whole flow
You can ask the client to share the URL of a test product with a price of Rs#10 (no shipping charges) and with some inventory. Place a test order on it.
Enable XPay from Payment method
After selecting it you will be redirected to this page:

XStak - Delivery Team