Magento 2

If you’re a Zip Australian Partner, please refer to the Zip AU docs found here

1. Locate Your Zip Merchant Credentials

2. Add Zip as a Payment Method

3. Configure Zip Plugin Settings

4. Zip Widget to the Product Page

5. Zip Widget to the Cart Page

6. Zip Payment Icon

7. Zip Landing Page

8. Menu Link to Zip Landing Page

Locate Your Zip Merchant Credentials

To integrate Zip into your Magento 2 website, you will need the following Zip Merchant Credentials:

– Client ID

– Client Secret

These credentials are provided upon integration, however, if you’re unable to locate these, please contact us at integrationsnz@zip.co

Add Zip as a Payment Method

– Download the Zip Extension file provided by us

– Copy and paste the Magento 2 plugin folder ‘MR’  into:

%magento2%/app/code

– Run the following commands via command prompt:

cd %magento2%

php bin/magento setup:upgrade

php bin/magento setup:staticcontent:

deploy

Configure the Plugin Settings

– In the left-hand side menu, navigate to Stores > Configuration > Sales > Payment Methods

– Find MR Zip Payment Method

– Enter the following values into the fields:

*For testing, different client credentials must be used. Please contact our team at integrationsnz@zip.co for further information

Adding the Zip Widget to the Product Page

The widget should be ready to go once the plugin has been configured correctly

If you wish to change the widget position – you can work with the layout file below:

%M2_root_path%/app/code/MR/Zip/view/frontend/layout/catalog_product_view.xml

Adding the Zip Widget to the Cart Page

The widget should be ready to go once the plugin has been configured correctly

If you wish to change the widget position – you can work with the layout file below:

%M2_root_path%/app/code/MR/Zip/view/frontend/layout/checkout_cart_index.xml

Adding the Zip Payment Icon

What does the Zip payment icon look like?

– In the Magento admin dashboard, navigate to Content > Blocks

– Select the footer block that contains your other payment icons/logos

– Select ‘HTML’ and use the following code on top of the ‘</ul>’ tag on the bottom

<a><img src=”https://static.zipmoney.com.au/assets/default/footer-tile/footer-tile-new.png” style=”height:30px;”></a>

This will add the Zip Payment Icon alongside the other accepted payment method logos.

Note: If required, you can change the value of the height style property to adjust the size of the Zip icon.

– Save your changes

Add the Zip Landing Page

Create a landing page (static web page) to educate customer about Zip, while also providing access for customers to pre-apply for their Zip account.

What does the Zip landing page look like?

– In the Magento 2 admin page, navigate to Content > Pages.

– Click ‘Add New Page‘ at the top right for the screen.

– Enable the page and enter the ‘Page Title‘ as:

Zip – Own it now, pay in 4

– Toggle the ‘Show/Hide Editor‘ button so that there are three buttons (Insert Widget, Insert Image, Insert Variable) next to it, and an empty white box under it.

– Copy the Zip Landing Page code below, and paste it into the HTML view field:

<zip-information instore="true" online="true" faqs="true"></zip-information>
<script src="https://zip.co/nz/assets/landing.js?v=1.0"></script>

– In the “Search Engine Optimisation” tab, enter the following:

URL Key: zip

Meta Title: Zip – Own it now – pay in 4

Meta Keywords: Own it now, Pay in 4, pay later, interest free, Zip

Meta Description: Own it now – pay in 4 with Zip!

– Click ‘Save’.

Add Menu Link to Zip Landing Page

Add a link to the Zip Landing Page in the header/footer menus so customers can access the page.

– In the Magento 2 admin page, navigate to Content > Blocks.

– Find the header or footer block that contains your menu.

– Select ‘HTML‘ and add the code below on top of the bottom </ul> tag:

– Click ‘Save Block‘.

<li><a href="/zip">About Zip</a></li>

If you need further assistance, please contact us at integrationsnz@zip.co