Generic integration

Sample Product

Sample Product

Price: R500.00

Add this script to your html and replace {{ product.price }} with the actual price of the item: layout=peach

<script id="happypay_script" async 
    src="https://widgets.happypay.co.za/integrations/shopify_widget.js?amount={{ product.price }}&layout=peach" 
    type="application/javascript"></script>

Sample Product

Sample Product

Price: R500.00
Happy Pay Button
Zero Deposit. Only R250.00 on your next two paycheques. Interest free. Learn More.
Choose Happy Pay at checkout.

Add this script to your html and replace {{ product.price }} with the actual price of the item: (alternate layout: layout=peach2)

<script id="happypay_script" async 
    src="https://widgets.happypay.co.za/integrations/shopify_widget.js?amount={{ product.price }}&layout=peach2" 
    type="application/javascript"></script>

Platform guides

Download Complete Guide

Shopify Integration

  1. Open the theme code editor on your Shopify backend.
  2. Find & edit "main-product.liquid" (or "product-template-liquid") under 'Sections'.
  3. Locate the line "{%- when 'price' -%}", usually around line 91.
  4. Add the following script below the closing div:
<script id="happypay_script" async 
    src="https://widgets.happypay.co.za/integrations/shopify_widget.js?amount={{ product.price | money_without_currency | remove: ',' }}&layout=peach" 
    type="application/javascript"></script>

WooCommerce Integration

  1. Log in to your WordPress account.
  2. Navigate to 'WooCommerce' -> "Settings" -> "Payments".
  3. Click 'Manage' on the Happy Pay gateway.
  4. Select the option to add the widget.
  5. Save and test the widget.