Add PayNow to your Shopify E-Commerce Store

Accept PayNow Singapore and other supported payment methods on your Shopify store with HitPay.

You can view the checkout experience at the HitPay Shopify Test Store 

Within just a few minutes you’ll be accepting all popular modes of payment by following these simple steps:

1. Complete PayNow Setup
2. Create a HitPay Payment Gateway Client Key
3. Enable Payment Methods
4. Add HitPay to your Shopify store

Complete  PayNow Setup

Complete your PayNow setup by navigating to settings>paymentmethods>paynow in the HitPay Dashboard

Fill out the required business details and click on Save

Create a HitPay Payment Gateway Client Key

Navigate to Settings>Payment Gateway>Client Keys from the dashboard

Click on Create New Client

Give a name for the Client e.g Shopify and click on Create

You will be required to copy and paste the Client ID and Client Secret in your Shopify Payment Settings as shown below

Enable Payment Methods

Before you enable payment methods, please ensure you have setup PayNow or credit cards as payment methods

Navigate to Settings>Payment Gateway>Integrations 

Click on Add New

Select the Integration Name : Shopify, select the payment methods that you would like to enable and click on Save

Upon clicking Save, you will be able to view the payment methods enabled for your store

Add HitPay to your Shopify store

1. Click on the following link : https://www.shopify.com/login?redirect=%2Fadmin%2Fauthorize_gateway%2F1055117   and login to your Shopify store admin account
2. You will now see the below web page and click on Install payment provider

3. You will be automatically navigated to your payment settings in Shopify admin and under Alternative payment methods, click on Choose alternative payment

4. Select HitPay - Automated PayNow QR Checkouts

4. Enter your HitPay Client ID and Client Secret  (copy and paste both values from the HitPay dashboard as shown above) and click on Activate HitPay - Checkout with PayNow

Make sure you that you uncheck the test mode option

Done! You will now see HitPay as an activated payment method for your Shopify Store.

Add PayNow to your Product Page (OPTIONAL)

The PayNow logo will appear on the Shopify Product Pages.
Note: The display may differ depending on site-specific theme and layout. Please view the example below.

 

 

Configuration

Completing the below steps will position the PayNow Product Page assets on your Shopify website.

1. Copy the below snippet in italics

<script>
var timeint = setInterval(function(){
if(document.getElementsByClassName("shopify-payment-button__button").length){
//Create text node
var para = document.createElement("div");
para.id="PayNow";
var node = document.createTextNode("Checkout instantly and securely with ");
para.appendChild(node);
para.style.fontSize = "18px";
para.style.textAlign = "center";
//document.getElementById("PayNow").appendChild(para)
//document.getElementsByClassName("shopify-payment-button__button")[0].parentNode.appendChild(para)
var container = document.getElementsByClassName("shopify-payment-button__button")[0];
$(para).insertAfter(container);

//Create Image
var x = document.createElement("IMG");
x.setAttribute("src", "https://i.ibb.co/PhmSS7P/logo-Pay-Now.png");
x.setAttribute("alt", "The Pulpit Rock");
x.style.verticalAlign = 'middle';
document.getElementById("PayNow").appendChild(x);
clearInterval(timeint)
}else{
//Create text node
var para = document.createElement("div");
para.id="PayNow";
var node = document.createTextNode("Checkout instantly and securely with ");
para.appendChild(node);
para.style.fontSize = "18px"
var imgContainer = parent.document.getElementsByName("add")[0];
$(para).insertAfter(imgContainer);

//Create Image
var x = document.createElement("IMG");
x.setAttribute("src", "https://i.ibb.co/PhmSS7P/logo-Pay-Now.png");
x.setAttribute("alt", "The Pulpit Rock");
x.style.verticalAlign = 'middle';
document.getElementById("PayNow").appendChild(x);
clearInterval(timeint)
}
},3500)
</script>

2. Navigate to Shopify Admin.
3. Navigate to: Sales Channels > Online Store > Themes.

4. Navigate to ‘Actions’ > ‘Edit Code’.

5. Under the ‘Layout’ folder, click on ‘theme.liquid’.

7. Paste the copied text (Step 1), at the bottom of the ‘theme.liquid’ file after </html>

8. Click Save.

9. Navigate to the website and review the product page for PayNow assets.
   Example below

 

 

Was this article helpful?

Yes No