Developer Guide > Ecommerce Partners & Platforms > Shopify

Guide to activate Openpay Payment Gateway & Widgets in Shopify.

Est. integration time:

10 mins

Supported countries:

Australia

How can I add Openpay to my Shopify store?

Activate & Configure Openpay payment app

A complete step-by-step guide on how to activate and configure Openpay app.

Add & Configure Openpay Widgets

By adding all informative assets helps promote the use of Openpay throughout your site or store.

Openpay is live!

Sign up for a live account and you're all set to take payments.


  What do you need before you can start?
  • AuthToken (Openpay Username & Password)
  • Plan Tiers
  • Store owner access to your Shopify backend

For production AuthToken, please contact your Openpay account manager.

🚧

Using Manual Capture?

Please contact Openpay if your shop system is set up with manual / delayed capture so we can configure your account for delayed capture.

Step 1- Activate & Configure Openpay Payment App

👍

  1. Click on Add app
  • Select your store if you have multiple stores setup
  1. Click on Install App
  2. Once installed, you will see the below Openpay Payment Settings screen:
  3. Configure as follows:
  • In Mode, select Production for live site else Sandbox for test site.
  • Select Australia as your Region.
  • Enter Openpay Username, Password and Plan Tiers - these are different for prod and sandbox environment. These are provided in the email from Openpay.
  • Click on Get Min/Max Values, this will fetch the min/max from Openpay.
  • Save the settings.
  1. Activate Openpay:
  • Untick Enable test mode if using Openpay in Production mode
  • Click on Activate Openpay
  • Openpay is now enabled in your checkout.
15671567

🚧

Tip

To go back to the Openpay App Manage page, in your store admin navigate to Settings > Payments > Openpay > Manage

📘

Do you use manual capture?

Click here to learn more about Manual Capture.




Step 2- Add & Configure Openpay Widgets

🚧

The new Openpay Widget can integrate with Online Store 2.0 themes.

If you are not on Online Store 2.0 theme , please reach out to our team so we can help you with installing a custom widget on you store.

Install jQuery

📘

Why do I need to install jQuery?

jQuery is required for Openpay Widgets to work. You may already have it installed in your store. If not, it is very simple to do so. Please follow the steps below:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Current theme you want to edit, and then click Actions > Edit code.
  3. Under the Layout header, click into the theme.liquid file.
  4. Find the closing </head> tag in the code. On a new line above the closing tag, paste the following code and Save the file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
15111511

Let's add the widgets now.

Once you have installed the “Openpay” app to your store. Login to the store admin and configure the Openpay Widgets using the following instructions.

  • In left menu select Online store > Themes. Click on Customize.
10721072

Info Widget

👍

  • Select Home page template in the Templates dropdown before adding the Info widget.

  • Under Home page section in the left sidebar, click on Add Section. Search for the word Openpay and then select Openpay – Info Widget to add it under Apps .

  • Click on Openpay - Info Widget to configure the widget.

  • You will see the preview of the widget on the right hand side of the theme editor/layout.

  • In the config, in Show Info Belt Widget, select Enable .

  • Click on Save.

10721072

Product Page Widget

👍

  • Select the Products > Default Product template in the Templates dropdown to add the Openpay – Product Widget.
  • Click on Add block and search for word Openpay to select the Product widget.
  • Drag and drop the the Product Widget block under Product Information in the left sidebar to display it under the price of the product on the store front.
  • To configure the Product Widget, click on Openpay – Product Widget block.
  • In config, in Show Product Page Widget, select Enable
  • Configure the Widget properties as required and click on Save to save the settings.
  • You will see the preview of the Product Widget on the righ side layout
10721072

Cart Widget

👍

  • Select the Cart template in the Templates dropdown to add the Openpay – Cart Widget on the cart view.
  • Click on Add block and search for word Openpay and select the Cart Widget.
  • Click on Openpay - Cart Widget app, in config Enable Show Cart Page Widget.
  • Under Subtotal in the left sidebar drag the Cart Widget app to display under the cart subtotal on store front.
  • After configuring, click Save to save the widgets settings.
  • You will see the preview of the widget on the right side of the layout.

🚧

Cart Widget Tip

If you do not see the Cart Widget in the preview after enabling it, open your store front in a new tab, add an item to the cart and then come back to this page and refresh it.

10721072

Test Mode

If you would like to test in you staging site then you can Turn on test mode in the Payment App. Use the below AuthToken and customer for testing

📘

Test Credentials


Test AuthToken:
Openpay Username: 3-2022
Openpay Password: 12F274AC-D069-4475-BA48-A194A3039728

Test User for creating a plan on Openpay:
Username: [email protected]
Password: Admin1234

Openpay Retailer Portal:
Url: https://retailer.myopenpay.com.au/training

Admin Username: AdminRetailer
Password: Test1234

Standard Username: UserRetailer (Use this user for refunds)
Password: Test1234

Do NOT reset these passwords.


Processing a refund

i. Login to your Shopify admin dashboard and navigate to Orders
ii. Select the order you want to refund and click on Refund
iii. Add the reason for refund and on the right-hand side, enter Refund Amount and click on Refund :

14471447

iv. Refresh your Order timeline, allow a few seconds and you will see the Refund Confirmation :


Did this page help you?