XPay x PayFast MIDs
- Afrashum Waseem (Unlicensed)
- Delivery Team (Deactivated)
If a client is onboarded with PayFast MIDs:
Onboard brand on XAP
Send a welcome note/msg in the group to the client
Ask the client for these MIDs details in the welcome note (Merchant ID, Merchant Key)
Shopify integration (App installation, Add the script in the checkout tab, Add a manual payment method)
XAP integration/ Onboarded brand on XAP(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
Add details on the XAP portal
Go to settings> gateway
Click on Add instance
Select PayFast in Acquirer and add these details:
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:
