BigCommerce – Openpay Payment App

Integration Guide

Objectives and target audience

This guide describes how to install and configure Openpay Payment Plugin to BigCommerce.

You should have an existing BigCommerce account for the website.

Introduction

What is BigCommerce Payment App?

BigCommerce provides online merchants not only with a flexible shopping cart system, but also control over the look‐and‐feel of the content as well as the functionality of their online store.

BigCommerce can be fully integrated with Openpay’s online payment solution. Installing and configuring the Hosted Payment Solution module of Openpay provide a simple, secure, and convenient option to connect with Openpay’s online payment processing platform via BigCommerce.

Signing up for Openpay merchant account

In order to start taking payments through Openpay, you need to sign up and get approval for an Openpay merchant account. Once your application is approved, you can configure Openpay Hosted Payment Solution module and start taking payments.

Openpay provides a test account and users for training and testing purpose.

Installing and Configuring Openpay Payment App

Prerequisites

You should have a BigCommerce website setup.

To install/uninstall the Openpay app, you should have the Store Owner access.

Installation Steps

Using BigCommerce Admin, create an offline payment method titled ‘Openpay’ and enable it.

Navigate to Store Setup > Payments > Offline Payment Methods

Click setup on any one of the available methods listed in the Offline Payment Methods section.

In the setup section, Merchant must type ‘Openpay’ in the Display Name field. Select ‘Australia’ as the country for your store and click the ‘Save’ button.

Note that the Openpay payment method will only appear if the customer’s billing address matches the selected country.

For example, when navigating to the ‘Offline Payment Method’ section, we can choose the ‘Bank deposit’ method and modify its display name to ‘Openpay’, select Australia as the available country, and press ‘Save’.

Add OpenpayPaymentMethod.js file to the store.

In the BigCommerce backend, navigate to Storefront > Script Manager > Create a script.

Set the following fields

Name of the script: Openpay
Location on Page: Footer
Select pages where script will be added: All pages
Script type: URL or Script

URL: https://bigcommerce.openpay.com.au/lib/openpay.js
Script Contents: Use the Javascript from the above URL

Select URL as a Script type then enter the ‘Script URL’ provided by Openpay and press the ‘Save’ button.

script category

Install Openpay App

Click on the link above to install Openpay Payment Gateway App to your BigCommerce store to accept Openpay online transactions.

After you have successfully logged in, you can select the store into which you want to install the Openpay app.

Click on the ‘Install’ button.

Installation screen

Confirm access to your store and agree with the BigCommerce Terms of Service.

Confirm Install

Configuring Openpay App

Enable Openpay > Yes

Sandbox Mode > Yes

Enter the JamAuthToken provided by Openpay and click ‘Save’ to save the token.
Once the token is saved, the Min/Max order amounts will be automatically pulled from the system and displayed in their respective fields.

Use the Test JamAuthToken: 30000000000001757|b0810825-1f29-41c1-9602-d48244f1bd50

Note: Production / LIVE Jam Authorisation Token is supplied by Openpay.

For Production / LIVE mode select Sandbox Mode > No

configuration

Note: The JamAuthToken will be required if the merchant selects ‘Yes’ at the ‘Enable Openpay’ field. A warning message is shown if JamAuthToken is empty or not validated.

Customisation of Openpay Order Confirmation Page

Navigate to Storefront > Web Pages > find the order confirmation page select > Edit

DNS Switch Over

Reinstall the Openpay app if the DNS is switched over

If you plan to switch over the DNS after the Openpay app has already been installed, you would need to reinstall the app after the domain name is changed.

How does Openpay work on your site

Customers checkout their cart via Openpay.

Note: The Openpay payment method will only be available for the customer if the total cart amount is within the min-max range previously configured in the Openpay app.

Pay with Openpay payment method.

The customer will be redirected to a new Openpay page to login or sign up. Customers can select their plan of choice at this stage.

Note: If the customer clicks the ‘Return to Shop’ button from the Openpay site, they will be redirected back to their cart page where they can then edit cart and continue to checkout, or abandon the cart.

Select plan and complete payment.

Order payment will be executed when customer selects a plan tier and finalises the payment.

If the payment is successful, the customer is redirected to the ‘success page’ on the store front. A default ‘success page’ is included as part of the Openpay app. It is recommended that the merchant customise this page to align it with the success page they use for the other payment methods to ensure UI consistency.

Note: This order confirmation page should be customised.

In the backend, you will be able to see that the order status has been updated.

If a customer has an account on the BigCommerce store, they will also be able to see their order details.

 

Openpay Plan Creation

If the customer is already registered with Openpay, the following screen will be displayed:

If you do not have an Openpay account, you need to create one.

We do not send Email code on training mode please use 123456 for verification.

We do not send SMS on training mode please use 111111 for verification.

If the customer continues to login, then the following page will be displayed:

If one clicks on Submit Plan, and the plan is successful, the browser will be redirected to your site with “Your order has been placed” message.

Multi-User Support

