Zapper Integrations
Search…
WooCommerce (Wordpress)
This page describes how to install and configure Zapper as a payment method on the Wordpress (Woocommerce) platform.
Overview
Wordpress and Woocommerce
Worpdress is a free and powerful Content Management System that has flexibility and extensibility due to their Plugins feature. Thanks to the Woocommerce plugin, Wordpress can be extended to provide all the basic features expected from an eCommerce platform for free.
Zapper Payments Plugin
Zapper Payments is a Wordpress plugin that extends the Woocommerce payment gateway options, which allows Zapper Payments to be a payment option on checkout. The Zapper Payments plugin facilitates easy payments by providing customers with an interactive dynamic QR code at checkout, allowing them to use the Zapper app to scan and pay for their order. Learn more about the payments flow here.
Pre-requisites
- 1.The merchant must be registered as a Zapper Merchant to use the Zapper plugin in production (sandbox mode does not require credentials).
- 2.Verify that the required Wordpress and PHP versions are met.
- 3.The Woocommerce plugin must be installed and activated.
- 4.The merchant must have their Zapper Merchant ID and Site ID (or retrieve them at the Zapper Merchant Portal).
- 5.The merchant must have access to the email address that was used during the Zapper registration.
Installation
The Zapper Wordpress plugin is available from: https://wordpress.org/plugins/zapper-payments. Installation is the same as any other standard Wordpress plugin, i.e. on the Admin page proceed as follows:
- 1.Go to Plugins->Add New
- 2.Search for "Zapper Payments" (by Zapper Development)
- 3.Click "Install Now"
Configuration
After Zapper has been installed and activated, find Zapper Payments in the list of installed plugins and select "Settings". The plugin can be configured for sandbox or production as described in the following sections.
Sandbox
To make payments in sandbox mode, the Zapper mobile app must be configured to use a test card.
Configure Mobile Device
To make test payments, the Zapper mobile app must be configured with a test card as follows:
- 1.Navigate to Payment Methods.
- 2.Select “Add Card”.
- 3.Add a valid test card number (search for “Test Credit Cards” online. e.g. 4000 0000 0000 0002).
- 4.Enter any future expiry date and CVC.
- 5.Enter any name for “Name on Card”.
- 6.Select “Save”.
Configure Zapper Plugin
To use the Zapper plugin in sandbox mode, configure the plugin as follows:
- 1.Enable the plugin
- 2.Enable Sandbox Mode
- 3.Click the [Save Changes] button
Zapper Plugin Enable Sandbox
Production
Once installed, find Zapper Payments in the list of installed plugins and select "Settings", then configure the plugin as follows:
- 1.Enable the plugin.
- 2.Ensure Sandbox Mode is NOT enabled.
- 3.Enter the Merchant and Site ID's.
- 4.Click on the "Request OTP" button to have an OTP emailed to the Zapper Merchant email address.
- 5.Enter the "OTP" (a.k.a "Verification Code") received in the email and click "Submit OTP".
- 6.Click the "Save Changes" button
Zapper Plugin Configuration Complete
The OTP process may be bypassed by using the ""Manual Token Entry". If this option is used, It is up to the merchant to ensure that the token is correct.
Checkout and Payments
This section describes the user experience when checking out and making a payment using the Zapper payment method.
Checkout
On Checkout the user will be provided with Zapper as a payment method as shown in the image below:
Checkout page may differ based on the theme.
Zapper Payment Option on Checkout
Payments
The payment process is as follows:
- 1.When a user selects the Zapper payment method and proceeds to place the order, the user will be redirected to the Zapper payment gateway.
- 2.The user will use the mobile app to scan the QR Code on screen and pay.
- 3.On successful payment, the user will see a tick and then be redirected back to the store's default payment completion page.
Zapper Payment Gateway Page
Zapper Payment Gateway Page - Successful Payment
The order on the merchants store will automatically, be updated with payment complete.
Last modified 1yr ago