WooCommerce (Wordpress)
This page describes how to install and configure Zapper as a payment method on the Wordpress (Woocommerce) eCommerce platform.
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.
The Zapper Payments plugin for WordPress extends Woocommerce's payment gateway options, now including a new 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 or directly entering their card details for 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:
- 1.Pre-requisites - The pre-requisites required before the Zapper payment method can be used in production.
- 2.
- 3.
- 4.
- 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.
- 4.The merchant must have access to the email address that was used during the Zapper registration.
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"
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.
To make payments in sandbox mode, the Zapper mobile app must be configured to use a test card.
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”.
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
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.
This section describes the user experience when checking out and making a payment using the Zapper payment method.
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
The payment process is as follows:
- 1.When a user selects the Zapper payment option and proceeds to finalize their order, they will be presented with a dual-choice scenario.
- 2.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.
- 3.However, if the user prefers to use their credit or debit card for payment, they can now opt for the new card payment option. This straightforward method allows users to directly input their card details and complete the payment process right on the spot.
- 4.Once the payment is successfully processed – whether through QR code scanning or card payment – 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.
Zapper Payment Gateway
Zapper Payment Gateway - Successful Payment
The order on the merchants store will automatically be updated with payment complete.
Last modified 1mo ago