Zapper for ecommerce. Magento Plugin Version Checkout

(1)

Zapper for eCommerce

Magento Plugin Version 1.0.0

Checkout

Branden Paine 4/14/2014

(2)

Zapper for eCommerce™

Introduction

This document is primarily aimed at a Magento software developer with the purpose of providing instructions on how to integrate Magento with Zapper for eCommerce™ Checkout.

The document also describes the product, Zapper for eCommerce™, providing information on its uses and benefits.

What is Zapper for eCommerce Checkout? Why Use It?

Zapper for eCommerce™ checkout is a framework to revolutionise checkout. This enables the customer to scan a QR Code, and checkout from the mobile device. Data is passed back to you for integration into various payment gateways. This saves the customer time, making it easier to checkout, and increases the conversion ratio for the store front. Using Zapper for eCommerce™ checkout the customer will be able to check out with a single scan, and a single click.

All payment data is stored on the mobile device in an encrypted format.

What is Zapper?

Zapper is a free, multi-language QR scanner that enables a user to scan QR codes quickly and accurately with their smartphone. Available in the iTunes App Store, Google Play Store and Windows Phone Store, the Zapper Application works in conjunction with a number of Zapper products.

Zapper App Features

The major features in the app include: - Instant QR code decoder

- Payment Processing - bank card processing

- Digital receipts to users via SMS, in-app notifications and email. - Real-time reporting and history of payments

- Free App Updates

Zapper for eCommerce™ is one of the Zapper products which works in conjunction with Zapper™ in two forms: Login and Register and Checkout. The focus of this document is Checkout.

(4)

Zapper for eCommerce™

What is Zapper for eCommerce Checkout?

Zapper for eCommerce™ Checkout is an easy payment method whereby the user scans a QR code on the e-commerce website with their smartphone at the checkout point to make an online purchase. The user adds their selected items to their basket and checks out seamlessly by scanning the Zapper QR code on the screen and tapping ‘Pay.’ Both the user and the website owner instantly receive notification of payment via email and text.

What are the benefits of Zapper for eCommerce Checkout? Website Owner:

• Increase in number and speed of sales as customers will be provided with a seamless alternative payment option at checkout.

• Increase in safe online transactions. With Zapper for eCommerce the site will have 2-Factor authentication using our innovative technology that combines the user's smartphone and the website's authorization and checkout functionality.

• Crystal clear insights into user behaviour and purchases on the owner’s unique Zapper dashboard. This allows site owners to select the services they need, to monitor activity or reconcile payments with the owner given insight into their user’s purchases.

User Convenience:

• It's quick and convenient for website owner’s users to buy online by just scanning a QR Code embedded on your site.

• Safe - Users no longer need to enter their bank card details onto your website. They can just simply scan the QR Code and pay on the site letting Zapper for eCommerce™ do all the work.

• The Zapper App is available for other Zapper products which the users may be familiar with so will recognise the brand and the associated security, convenience and seamless Zapper experience.

(5)

Zapper for eCommerce Checkout: Process for Site owners

In order for website owners to use Zapper for eCommerce, the website owner registers as a merchant with Zapper. This will allow the owner to customize the desired checkout fields required from users to buy from their website using Zapper. Merchants create Custom fields which can include fields such as First Name, Last Name, Email address and Address for Delivery and any other field required to buy online on the website.

Zapper for eCommerce Checkout: How it works

A new purchaser to the Zapper-supported site

A new user downloads the Zapper App at any of the supporting App stores.

At the checkout, the user selects to pay with Zapper by selecting the Zapper button which instantly displays a dynamic Zapper QR code.

The user is prompted to complete the required fields on their Zapper App when scanning the QR code.

All the completed fields entered on the user’s device will automatically be passed to the website's backend and the user will be registered on your website.

After tapping ‘pay’, both the user and the website owner receive immediate notification of payment.

Requirements

To use Zapper for eCommerce™ you need to have registered a merchant account at http://www.zapper.com and signed up for the Zapper for eCommerce™ Merchant Access.

You also need to have registered and loaded the Zapper for eCommerce™ module in Magento. This plugin is designed for Magento CE 1.8.0 and up.

Installation

IMPORTANT NOTE: You must disable all Magento Cache before installing. Please read the below instructions carefully.

1. Login to your backend, go to System -> Cache Management, and select all items. Choose Disable in the actions field, and then click Submit. The Status columns should turn red.

2. Unzip the module and copy to the root directory of the website. 3. Log off and log back onto the backend.

4. Configure module

5. Re-enable the Cache, go to System -> Cache Management, and select all items. Choose Enable in the actions field, and then click Submit. The Status columns should turn green.

(6)

Zapper for eCommerce™

Configuration

IMPORTANT NOTE: In order to use Zapper for eCommerce™ on your Magento store, you need to have registered a merchant account with Zapper™. To do this, please visit http://www.zapper.com.

1. Login to your backend, go to System -> Configuration

