Zapper for ecommerce. Magento Plugin Version Checkout

Transcription

1 Zapper for ecommerce Magento Plugin Version Branden Paine 4/14/2014

2 Table of Contents Introduction... 1 What is Zapper for ecommerce? Why Use It?... 1 What is Zapper?... 1 Zapper App Features... 1 What is Zapper for ecommerce?... 2 Requirements... 3 Installation... 3 Configuration... 4 Usage... 6 Developers Info... 7 Staging Testing... 9 Styling Guide... 9 Credits & Support... 9 i P age

3 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. The document also describes the product, Zapper for ecommerce, providing information on its uses and benefits. What is Zapper for ecommerce? 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 . - 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. The focus of this document is. 1 P age

4 What is Zapper for ecommerce? Zapper for ecommerce 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 and text. What are the benefits of Zapper for ecommerce? 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. 2 P age

5 Zapper for ecommerce : 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, address and Address for Delivery and any other field required to buy online on the website. Zapper for ecommerce : 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 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 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. 3 P age

6 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 1. Login to your backend, go to System -> Configuration 2. Find the Zapper for ecommerce configuration Tab and click on it. 4 P age

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 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 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. 5 P age

8 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. 6 P age

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: <div class="totals-content"> <?php echo $this->getchildhtml('totals');?> <?php if(!$this->haserror()):?> <ul class="checkout-types"> <?php foreach ($this->getmethods('methods') as $method):?> <?php if ($methodhtml = $this->getmethodhtml($method)):?> <li><?php echo $methodhtml;?></li> <?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: <div class="totals-content"> <?php echo $this->getchildhtml('totals');?> <?php if(!$this->haserror()):?> <ul class="checkout-types"> <?php foreach ($this->getmethods('methods') as $method):?> <?php if ($methodhtml = $this->getmethodhtml($method)):?> <li><?php echo $methodhtml;?></li> <?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. 7 P age

10 The default code supplied with the framework uses the Saved Credit Card Payment method. Zapper for ecommerce Workflow Zapper for ecommerce Customer Magento Zapper Scan-to- Mobile Device Zapper Enter Store Front Browse Store Front Add Items to Basket Add More items End Show Cart Enabled Render Zapper Scan-to-Login QR Code Scan QR Code Verify Information and Pay Send Request Collect Customer Dettail Receive Detail Send Back to Magento Process Payment & Process Order Success/Failure 8 P age

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 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 For support on this module, please support@zapper.com. 9 P age