How to on-board after gathering requirements from client?
- Noreen Ayesha
- Afrashum Waseem (Unlicensed)
We need to demand from client the following access:
Please create staff account on this email admin-tools@xstak.com and also make sure to give permissions for the following:
To create private/custom app
To add manual payment method
To select API scopes while adding custom app.
Once client confirms that access is provided, go to the Gmail and accept the invite
Once you accept the invite you can access the store by typing the store name /admin in browser and it will redirect to their shopify admin page. Below is the link to Shopify Partner store.
You will be seeing this screen:
The store for which you will be creating Xpay app will be appearing in list of stores. For example here Generation store is visible.
1) How to ask for Collaborator Access:
(Not required for XPay installation as we ask the client to create a staff account on admin-tools@xstak.com)
2) How to install XPay App:
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
3) On-Board the brand on XAP
You may ask the respective person to onboard the brand on XAP for XPay. (Ali Raza currently)
Once it is done you will receive account activation email on the email you have provided while onboarding the brand
Activate your account and login to XPay through your credentials
Enter Domain name which should match with shopify URL i.e. http://zara-aslam.myshopify.com (It shouldn’t contain “https“)
Enter Access token and API secret key which you fetched while app installation.
Enter BAFL MIDs, if provided by the client, if we are using XStak MIDs than “skip” next screen
Also disable Hosted Checkout on XAP Portal> Settings> Store Information
In case of client MIDs use the provide Merchant ID and API password.
For Username, we have a format (merchant.MerchantID.)
Bank Alfalah Portal Link :
Add login details provided by the Client (Merchant ID, Operator ID and Password)
Wee need to fetch Webhook secret from BAFL portal
For Webhook Secret go to the Bank Alfalah portal and Click on ADMIN tab.
Click on WEBHOOK NOTIFICATIONS > ENABLE WEBHOOK > GENERATE NEW SECRET > SAVE
Copy the generated secret key and place in Webhook Secret on XPay portal
Go to Shopify store.
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.“
Click on CHECKOUTS and ACCOUNTS, scroll down, and Select Additional Scripts. Do not change existing ones just place your script under existing scripts.
New updated script:
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
const requestSource = "{{order.financial_status }}";
console.log("status is : ",requestSource );
let isXPay = false;
let paymentGatewayType=null;
if (window.location.pathname.indexOf('/orders') === -1) {
console.log("insode status is : ",requestSource );
{% 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="text-container">
<h2 class="heading-2 os-step__title">Payment Status</h2>
<p><bdo dir="ltr">${requestSource.toUpperCase()}</bdo></p>
</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>
Enter this script there: Now no need to edit the domain URL
Also copy the name of Payment method which you entered while creating Custom payment method and place in Line 8 of script i.e. “Transaction.gateway” i.e. Credit/Debit Card - XPay.
Old script:
<script> {% if checkout.order_id != null %} console.log("success") {{ checkout.order_id }} console.log( "{{shop.domain}}" ) {% for transaction in checkout.transactions %} console.log("{{ transaction.gateway }}"); {% if transaction.gateway == "Credit/Debit Card - XPay" %} console.log("3rd party gateway"); const HOST = 'https://xstak-pay.xstak.com'; const DOMAIN = 'generation-clothingpk.myshopify.com'; 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 = `${HOST}/checkout?shop=${DOMAIN}&order_id={{checkout.order_id}}` console.log({{ checkout.order_id }}) {% endif %} {% endfor %} {% endif %} </script>Now place the test order and on checkout screen you will be seeing XPay payment method
You can ask the client to create a test product with some minimum price say RS#10 and some inventory. And get its URL. Place a test order on it.
Enable XPay from Payment method
After selecting it you will be redirected to this page:
If you cancel the transaction it will be cancelled
You must have to complete the transactions within time interval showing on top right corner, else transaction will fail.
Please find below the video for whole process:
In case of new-onboarding ask merchant to change email sent to clients after order placement to :
we should ask the merchants to change the email to the following once we onboard them.
"Dear Customer
Thank you for your purchase!
Your order #1234 has been received and is awaiting confirmation. We will deliver your order once it is confirmed."