Ecwid

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

Overview

Ecwid

Ecwid is a cloud-based eCommerce platform that can seamlessly integrate with almost any existing website, business page , blog, marketplace or mobile app. All the storefronts are synced and managed from one control panel (learn more about Ecwid and supported websites here).

Zapper Payment Method

The Zapper payment method for Ecwid 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. Real time payment updates are pushed to the merchants store. 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.

  2. The merchant must have their Zapper Merchant ID and Site ID (can be retrieved at 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. Set the name to display on checkout to "Zapper"

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

  3. 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 a user selects the Zapper payment method and proceeds to "Go to Payment", 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.