This page describes how to install and configure Zapper as a payment method on the Wordpress (Woocommerce) eCommerce platform.
Overview
Wordpress and Woocommerce
WordPress and WooCommerce together create a versatile and customizable eCommerce solution that puts you in control of your online business. Utilizing the power of WordPress as a flexible Content Management System, and bolstered by the comprehensive features of the WooCommerce plugin, you can effortlessly establish your digital store. With an extensive range of themes, plugins, and integrations at your disposal, you can tailor your eCommerce site to perfectly suit your brand and offerings. This cohesive combination simplifies the process of building and managing an online store, ensuring you have access to the essential tools and capabilities required for eCommerce success, all from the outset of your journey.
Zapper Payments Plugin
The Zapper Payments plugin for WordPress extends Woocommerce's payment gateway options, now including Bank payment and card payment feature alongside our existing dynamic QR code solution. This means customers can conveniently choose between scanning a QR code using the Zapper app, directly entering their card details or bank payment during checkout. This versatile approach ensures a seamless payment experience, catering to a range of preferences and enhancing the overall shopping journey. Learn more about the payments flow here.
This guide is composed of the following sections:
Pre-requisites - The pre-requisites required before the Zapper payment method can be used in production.
Installation - Downloading and installation of the Zapper payment method.
Configuration - Configuration of the Zapper Payment method with the merchant's Zapper credentials.
Checkout and Payments - The customer experience when making use of the Zapper payment method.
Pre-requisites
The merchant must be registered as a Zapper Merchant to use the Zapper plugin in production. (sandbox mode does not require credentials)
Verify that the required Wordpress and PHP versions are met.
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:
Go to Plugins->Add New
Search for "Zapper Payments" (by Zapper Development)
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 for Test Payments:
Open the Zapper mobile app.
Navigate to Payment Methods and select "Add Card".
Enter a valid test credit card number (e.g., 4000 0000 0000 0002).
Enter any future expiry date and CVC.
Enter any name in the "Name on Card" field.
Click "Save".
Configure Zapper Plugin
To use the Zapper plugin in sandbox mode, configure the plugin as follows:
Enable the plugin
Enable Sandbox Mode
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:
Enable the plugin.
Ensure Sandbox Mode is NOT enabled.
Enter the Merchant and Site ID's.
Click on the "Request OTP" button to have an OTP emailed to the Zapper Merchant email address.
Enter the "OTP" (a.k.a "Verification Code") received in the email and click "Submit OTP".
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:
When the user selects the Zapper payment option on checkout and proceeds to finalize their order, they will be presented with Zapper Hosted Payment page.
If the user prefers the familiar convenience of our dynamic QR code solution, they can proceed by using the Zapper mobile app to effortlessly scan the on-screen QR Code. For users accessing the store from a mobile device, the QR Code is seamlessly replaced with a deep-link button, ensuring a smooth transition to the Zapper application.
If the user prefers to use their credit or debit card for payment, they can now opt for the card payment option. This straightforward method allows users to directly input their card details and complete the payment process right on the spot.
However, if user prefers payments made directly from their bank account they can select pay with bank.
Once the payment is successfully processed – whether through QR code scanning, card payment or pay with bank – users will receive a confirmation in the form of a checkmark symbol. With this assurance of payment, they will then be seamlessly redirected back to the store's default payment confirmation page.
By introducing this new card payment option alongside our existing QR code solution, we're committed to delivering a more inclusive and user-friendly payment experience that caters to a diverse range of customer preferences.
