1 of 7

Payment Plugins

Payment PlugIns

Payment Integration with e-Comm Open Systems

Word Press PlugIns

PlugIn Setup and Payment Process Flow

Download of PlugIn Installation kit from the following URL

Installation of Plugin in WordPress

Click Plugins --> Add New

The USD parameters should be filled up if the merchant has a need for USD transactions, otherwise ignore them.
Merchant Code is needed to make the payment ONLY in the WeChat browser.

The USD parameters should be filled up if the merchant has a need for USD transactions, otherwise ignore them.
Merchant Code is needed to make the Alipay H5 payment in the mobile browser.

OpenCart PlugIns

We support WeChat Pay, Alipay and UnionPay

PlugIns Setup and Payment Process Flow

The Download of PlugIn Installation File

Download the above plugin zipped installation file and unzip it as below,

After upload, you can go to your OpenCart Admin web site, navigating to Extensions -> Extensions -> Choose the extension type -> Payments, you can find these two OTTPAY payment methods: OTT Pay QR Code Payment for WeChat Pay, OTT Pay QR Code Payment For Alipay, OTT Pay QR Code Payment For Union Pay.
Click the green button to Install. After installation, the green button will become red called Uninstall and the Edit button will be enabled.

Merchant ID: provided by OTTPAY
Merchant Key: provided by OTTPAY
Merchant Code *: provided by OTTPAY
Operator ID: provided by OTTPAY
Status: select Enabled
Debug Mode: select Disabled
Default order status: select Pending
Finished order status: select Complete
Sort order: 1

* Merchant Code is needed to make the payment ONLY in the WeChat browser.

If PC Browser, it will generate a payment QR code for payment
If Mobile Browser, such as Safari or Chrome, it will activate only Alipay eWallet available for payment
If WeChat browser, it automatically activate the eWallet according to the payment method selected by the customer

If PC Browser, it will pop up a UnionPay Secure Pay Webpage as below,
If Mobile Browser, it will activate Union Pay Express Pay eWallet if installed in your mobile.
If WeChat browser, it will activate Union Pay Express Pay eWallet if installed in your mobile.

Magento PlugIns

Support both of PC-Browser and Mobile-Browser/WebChat-Browser on Alipay and WeChat Pay

Plugins for Magento 2 Setup

Download of PlugIn Installation kit from the following URL

As a known issue of Magento Payment Process as per the following KB,

https://github.com/PayboxByVerifone/Magento-2.3.x/issues/4

This issue is with Magento system from 2.3.3 to 2.3.5 latest version. it is suggested to apply the fix of issue if you are using the above system versions.

Note: OTT plugin package current version 2 provided the fix resolution already, you need not apply the fix anymore.

Here is our approach to fix the issue, just for reference. Magento Issue Fix

Installation of the Plugins

Go to the root directory of the Magento website, run the following command:

sudo php bin/magento module:status

Then you will see Ottpay_Alipay and Ottpay_WeChat are not activated.

sudo php bin/magento module:enable Ottpay_Alipay Ottpay_Wechat

[ryanl@localhost magento]$pwd
/var/www/magento
[ryanl@localhost magento]$ sudo php bin/magento module:enable Ottpay_Alipay Ottpay_Wechat

The following modules have been enabled:
- Ottpay_Alipay
- Ottpay_Wechat

To make sure that the enabled modules are properly registered, run 'setup:upgrade'.
Cache cleared successfully.
Generated classes cleared successfully. Please run the 'setup:di:compile' command to generate classes.
Info: Some modules might require static view files to be cleared. To do this, run 'module:enable' with the --clear-static-content option to clear them.

sudo php bin/magento setup:upgrade

[ryanl@localhost magento]$pwd
/var/www/magento
[ryanl@localhost magento]$ sudo php bin/magento setup:upgrade

