The JavaScript integration works by adding a JS code to your store's purchase completed page, which sends the customer's checkout information to ReferralCandy. This connection type tracks purchases and referrals more accurately than email integration.
Before you begin integration
JavaScript integration requires experience in programming. If you're not a developer, consult one or try email integration.
ReferralCandy doesn't provide troubleshooting support for custom code
Check that dynamic checkout variables are available on your eCommerce store's platform
For other instructions on how to integrate, refer to the setup page and the list of supported and unsupported platforms.
Set up JavaScript integration
JavaScript integration involves adding a JavaScript code generated for your ReferralCandy account to your store's purchase completed page.
Step 1: Copy the JavaScript code
On your ReferralCandy dashboard, go to Integrations > Standalone.
Choose JavaScript Integration as the connection type and click Next.
Copy the code snippet provided in the next step.
Step 2: Add the code to your store page
Go to your store's admin panel.
Paste the code snippet before the closing
</body>tag on your purchase completed page.Replace the placeholder fields with the dynamic checkout variables from your store platform:
data-fname: Customer's first name
data-lname: Customer's last name
data-email: Customer's email address
data-amount: Invoice amount
data-currency: Invoice currency (3-letter code)
data-timestamp: Purchase timestamp (UNIX time format)
data-external-reference-id: Invoice number
data-signature: Calculated from the MD5 digest of a string containing the email address, first name, invoice amount, order timestamp, and secret key, in that order separated by commas. Ensure that this is done properly, otherwise it will result in a checksum error.
Note: The MD5 signature is calculated based on the following: MD5(EMAIL,FIRST_NAME, INVOICE_AMOUNT,TIMESTAMP,ACCOUNT_SECRET)
Save the changes.
The JavaScript snippet contains two parts. The first one is an HTML div tag that contains invoice information, and the second part is a script element. The code snippet requires you to specify your API tokens.
To find your App ID and Secret Key, go to My Profile > API Tokens section.
See a sample
See a sample
Here's a worked example for your reference:
App ID: THISISMYID
Secret Key: THISISMYKEY
If you have the following invoice:
Name: John Smith
Email: john@example.com
Invoice Amount: USD$10.20
Order timestamp (in UNIX time): 1396927808
In this example, the MD5 signature is: MD5("john@example.com,John,10.20,1396927808,THISISMYKEY") = eacb54f62a2d989bed54d02f4a171e94
The corresponding div element should be:
<div id="refcandy-mint" data-app-id="THISISMYID" data-fname="John" data-lname="Smith" data-email="john@example.com" data-amount="10.20" data-currency="USD" data-timestamp="1396927808" data-locale="en" data-signature="eacb54f62a2d989bed54d02f4a171e94"></div>
Test the integration
To ensure purchases and referrals are tracked accurately, verify that the JavaScript integration works with a test order.
First, make a test purchase at your store and look for these signs:
Does the purchase show up on the dashboard? Go to your Purchases & Referrals page and find the test order. If there's no purchase on the page, it means that the system can't detect purchases on your site.
Are there checksum errors? Go to your Integrations page and view the Debug Checksum Errors section. Check for errors to help you troubleshoot. If you don't see any transaction, it means that either the purchases are being tracked correctly, or no purchase has been made.
💬 Need help? Click the chat widget on the right to start a conversation. Learn more