Ecwid

This page describes how to install and configure Zapper as a payment method on the Ecwid eCommerce platform.

Overview

Ecwid

Ecwid is a cloud-based eCommerce platform designed for seamless integration with your website, business pages, blogs, marketplaces, or mobile apps. With all storefronts easily managed from a single control panel, it offers unparalleled convenience (learn more about Ecwid's versatility and supported platforms here). Backed by integrated features and customizable designs, launching your online store becomes effortless. The Ecwid App Market provides a range of apps and integrations, allowing you to expand store functionalities according to your business needs. This comprehensive approach ensures Ecwid delivers the fundamental tools of a premier eCommerce platform from the outset, streamlining your path to online achievement.

Zapper Payment Method

Our Zapper payment plugin for Ecwid offers a convenient payment solution that caters to customer preferences. Customers can choose between scanning an interactive QR code using the Zapper app or directly entering their card details during checkout. Merchants benefit from real-time payment updates that synchronize seamlessly with their store, enhancing transparency and order management. This integration ensures a smooth, secure, and versatile payment experience for both customers and merchants. 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. Installation - Downloading and installation of the Zapper payment method.

3. Configuration - Configuration of the Zapper Payment method with the merchant's Zapper credentials.

4. Checkout and Payments - The customer experience when making use of the Zapper payment method.

Pre-requisites

1. The merchant must be registered as a Zapper Merchant to use the Zapper plugin in production.

2. The merchant must be able to log in to the Zapper Merchant Portal.

Installation

The Zapper Ecwid plugin is available on this link: https://www.ecwid.com/apps/featured/zapper

After clicking this link and selecting "GET" at the Ecwid apps store , you will be required to the log into your Ecwid store to install the Zapper payment method.

Configuration

After installation, you will be redirected to the configuration page for the Zapper payment method. Configure the Zapper payment method as follows:

If you are not redirected to the Zapper payment method, you can find the configuration page by navigating to Configuration > Payment and selecting "Edit" on the Zapper payment method.

1. Enter your Zapper Merchant ID and Site ID (retrieved via the Zapper Merchant Portal)

2. Set the name to display on checkout to "Zapper"

3. Enable the Zapper payment method

4. Set the payment instructions to "You will be redirected to the Zapper payment gateway."

5. Save changes

Merchant and Site IDs

It is up to the merchant to ensure that the Merchant ID and Site ID is correct!

Zapper Settings Page: Merchant and Site IDs

Setting the Display Name and Enabling the Payment Method

Zapper Settings Page: Setting the Display Name

Setting the Payment Instructions

Zapper Settings Page: Setting the Payment Instructions

Verify Payment Method is Enabled

To verify that the Zapper payment method is enabled, navigate to Configuration > Payment:

Verify that the Payment Method is Enabled

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 in appearance based on the theme.

Zapper Payment Option on Checkout

Payments

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 with payment complete.