Plugin Integration Guide Revision History Version Date Changed By Comments/Reason 1.0 16/09/14 NZB Created 1.01 01/10/ This document describes the implementation requirements for the mobicred Magento Plugin, including how to install, configure and test the plugin. 1. mobicred Usage & Integration Requirements 2. Plugin Installation 3. Configure the Plugin 4. Test the Plugin 5. Configure Pricing Display 6. Confirm Pricing Display 7. Confirm Plugin Display 8. mobicred Plugin Integration Checklist 1 Page
1 mobicred Usage & Integration Requirements The merchant will be provided with 3 sets of test credentials in order to make use of the mobicred plugin: An API username and password to be used to authenticate the merchant s API requests to mobicred. A Merchant ID and Key for each business unit under the merchant umbrella. A customer account username and password. Once the merchant has demonstrated that their integration is complete from both a technical and aesthetic/user experience perspective, will mobicred provide live credentials for use in production. Merchants must also supply mobicred with their live IPs which will be used to restrict access to the API. CI and branding guidelines will be supplied by the mobicred sales team. These elements shall be reviewed by mobicred prior to issuing live credentials.
2 Plugin Installation You will want to turn off caching and compilation prior to installing the plugin. Cache: ( System > Cache Management ) Compilation: ( System > Tools > Compilation ) These can be re enabled once the plugin has been installed. 1. Log into your Magento Administration Panel 2. Open the Magento Connect Manager ( System > Magento Connect > Magento Connect Manager) 3. Login to Magento Connect 4. Click browse and select the supplied mobicred plugin file. 5. Click upload to install the plugin 6. Return to your Admin Panel to configure the plugin
3 Configure the Plugin To make mobicred available as a payment method in the Magento checkout, some configuration is required. This is all done under the Payment Methods in the Magento Configuration. 1. Log into your Magento Administration Panel 2. Open the Configuration section ( System > Configuration ) 3. Select Payment Methods from under the Sales Menu 4. Scroll down to and click on the mobicred Payment Module section to open the mobicred plugin configuration panel. 5. Input the mobicred test credentials as supplied. 6. Save Config At this point the plugin has been added as a Payment Method on checkout it should now be possible to check the implementation.
4 Test the Plugin The plugin should now appear as a payment option on checkout. The following instructions allow one to test that the plugin is functioning correctly. In testing the plugin, be sure to purchase items with a low cost so as not to use up all the credit available in the test account. 1. Add a Product to your Cart 2. Proceed to Checkout 3. Select mobicred as the Payment Method 4. Log into mobicred and request OTP 5. Provide the OTP 6. Place the order This should create an order in Magento with an associated transaction. There may be some issues with the display of the gateway within the checkout, these are addressed in 7. Confirm Plugin Display. 5 Page
5 Configure Pricing Display The plugin has functionality built in to make the display of mobicred pricing quick and easy. As each Magento installation and theme is different it will be necessary to implement and test. To add the pricing to your product catalog and individual product, follow the steps below. 1. Open the catalog/product/price.phtml file 2. Include the mobicred helper with the other helpers. <?php $_mobihelper = Mage::helper('mobicred');?> 3. Include the call to the helper, passing it the price you would like to convert to mobicred pricing. Place this in the price.phtml file to render the pricing layout. <?php echo $_mobihelper >getprice($_finalprice);?> 4. Check the display of the prices to ensure they appear with consistency. Individual product mobicred price. mobicred price in product catalogue. 6 Page
6 Confirm Pricing Display The following screenshots illustrate the correct display of the mobicred plugin. This of course will vary depending on your websites theme but the styling should be maintained as closely as possible to the mobicred brand requirements. Individual product mobicred price. mobicred price in product catalogue. mobicred price tooltip in product catalogue. mobicred price tooltip on an individual product page. 7 Page
7 Confirm Plugin Display The plugin inserts two items into the Magento checkout process. The styling of these elements will be as per your websites theme requirements, but will still need to adhere to the mobicred branding requirements. The following screenshots are taken from the default Magento installation. This is the screen shown to customers when they select mobicred as a payment option. This is due to the fact that the plugin authenticates the payment and places the order without leaving the merchants website, it needs to override the default place order button. As a payment captured via mobicred does not require the customer to leave the merchants page, the place order button must be replaced with the mobicred form. The plugin will automatically insert the OTP login & verification form, but depending on the theme implemented on the merchants installation of Magento, some modification may be required. Typically the Place Order button appears as shown above To allow for this the following has been implemented: 1. In /app/code/.../layout/mobicred.xml the form is added under: <checkout_onepage_review> 2. The form.phtml file hides the button with class btn checkout 3. On clicking the Make Payment & Place Order button, the mobicred_onepage.js script confirms the OTP and calls: review.save(). The following screenshots illustrate the display of the mobicred plugin in the Magento checkout. 8 Page
Log into mobicred Request OTP Place Order 9 Page
8 mobicred Plugin Integration Checklist The following checklist should ensure that the plugin displays and functions correctly. Please report any bugs or issues. Test Comment mobicred price shown in product category mobicred price shown on individual product Tool tip displays correctly in product category Tool tip displays correctly on individual product Payment option available on checkout OTP form is displayed As per brand bible and site specific styling. OTP form allows for login OTP form sends OTP OTP form accepts OTP and places order Apply to mobicred link displayed Order placed in Magento indicates mobicred payment Refund functioning When viewing the order in Magento you should see a transaction with the appropriate transaction ID. A refund placed using a credit memo on a specific invoice should instantly reflect in the mobicred customers account. 10 Page