A single store can have multiple users that can log in to assist with the day-to-day functions of managing a store or for a specific role. Each user should have their own account, with permissions limited to only their areas of responsibility.

On BigCommerce, there are a few pre-made sets of user roles, or you can select the permissions you want to grant.

Since, Openpay app provides multi-user support which allows store admins to manually authorise users – other than the store owner – to use the app. This can be done after installing the Openpay app in the store from the create/edit user page by selecting the ‘Openpay’ option in the ‘Single Click Apps’ box and save the user as shown below in the screen. This setting allows the store owner to grant individual users access to the app and makes the app available from that user’s control panel.

‘User Permissions’ page will be shown to the store owner role only, and the authorised user(s) who have loaded the Openpay app for at least once in their control panel will be listed there. From the ‘User Permissions’ page, store owner can restrict the authorised user(s) to access some or all the pages of the app in their control panel by just deselecting the checkbox. The screen given below shows that the user account i.e testuser@example.com will have access to all of the app pages so they can change the Openpay Configuration. The user can also do refunds of the Openpay Orders and  view the Refund History as well.

Revoke the User Access

From the Edit User page, store admin can revoke a user’s access to the app revoke the user’s access by deselecting the ‘Openpay’ option in the ‘Single click Apps’ box and save the user. Once the user access is revoked, they would be removed from the ‘User Permissions’ page for the store owner.

 

Demo Site

Shows the placement of all the Openpay widgets and assets. You can test an Openpay plan creation on this site.

Testing

This section provides the credentials for test user and test merchant account on Openpay Training Environment to create and check your Openpay plan.

Test User

Username: bigcommerce@xx.yy
Password: Testing123

Test Merchant / Retailers Account

https://retailer.myopenpay.com.au/training
Username: adminbigcomm
Password: Test123

BigCommerce Order Status

Please share the information below with your team who looks after orders, dispatch and refunds. 

Pending
Customer started the checkout process but did not complete it. Incomplete orders are assigned a ‘Pending’ status and can be found under the More tab in the View Orders screen.

Awaiting Fulfilment
Customer has completed the checkout process and payment has been confirmed.

Awaiting Payment
Customer has completed the checkout process, but payment has yet to be confirmed. Authorise only transactions that are not yet captured have this status.

Completed
Order has been shipped/picked up, and receipt is confirmed; client has paid for their digital product, and their file(s) are available for download.

Cancelled
Seller has cancelled an order, due to a stock inconsistency or other reasons. Stock levels will automatically update depending on your Inventory Settings. Cancelling an order will not refund the order. This status is triggered automatically when an order using an authorize-only payment gateway is voided in the control panel before capturing payment.

Partially Refunded
Seller has partially refunded the order.

Refunded
Seller has used the Refund action. A listing of all orders with a ‘Refunded’ status can be found under the More tab of the View Orders screen.

Refund Orders

Refunds can be made on Orders with order status Awaiting Fulfilment and Completed.

Note: Refunding a successful Openpay order is a two-step process, first from Openpay App and second from BigCommerce Dashboard.

From BigCommerce Dashboard navigate to Apps > Openpay and click on ‘Refund’ option on the left sidebar.

Enter Order ID and Refund Amount, then hit ‘Refund’.

Confirm refund amount on the confirmation pop-up.

Refund success message will show up like below.

‘The Order has been refunded by Openpay.’

Now click ‘Refund the order in BigCommerce’ button, this will automatically redirect you to the BigCommerce refund screen.

Note: If you are not automatically redirected to BigCommerce refund screen, navigate to ‘Orders’, find the Order ID that matches with the recently refunded on Openpay app and under ‘Action’ click on the ‘Refund’ option. 

All successful refund cases will be stored in the ‘Refunded History’.

Now refund order amount in BigCommerce Order Management.

Under Refundable items select ‘Apply an order level refund’ and input the refund amount based on the data in the ‘Refunded History’ chart on Openpay app.

Enter the same Amount to be refunded as added on Openpay app and click Continue

Note: If you see the message ‘Failed to refund. Plan status is not Active’, please contact Openpay for more support as the Openpay plan might not be complete.

 

Partial and Full Refunds

  • For Partial Refund select Apply an order level Refund
  • For Full Refund select Refund entire order

Select ‘Refund customer through third party provider’ as the refund method and click ‘Confirm Refund’ button to finish.

Note: This action will not trigger a refund action to Openpay again.

This will successfully update the order information.

Uninstalling Openpay Payment App

Navigate to Apps > My Apps > Openpay > click Uninstall

Uninstall

Remove the previously added scripts i.e. Openpay Javascript file.

Navigate to Storefront > Script Manager > Installed Scripts > look for Openpay click on the three dots on the right side > Delete

Uninstall-Delete script

Remove the previously added Offline Payment Method of Openpay.

Navigate to Store Setup > Payments > Offline Payment Methods section, disable the payment method previously set up for Openpay.

uninstall

Version Control Table

# Date Version Description
1 June 2020 1.0 Created payment plugin