2. Find the Zapper for eCommerce™ configuration Tab and click on it.

(7)

3. Enter the Merchant Details

a. General Settings

i. Enter the Merchant ID that has been returned from Zapper™ during the Zapper™ Merchant Registration.

ii. Enter the QR Code Size to be displayed on the store. Valid entries are 1-4. The lower the value, the smaller the QR Code. The recommended size is 4.

iii. Enter the time interval for the Zapper™ server to be polled in Milliseconds. Recommended is 5000.

iv. Click on Save Config to save the settings.

b. Go To Sales -> Payment Methods

i. Set Enabled to Yes to enable the Zapper for eCommerce™ payment module

ii. Enter the Title to be displayed on the Checkout Payment Methods.

iii. Enter the static block name to be displayed on the frontend. Default is scantocheckout_help. This is to display a help and general information relating to the payment method.

(8)

Zapper for eCommerce™

c. Refresh Cache, go to System -> Cache Management, and select all items. Choose Refresh in the actions field, and then click Submit.

The Zapper™QR code will now appear on the store front.

Usage

Download and install the Zapper™ Mobile application on your phone. Open the Zapper™ application and enter your details on the application. Once done, scan the QR Code on the store front. You will be redirected on the mobile device to verify the amount to pay, which credit card to use. Then you can either cancel or accept the payment. Clicking Pay, will Collect the customer’s card, billing and shipping detail and pass this information back to Magento. At this stage you will then create the order and process the payment.

(9)

Developers Info

The module can be styled in accordance with the theme of the store front, by

updating the Zapper™ css file located in the

skin/frontend/base/default/css/zappertech/zappertech.css. To add the Zapper

for eCommerce™ QR Code on the Cart view, edit the

app/design/frontend/default/Yourtheme/template/checkout/cart/cart.phtml, find the following code block, near the end of the file:

<?php echo $this->getChildHtml('totals'); ?> <?php if(!$this->hasError()): ?>

<?php foreach ($this->getMethods('methods') as $method): ?> <?php if ($methodHtml = $this->getMethodHtml($method)): ?>

<?php endif; ?> <?php endforeach; ?>

</ul>

<?php endif; ?>

</div>

And insert

<li>

<div class="block-content" id="scan_to_checkout" style="text-align: center;"><?php Mage::helper('scantocheckout')->render(1); ?></div> </li>

So the code will look like:

<?php echo $this->getChildHtml('totals'); ?> <?php if(!$this->hasError()): ?>

<?php foreach ($this->getMethods('methods') as $method): ?> <?php if ($methodHtml = $this->getMethodHtml($method)): ?>

<?php endif; ?> <?php endforeach; ?> <li>

<div class="block-content" id="scan_to_checkout" style="text-align: center;"><?php Mage::helper('scantocheckout')->render(1); ?></div>

</li> </ul>

<?php endif; ?>

</div>

Payment gateway integration is done from within the app/code/community/ZapperTech/controllers/IndexController.php in function ProcessOrder. This function is called once the QR Code has been scanned and processed via the Zapper™ mobile application. Sample code has been entered in this function. The function will need to update the quote, create the order and process the payment, along with any other customization required.

(10)

Zapper for eCommerce™

The default code supplied with the framework uses the Saved Credit Card Payment method.

Zapper for eCommerce™ Workflow

Zapper for eCommerce™ Checkout™

Customer Magento Zapper Scan-to-_Checkout™ Mobile Device Zapper

Enter Store Front

Add Items to Basket Browse Store

Front

Add More items

Show Cart Enabled Render Zapper

Scan-to-Login QR Code Scan QR Code

Verify Information

and Pay Send Request

Collect Customer

Dettail Send Back to

Magento Receive Detail

Process Payment & Process Order Success/Failure

End

(11)

Staging Testing

To test the system prior to go live, set the Sandbox to yes (default setting). Credit card details to test with:

Card Type Card number CVV/CVC Expiry Date

Visa 4000 0000 0000 0002 Any 3 digit number i.e 123 Any future date

Styling Guide

Any use of Zapper™’s trademarks, branding, logos, and other such assets in connection with the Services shall use Zapper™’s approved branding and shall be in accordance with the Zapper™ Trademark Guidelines.

Credits & Support

The Zapper for eCommerce™ Magento module is supplied as is, and has been tested in Magento CE 1.8.1.0.

For support on this module, please email [email protected].

Zapper for ecommerce. Magento Plugin Version Checkout

Zapper for eCommerce

Zapper for eCommerce™

Table of Contents

Introduction

What is Zapper for eCommerce Checkout? Why Use It?

What is Zapper?

Zapper App Features

Zapper for eCommerce™

Zapper for eCommerce Checkout: Process for Site owners

Zapper for eCommerce Checkout: How it works

Requirements

Installation

Zapper for eCommerce™

Configuration

Zapper for eCommerce™

Usage

Developers Info

Zapper for eCommerce™

Staging Testing

Styling Guide

Credits & Support