To add HitPay to your Wix site, please ensure the following pre-requisites have been completed before proceeding with the integration.
1. Create an account on HitPay and enable payment methods
2. Enable Manual payments in your store
Please refer to the following help article on how you can complete steps 1 and 2 above.
Add HitPay to your Wix Site
If you require HitPay's assistance to add HitPay to your Wix store, you are required to invite HitPay as a contributor on Wix. Please follow below instructions only if you are comfortable adding code to your Wix store.
The following steps are involved in adding HitPay to your Wix Site
- Enable Wix Corvid
- Create a new .js file in 'Public' called 'hit-pay.js' and copy/paste code.
- Navigate to the Thank You Page in the editor.
- Insert the Checkout button image onto the page
- Copy the Page Code from the Thank You Page of this site, to the new site and amend/check Thank You Page ID, Image ID and Store ID are correct.
Enable Wix Corvid
Click on Site Actions from the Wix Store Dashboard and click on Edit Site
Click on Dev Mode from top menu and click on Turn On Dev Mode
Create a new .js file in 'Public' called 'hit-pay.js' and copy/paste code
Locate the Public folder from the left Site Structure column
Rename the public folder as hit-pay.js
Copy and paste the below code in the hit-pay.js file
export async function setupHitPay($thankYouPage, $hitPayImage, hitPayStoreID){
// get the order from the Thank You Page
const order = await $thankYouPage.getOrder();
// create the HitPay link
const hitPayLink = getHitPayLinkFromOrder(order, hitPayStoreID);
// assign the HitPay link to the image/button
$hitPayImage.link = hitPayLink;
}
function getHitPayLinkFromOrder(order, hitPayStoreID){
// get the amount, currency and order number from the order
const amount = order.totals.total;
const currency = order.currency;
const orderNumber = order.number;
const userEmail = order.buyerInfo.email;
// return the HitPay link built from the order details
return getHitPayLink(amount, currency, orderNumber, userEmail, hitPayStoreID);
}
function getHitPayLink(amount, currency, orderNumber, userEmail, hitPayStoreID){
// convert the order amount to cents as HitPay requires this
const amountInCents = amount * 100;
// build the HitPay link
return "https://securecheckout.hit-pay.com/payment-request/" + hitPayStoreID
+ "/?amt=" + amountInCents
+ "¤cy=" + currency
+ "&email=" + encodeURIComponent(userEmail)
+ "&reference_number=" + orderNumber;
}
Click on the Save button on the top right
Navigate to the Thank You Page in the editor
Insert the Checkout button image onto the page
Save the below checkout button image to your device
If you have only enabled PayNow as a payment method on HitPay, please save the below image to your device
Click on the Add button as shown below
Click on Image and Select My Image Uploads
Click on Upload Media
Select button image and click on Add to Page
Place Checkout Button in Footer
Select the Thank You Page section and click on Settings as shown below
Click on Text and under Subtitle, please type the text Scroll down to complete payment
Copy the Page Code from the Thank You Page of this site, to the new site and amend/check Thank You Page ID, Image ID and Store ID are correct.
Locate the Thank You Page Code section as highlighted below
Copy/Paste the below code
import {setupHitPay} from 'public/hit-pay.js'
$w.onReady(function () {
const $thankYouPage = $w("#thankYouPage1"); // change this to the ID of your thank you page element
const $hitPayImage = $w("#image1"); // change this to the ID of your hit pay payment image element
const hitPayStoreID = "@hitpayuserid"; // change this to your unique HitPay user ID
setupHitPay($thankYouPage, $hitPayImage, hitPayStoreID);
});
Please note the hitpayuserid is the Display Name which can be found in the HitPay dashboard under Settings > Store > Business Settings
The hitpayuser id = HitCommerce in the example below
Click on Save and you can click on Preview to see the changes live