Cache cleared successfully
File system cleanup:
/var/www/magento/generated/code/Composer
/var/www/magento/generated/code/Dotdigitalgroup
/var/www/magento/generated/code/MSP
/var/www/magento/generated/code/Magento
/var/www/magento/generated/code/Symfony
/var/www/magento/generated/code/Yotpo
The directory '/var/www/magento/generated/metadata/' doesn't exist - skipping cleanup
/var/www/magento/pub/static/adminhtml
/var/www/magento/pub/static/deployed_version.txt
/var/www/magento/pub/static/frontend
/var/www/magento/var/view_preprocessed/pub
Updating modules:
Schema creation/updates:
Module 'Magento_AdminAnalytics':
Module 'Magento_Store':
Module 'Magento_AdobeIms':
Module 'Magento_AdobeImsApi':
Module 'Magento_AdobeStockAdminUi':
Module 'Magento_MediaGallery':
Module 'Magento_AdobeStockAssetApi':
Module 'Magento_AdobeStockClient':
Module 'Magento_AdobeStockClientApi':
Module 'Magento_AdobeStockImage':


Running schema recurring...


Module 'Amazon_Core':
Module 'Amazon_Login':
Module 'Amazon_Payment':
Module 'Dotdigitalgroup_Email':
Module 'Dotdigitalgroup_Chat':
Module 'Klarna_Core':
Module 'Klarna_Ordermanagement':
Module 'Klarna_Kp':
Module 'Magento_PaypalReCaptcha':
Module 'MSP_TwoFactorAuth':
Module 'Ottpay_Alipay':
Module 'Ottpay_Wechat':
Module 'Temando_ShippingRemover':
Module 'Vertex_Tax':
Module 'Vertex_AddressValidation':
Module 'Yotpo_Yotpo':
Enabling caches:
Current status:
Array
(
    [layout] => 1
    [block_html] => 1
    [full_page] => 1
)

Magento Issue Fix

for version 2.3.3 to version 2.3.5, here is our approach to fix the issue, just for reference.

Modification of select-payment-method.js

Go to Magento path, find the file:

vendor/magento/module-checkout/view/frontend/web/js/action/select-payment-method.js

Open select-payment-method.js and Change file as below,

 vi /var/www/magento/vendor/magento/module-checkout/view/frontend/web/js/action/select-payment-method.js

Original:

define([
    '../model/quote'
], function (quote) {
    'use strict';

    return function (paymentMethod) {
        if (paymentMethod) {
            paymentMethod.__disableTmpl = {
                title: true
            };
        }
        quote.paymentMethod(paymentMethod);
    };
});

New:

define([
    '../model/quote'
], function (quote) {
    'use strict';

    return function (paymentMethod) {
        /*if (paymentMethod) {
            paymentMethod.__disableTmpl = {
                title: true
            };
        }*/
        quote.paymentMethod(paymentMethod);
    };
});

$ sudo php bin/magento setup:upgrade
$ sudo php bin/magento setup:di:compile

$ sudo systemctl restart httpd

Plugin for Magento 1 setup

Plugin for Magento 1

Installation of the Plugin

Unzip the plugin file and copy the inner files to root of Magento folder

ECSHOP PlugIns

Support both of PC-Browser and Mobile-Browser/WebChat-Browser on Alipay and WeChat Pay

PlugIn Download and Installation

Download of PlugIn Installation Kit from the following URL

Installation of the Plugin

Unzip the plugin file and copy the inner files to root of ECSHOP folder

http://localhost:8090/ecshopjcw/index.php

OTT-API-URL =  http://qrpay.ottpay.com/h5Pay?
Callbackup(Example) = https://ezshops.ott.ca/wxnativeOTTPAY_callback.php

OTT-API-URL =  https://frontapi.ottpay.com/processV2
Callbackup(Example) = https://ezshops.ott.ca/mobile/AliH5OTTPAY_callback.php

http://localhost:8090/mobile/ecshopjcw/index.php

OTT-API-URL =  https://frontapi.ottpay.com/processV2
Callbackup(Example) = https://ezshops.ott.ca/mobile/wxpayOTTPAY_h5_callback.php

OTT-API-URL =  https://frontapi.ottpay.com/processV2
Callbackup(Example) = https://ezshops.ott.ca/AliQrOTTPAY_callback.php

OpenCart PlugIns

We support WeChat Pay, Alipay and UnionPay

PlugIns Setup and Payment Process Flow

