Comment on page
Magento
This page describes how to install and configure Zapper as a payment method on the Magento eCommerce platform.
Magento Commerce, as highlighted on Adobe's platform, is a robust eCommerce solution that empowers businesses with a comprehensive set of features. Designed to fuel online growth, it offers a personalized shopping experience, powerful merchandising tools, and efficient order management. With capabilities for B2B and B2C businesses alike, Magento Commerce ensures seamless integration across various channels and devices. Its flexibility and scalability make it a go-to choice for businesses seeking to elevate their digital presence and achieve eCommerce success.
The Zapper payment method for Magento now introduces a broader spectrum of payment choices. Alongside our existing interactive dynamic QR code option, customers can now also make use of a convenient card payment feature during checkout. This means that whether customers prefer the simplicity of scanning a QR code using the Zapper mobile app or directly entering their card details, the payment process is streamlined and adaptable. This versatile approach enhances the ease of contactless payments and enriches the shopping experience for all customers. 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 payment method in production.
- 2.
To install the Zapper Magento payment method you will need to download the archive containing the plugin files and copy it into the app code directory. Correct all file permissions and enable the plugin using the Magento CLI. These steps are detailed as follows:
curl -LO https://zapper-ecommerce.s3.eu-west-1.amazonaws.com/magento/releases/zapper-magento-1.1.1.zip
unzip zapper-magento-1.1.1.zip
A folder with the "app/code" directory structure and plugin nested within will be produced.
Avoid copying this directly over the magento/app/code directly as there may be other modules within that could be overridden and it could break file ownership permissions.
Within the extracted directory there is a ZapperIntegration module directory (app/code/ZapperIntegration). Move the ZapperIntegration directory into your Magento app code directory.
This should look something like the following example.
/var/www/html/magento2/app/code/ZapperIntegration
Change the file ownership to the user configured to run the Magento plugin. This could typically be the Apache user or a Magento user.
Be sure to use the user you have configured to run the Magento process
chown -R apache:apache /var/www/html/magento2/app/code/ZapperIntegration
Be sure to include the recursive flag -R
If the module is in the correct location it will show up as a disabled module, typically at the end of the list.
To check the status run the following command from the Magento directory
php bin/magento module:status
From the Magento directory run the module:enable command
php bin/magento module:enable ZapperIntegration_Payments
The final step to activating a module in Magento will be running the setup:upgrade command from the Magento directory
php bin/magento setup:upgrade
Once the Zapper payment method is installed, the payment method must be configured within the Magento admin using the Zapper merchant credentials obtained from the Zapper Merchant Portal. These steps are detailed as follows:
- 1.On the Magento admin page, navigate to Stores -> Configuration -> Sales -> Payment Methods -> Other Payment Methods --> Zapper.
- 2.Populate the details required by obtaining them from Zapper Merchant Portal and navigating to Settings --> Integrations. The following 3 items must be obtained from the Merchant portal (see image below):
- 1.Merchant ID
- 2.Site ID
- 3.API Key
Zapper Merchant Portal -> Integrations - 3.Set the "New Order Status" according to your preference (when a payment is completed using the Zapper payment method, the order status will be set to the value configured here, for example "Processing").
- 4.Set "Enabled" to "Yes".
- 5.Save the config.
The "Valid" indicator should switch to "Yes" provided all the details have been entered correctly. If it reads "No" the Zapper payment method will not be presented as an option at checkout, even if marked as enabled.
Once the installation and configuration has been completed, the merchant is ready to accept Zapper payments. The following sections describe the customer experience during the checkout and payment process.
Checkout page may differ slightly based on the theme.
On Checkout the user will be provided with "Zapper Payment" as a payment method option. The following image is an example of the payment options on the Magento checkout page:
Magento checkout with Zapper payment method enabled
The payment process is as follows:
- 1.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.
- 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 - Desktop QR Payment
Zapper Payment Gateway - Desktop Card Payment
Zapper Payment Gateway - Desktop Successful Payment
Zapper Payment Gateway - Mobile Payment Methods
Zapper Payment Gateway - Mobile Card Payment
The order on the merchants store will automatically be updated to the "New Order Status" value that was configured in section 3. Configuration -> step 3 above.
Last modified 1mo ago