Magento 2.X Community Edition – Checkout Calculator Widget

Integration Guide

Objectives and Target Audience

This guide describes how to install and configure the Openpay Checkout Calculator Widget Extension to Magento 2.X Community Edition. You should have an existing Magento installation.

What is Magento Widget Extension?

Magento Widgets are Magento Extensions with a predefined set of configuration options. With the help of these Widgets, the store administrators can enrich the frontend blocks functionality. They provide great control and flexibility in creating informational and marketing content from the Magento administrator panel.

Placement of the Widget

Openpay Checkout Calculator Widget is displayed on the Checkout Page, showing all the available payments allowing the users to pay weekly or fortnightly, over available months.

Installing and Configuring Checkout Calculator Widget

Prerequisites

Before installing the Openpay module, make sure that your web server meets the following criteria:

  • There should be an existing Magento installation on your web server. The Openpay module is compatible with Magento version 2.x. The installation procedure described here has been tested on Magento version 2.x
  • Supported Web Servers: Apache / nginx
  • SSL: A valid security certificate is required to work over a secure channel (HTTPS) from the Magento Admin Panel or while submitting form data from the store‐front. Self‐signed SSL certificates are not supported
  • MySQL database with sample data
  • At least 5.6 or the later version of PHP, MySQL and web browser
  • Curl (version 7.20.0 ‐ 7.44.0)

For further details on PHP compatibility, MySQL, supported Web servers and other requirements, refer to the Magento website: https://devdocs.magento.com/#/individual-contributors.

Running Magento on a Windows Server

Magento can be run on a Windows server.

Installation Steps

To install the widget/extension, download the zip file and extract it.

Log in to the Magento admin panel.

Go to your projects root folder and follow the path : app/code/ If there is no ‘code’ folder under the ‘app’ directory, then please create it

Unzip the extension file and traverse until the ‘Openpay’ folder is found. Copy and paste that folder into the ‘code’ folder

Open a terminal window and switch to Magento root directory

Then run these commands:

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

If cache is enabled on your website, run this command: php bin/magento cache:flush

Or, you can do it manually from the admin panel by following the path: System > Tools > Cache Management > Flush Magento Cache

Check the status of the module by running this command: php bin/magento module:status. If the Openpay_Checkout Widget appears on the ‘List of enabled modules’, then the module is running properly.

Admin Setup

Log in to your Magento admin.

Navigate to Stores > Settings > Configuration

Expand ‘Openpay Widgets’ from the left panel and click on ‘Settings’

Expand Openpay Widgets Configuration > Enable Widgets > Yes > Save Config

To set up ‘Checkout Calculator Widget’, expand and fill out the fields as per your Openpay account configuration. (This information will be provided by your Openpay Ecommerce Manager or Account Manager).

Please note a Merchant can either have Deposit Percentage or Fractional Payment.

Important note:
Check with Openpay / Ecommerce Manager if your account is configured with Deposit Percentage Plan Tiers.

Configuration for Deposit Percentage Payment

This option shows percentage deposit of the product price.

  • Checkout Calculator Status: Yes
  • Deposit Percentage: (normally 20 or as provided).
  • Pay of Month: Select Pay of Months (as provided by Openpay. eg 2, 3 or 4, multiple selection could be done for deposit payment).
  • Mode of Payment: Weekly, Fortnightly or Monthly (as provided).
  • Fractional Payment: No.
  • Checkout Instruction: (Optional) Enter the text ‘Click on Place Order to securely complete your purchase. You will be directed to Openpay website.’ Or you can leave this field blank.
  • Click ‘Save Config’.

Important note:
Check with Openpay / Ecommerce Manager if your account is configured with Fractional Plan Tiers.

Configuration for Fractional Payment

This option shows equal payment breakups of the product price.

M2 Checkout Fractional Payment

  • Checkout Calculator Status: Yes
  • Deposit Percentage: Leave it blank.
  • Pay of Month: Select Pay of Months (as provided by Openpay. eg 2, 3 or 4, multiple selection could be done for fractional payment).
  • Mode of Payment: Weekly, Fortnightly or Monthly (as provided)
  • Fractional Payment: Yes
  • Checkout Instruction: (Optional) Enter the text ‘Click on Place Order to securely complete your purchase. You will be directed to Openpay website.’ Or you can leave this field blank.
  • Click ‘Save Config’.

Frontend View

‘Checkout Calculator Widget’ for Percentage Deposit
If the module is enabled from the admin and Percentage Deposit is checked the widget will be displayed as follows on the Checkout Page.

‘Checkout Calculator Widget’ for Fractional Payment
If the module is enabled from the admin and Fractional payment is checked the widget will be displayed as follows on the Checkout Page.

M2 Checkout Fractional Payment Widget

Uninstallation

Navigate to System > Configuration > (on left panel) Openpay Widget > Widget Setup > Checkout Calculator Widget > Status > Disable

Version Control Table

# Date Version Description
1 September 2017 1.1 Created widget
2 July 2019 1.2 Update the widget features
3 September 2019 1.3 New feature of fractional payment added
4 January 2020 1.4 New design updated
5 May 2020 1.5 Store level configuration added