The Download of PlugIn Installation File

Download the above plugin zipped installation file and unzip it as below,

For each payment plugin, there are four folders in the unzipped folder as below.

Upload all of them onto your OpenCart System Root Folder as below,

The Installation of PlugIns

After upload, you can go to your OpenCart Admin web site, navigating to Extensions -> Extensions -> Choose the extension type -> Payments, you can find these two OTTPAY payment methods: OTT Pay QR Code Payment for WeChat Pay, OTT Pay QR Code Payment For Alipay, OTT Pay QR Code Payment For Union Pay.
Click the green button to Install. After installation, the green button will become red called Uninstall and the Edit button will be enabled.

Plugins (Extension) Configuration

Navigate to the payment methods provided by OTTPAY, such as OTT Pay QR Code Payment For UnionPay, click Edit button and input the parameters and click Save.

Available Currency: BOTH(CAD, USD)

Available Currency: CAD

Available Currency: USD

Merchant ID: provided by OTTPAY
Merchant Key: provided by OTTPAY
Merchant Code *: provided by OTTPAY
Operator ID: provided by OTTPAY
Status: select Enabled
Debug Mode: select Disabled
Default order status: select Pending
Finished order status: select Complete
Sort order: 1

* Merchant Code is needed to make the payment ONLY in the WeChat browser.

Payment Process Flow with WeChat Pay and Ali Pay

Go to Product page, select the items to your shopping cart.

Click Checkout button when you finish shopping.

Payment method options will be displayed as below, select one and place the order.

OTTPAY Plugin will automatically identify the browser environment to generate a payment QR code in the PC browser or make a payment directly by customer in the mobile browser.

If PC Browser, it will generate a payment QR code for payment
If Mobile Browser, such as Safari or Chrome, it will activate only Alipay eWallet available for payment
If WeChat browser, it automatically activate the eWallet according to the payment method selected by the customer

After payment, The order placed information will bed displayed as below.

Payment Process Flow with Union Pay

Go to Product page, select the items to your shopping cart.

Click Checkout button when you finish shopping.

Payment method options will be displayed as below, select one and place the order.

OTTPAY Plugin will automatically identify the browser environment to pop up Secure Pay webpage in the PC browser or activate Express Pay Wallet App in the mobile browser.

If PC Browser, it will pop up a UnionPay Secure Pay Webpage as below,
If Mobile Browser, it will activate Union Pay Express Pay eWallet if installed in your mobile.
If WeChat browser, it will activate Union Pay Express Pay eWallet if installed in your mobile.

After payment, The order placed information will bed displayed as below.

Magento PlugIns

Support both of PC-Browser and Mobile-Browser/WebChat-Browser on Alipay and WeChat Pay

Plugins for Magento 2 Setup

Download of PlugIn Installation kit from the following URL

As a known issue of Magento Payment Process as per the following KB,

https://github.com/PayboxByVerifone/Magento-2.3.x/issues/4

This issue is with Magento system from 2.3.3 to 2.3.5 latest version. it is suggested to apply the fix of issue if you are using the above system versions.

Note: OTT plugin package current version 2 provided the fix resolution already, you need not apply the fix anymore.

Here is our approach to fix the issue, just for reference. Magento Issue Fix

Installation of the Plugins

Step1: Upload the files to the app/code directory, the directory structure: app/code/Ottpay/…

Step2: Check current status of installed modules/plug-ins

Go to the root directory of the Magento website, run the following command:

sudo php bin/magento module:status

Then you will see Ottpay_Alipay and Ottpay_WeChat are not activated.

Step3: Activate the Plugins of Ottpay_Alipay and Ottpay_WeChat

sudo php bin/magento module:enable Ottpay_Alipay Ottpay_Wechat

[ryanl@localhost magento]$pwd
/var/www/magento
[ryanl@localhost magento]$ sudo php bin/magento module:enable Ottpay_Alipay Ottpay_Wechat

The following modules have been enabled:
- Ottpay_Alipay
- Ottpay_Wechat

To make sure that the enabled modules are properly registered, run 'setup:upgrade'.
Cache cleared successfully.
Generated classes cleared successfully. Please run the 'setup:di:compile' command to generate classes.
Info: Some modules might require static view files to be cleared. To do this, run 'module:enable' with the --clear-static-content option to clear them.

Step4: To make sure that the enabled modules are properly registered, run 'setup:upgrade'

sudo php bin/magento setup:upgrade

[ryanl@localhost magento]$pwd
/var/www/magento
[ryanl@localhost magento]$ sudo php bin/magento setup:upgrade

Cache cleared successfully
File system cleanup:
/var/www/magento/generated/code/Composer
/var/www/magento/generated/code/Dotdigitalgroup
/var/www/magento/generated/code/MSP
/var/www/magento/generated/code/Magento
/var/www/magento/generated/code/Symfony
/var/www/magento/generated/code/Yotpo
The directory '/var/www/magento/generated/metadata/' doesn't exist - skipping cleanup
/var/www/magento/pub/static/adminhtml
/var/www/magento/pub/static/deployed_version.txt
/var/www/magento/pub/static/frontend
/var/www/magento/var/view_preprocessed/pub
Updating modules:
Schema creation/updates:
Module 'Magento_AdminAnalytics':
Module 'Magento_Store':
Module 'Magento_AdobeIms':
Module 'Magento_AdobeImsApi':
Module 'Magento_AdobeStockAdminUi':
Module 'Magento_MediaGallery':
Module 'Magento_AdobeStockAssetApi':
Module 'Magento_AdobeStockClient':
Module 'Magento_AdobeStockClientApi':
Module 'Magento_AdobeStockImage':


Running schema recurring...


Module 'Amazon_Core':
Module 'Amazon_Login':
Module 'Amazon_Payment':
Module 'Dotdigitalgroup_Email':
Module 'Dotdigitalgroup_Chat':
Module 'Klarna_Core':
Module 'Klarna_Ordermanagement':
Module 'Klarna_Kp':
Module 'Magento_PaypalReCaptcha':
Module 'MSP_TwoFactorAuth':
Module 'Ottpay_Alipay':
Module 'Ottpay_Wechat':
Module 'Temando_ShippingRemover':
Module 'Vertex_Tax':
Module 'Vertex_AddressValidation':
Module 'Yotpo_Yotpo':
Enabling caches:
Current status:
Array
(
    [layout] => 1
    [block_html] => 1
    [full_page] => 1
)

Configuration of the Plugins

Go to Magento Website Admin > Stores > Configuration > Sales > Payment Methods

Open Ottpay Settings-Alipay to fill in the configuration information with merchant ID and Operator ID, Merchant Code, Sign key. Please contact Ottpay BD team to get them once singed the service contract.

Open Ottpay Settings-WeChat to fill in the configuration information with merchant ID and Operator ID, Merchant Code, Sign key. Please contact Ottpay BD team to get them once singed the service contract.

Payment Process Flow

Select Payment Methods (WeChat Pay /Ali Pay) as below, and Place Order

Scan the following QR Code displayed, by using WeChat Pay /Ali Pay mobile app

Once finished payment process with WeChat Pay /Ali Pay mobile app, you will see the result information from Magento system.

ECSHOP PlugIns

Support both of PC-Browser and Mobile-Browser/WebChat-Browser on Alipay and WeChat Pay

PlugIn Download and Installation

Download of PlugIn Installation Kit from the following URL

Installation of the Plugin

Unzip the plugin file and copy the inner files to root of ECSHOP folder

PlugIns for PC-Browser (WebChat & Alipay) Configuration

http://localhost:8090/ecshopjcw/index.php

Click 'Edit' buttons above highlighted to set up the Configuration of WeChat-Pay and Ali-Pay

Configuration of the plugin

The following settings are with WeChat Payment methods, fill the form and save.

OTT-API-URL =  http://qrpay.ottpay.com/h5Pay?
Callbackup(Example) = https://ezshops.ott.ca/wxnativeOTTPAY_callback.php

The following settings are with Alipay Payment methods, fill the form and save.

OTT-API-URL =  https://frontapi.ottpay.com/processV2
Callbackup(Example) = https://ezshops.ott.ca/mobile/AliH5OTTPAY_callback.php

Payment Process Flow

Payment method options display in this page, select one and place order.

Scan the QR code

The Billing details information will display if the purchase succeeds.

PlugIn for Mobile Browsers (WebChat-Pay & H5 Ali-Pay)

Installation of the Plugin

Unzip the plugin file and copy the inner files to root of ECSHOP folder

http://localhost:8090/mobile/ecshopjcw/index.php

Click 'Edit' buttons above highlighted to set up the Configuration of WeChat-Pay and Ali-Pay

Configuration of the plugin

The following settings are with WeChat Payment methods, fill the form and save.

OTT-API-URL =  https://frontapi.ottpay.com/processV2
Callbackup(Example) = https://ezshops.ott.ca/mobile/wxpayOTTPAY_h5_callback.php

The following settings are with Alipay Payment methods, fill the form and save.

OTT-API-URL =  https://frontapi.ottpay.com/processV2
Callbackup(Example) = https://ezshops.ott.ca/AliQrOTTPAY_callback.php

Payment Flow

Payment method options display in this page, select one and place order.

Click 'WeChat H5 OTT Pay' button as below,

The Billing details information will display if the purchase succeeds.

Payment Plugins

Payment PlugIns

Word Press PlugIns

PlugIn Setup and Payment Process Flow

Download of PlugIn Installation kit from the following URL

Installation of Plugin in WordPress

OpenCart PlugIns

PlugIns Setup and Payment Process Flow

The Download of PlugIn Installation File

Magento PlugIns

Plugins for Magento 2 Setup

Download of PlugIn Installation kit from the following URL

Installation of the Plugins

Magento Issue Fix

Modification of select-payment-method.js

Plugin for Magento 1 setup

Plugin for Magento 1

Installation of the Plugin

Unzip the plugin file and copy the inner files to root of Magento folder

ECSHOP PlugIns

PlugIn Download and Installation

Download of PlugIn Installation Kit from the following URL

Installation of the Plugin

Unzip the plugin file and copy the inner files to root of ECSHOP folder

Word Press PlugIns

PlugIn Setup and Payment Process Flow

Download of PlugIn Installation kit from the following URL

Installation of Plugin in WordPress

Payment Flow

OpenCart PlugIns

PlugIns Setup and Payment Process Flow

The Download of PlugIn Installation File

The Installation of PlugIns

Plugins (Extension) Configuration

Payment Process Flow with WeChat Pay and Ali Pay

Payment Process Flow with Union Pay

Magento PlugIns

Plugins for Magento 2 Setup

Download of PlugIn Installation kit from the following URL

Installation of the Plugins

Configuration of the Plugins

Payment Process Flow

Magento Issue Fix

Modification of select-payment-method.js

Payment Flow

The Installation of PlugIns

Plugins (Extension) Configuration

Payment Process Flow with WeChat Pay and Ali Pay

Payment Process Flow with Union Pay

Configuration of the Plugins

Payment Process Flow

ECSHOP PlugIns

PlugIn Download and Installation

Download of PlugIn Installation Kit from the following URL

Installation of the Plugin

Unzip the plugin file and copy the inner files to root of ECSHOP folder

PlugIns for PC-Browser (WebChat & Alipay) Configuration

Configuration of the plugin

Payment Process Flow

PlugIn for Mobile Browsers (WebChat-Pay & H5 Ali-Pay)

Installation of the Plugin

Unzip the plugin file and copy the inner files to root of ECSHOP folder

Configuration of the plugin

Payment Flow

PlugIns for PC-Browser (WebChat & Alipay) Configuration

Configuration of the plugin

Payment Process Flow

PlugIn for Mobile Browsers (WebChat-Pay & H5 Ali-Pay)

Installation of the Plugin

Unzip the plugin file and copy the inner files to root of ECSHOP folder

Configuration of the plugin

Payment Flow

Plugin for Magento 1 setup

Plugin for Magento 1

Installation of the Plugin

Unzip the plugin file and copy the inner files to root of Magento folder

Configuration of the plugin

Payment Flow of the Plugin

Configuration of the plugin

Payment Flow of the Plugin