Step-by-Step Guide to Integrate Payment Gateway to Your eStore

As an initial step for any e-commerce business, it is crucial to understand the work of a payment gateway and how best can you integrate payment gateway into your e-commerce website. A payment gateway facilitates easy processing of transactions using credit card and other online transaction mediums. Payment gateway acts as a mediator between the buyer and seller by exchanging information between banks and the payment portal. This enables to ensure safe and secure payment options within your e-commerce business.

There are several ways to integrate payment gateway into your e-commerce website. While integrating payment gateway, it is equally important to ensure the payment page meets the look and feel of the rest of the website. A large amount of online customer would choose to drop off at payment stage, in case the integration with payment gateway is not appealing.

What parameters should be considered while choosing a payment gateway?

Payment gateway integration can be made broadly in two ways

  1. Incorporate an iframe provided by the payment gateway provider. This allows the payment page to have the same look and feel as the website, including the branding and other website features.
  2. The payment gateway provider will give a common checkout page which needs to be integrated with the e-commerce website. This page may not have a similar look and feel as the website.

Some of the parameters to be considered while integrating a payment gateway to e-commerce website are-

  • Payment Option – While choosing a payment gateway it is important to check the payment option, per transaction fees. Ensure the maintenance cost for payment gateway falls within your budget.
  • User Interface – Opt for payment gateway with flexible user interface. The appearance of the payment gateway should be appealing and in sync with the website user interface.
  • Security – Ensure payment gateway provides secure payment options. Make sure the payment provider uses latest security protection protocols.
  • Only required details – It is important to ensure while making a payment only required fields are being made to fill in. Unnecessary field to be filled by users will only increase users to drop off. Ensure there is no signup, sudden pop-ups and unnecessary page redirections.
  • Multi payment option – The payment gateway should allow credit cards, debit cards and common third party services and e-wallets such as PayPal.
  • Multi-Currency – In case the business needs to spread globally, then it is important to select a payment gateway which supports multi-currency.
  • Integration support – Check for payment gateway integration support with existing website platform. Minimize the development changes to integrate payment gateway.
  • Growth Scope – Choose well trusted payment gateway and ensure to maximize the scope of business growth. The processing with payment gateway should be fast and efficient.
  • Mobile Support – While payment checkout page works over desktop view, this should also work over different dimensions of mobile. It should be mobile responsive.

Some of the common payment gateway options

payment-gateway

How to integrate a payment gateway into my e-commerce website?

Some of the common e-commerce website development platforms include – Shopify, WooCommerce, Yo!Kart, BigCommerce,  Magento, Big Cartel and many more. Each and every platform has a different way to integrate payment gateways and provides you a wide range of payment gateway options.

An example of integrating payment gateway in Shopify is shown below

1.Go to Settings in the Dash Board as shown below

Shopify-settings-home2. Click on settings and go to Payments

shopify-payments

3. You can select a credit card gateway from the drop down

select-credit-card-gateway

4. A large number of payment gateways are supported in Shopify as shown below-

select-credit-card-gateway-2

5. Once payment gateway is selected and the required details of license key is filled in, click on Activate button to activate usage of the payment gateway

Gateway-activated

In WooCommerce, the payment options can be selected as shown below-

woocommerce-payment-gateway

Here we have different options such as Direct Bank Transfer, Cheque Payment, Cash On Delivery, Credit Card, PayPal.

Authorize.net payment gateway with WooCommerce – An Example

In case you select a specific payment gateway such as Authorize.net, then you should additionally add the plugin for Authorize.net in WooCommerce. This will add an additional payment option as shown in this example

For using Authorize.net payment gateway, the prerequisite is to have a login id and transaction key. The WooCommerce Authorize.net Payment Gateway Plugin allows to accept credit cards (Master card, American Express, Maestro, Visa, JCB and Diners club) without having to leave your e-commerce website.

Steps to be followed to setup the Authorize.net Payment Gateway plugin

  • You can purchase the Authorize.net for Woo Commerce as shown below-authorize.net

 

  • You will be able to download the plugin zip file from your account.
  • Once downloaded, install the plugin zip into your WordPress/ WooCommerce site.
  • Once installed and activated a plugin you will receive activation key and activation email from your account in API Keys section as shown below-

xadapter

  • Go to your site Settings page of the plugin and activate this using the activation key. To Activate, navigate to Plugin Admin Settings page. Use the API key and Email by entering these details under License Activation Section of Plugin Settings as shown below-

license-activation

  • Click on Activate Button in the above screen to activate the license.
  • Once activated, Authorize.net is available to be used in your WordPress/WooCommerce website

How to use the Authorize.net Payment gateway plugin in WooCommerce?

  • Once the plugin is installed, we can start using the Authosize.net plugin in WordPress/WooCommerce. You can access the plugin in two ways:
  1. Navigate to WooCommerce -> Settings -> Checkout ->Authorize.net Card / Authorize.net eCheck
  2. Navigate to plugins -> Installed plugins -> EH Authorize.net Payment gateway for WooCommerce -> Settings
  • In WooCommerce the plugin option will be shown on the payment screen as shown below-

woo-ecommerce-plugin-1

  • The complete screen will be shown as below-

  • Below is a detailed description about parameters present in this screen-
  1. Net Card – You will have to enable the Authorize.Net Card payment by selecting the check box.
  2. Net Overview – In case this is enabled, you can capture or refund the payment. Refund can be full or partial. Here you can also see all the order details. For a selected date range you can check graphical representation.
  3. Title – This will be visible on checkout page under payment modes. This needs to be specified by you.
  4. Order Button Text – This contains a description. The customer will be able to see this description on the checkout page.
  5. Show Preferred Cards – You can select the required cards and this card logo will be shown on the checkout page.
  • In the same page you need to fill in the Transaction key and other transaction related details as shown below-

authentication

  1. Login ID – This is a unique key provided by Authorize.net. This key is validated for every request with Authorize.net.
  2. Transaction Key – This is also provided by Authorize.net
  3. CVV Number – This field enabled, ensures customer has to fill in the CVV number details while checkout
  • In the same page below we can provide the transaction details as shown below-

transaction-details

  1. Transaction Mode – This can be Test/Live. Test is used for development purpose
  2. Transaction Type – This can be Authorize & Capture or Authorize Only. Authorize & Capture allows you to get the payment immediately. With Authorize Only option, you need to authorize charges first and capture the payment.
  3. Transaction Success Message – This message will be displayed to the customer on successful payment
  4. Transaction Failure Message – This message will be displayed to the customer on unsuccessful payment
  5. Logging – This enabled implies logging is being captured for every Ecommerce transaction and this can be used for any issue debugging
  6. Redirect URL – This is the redirection URL on successful payment
  • Post these changes Save the changes by clicking on the Save changes button as shown in the image.

Similar to the above example, you can easily integrate any payment gateway to your e-commerce website. The plugin, platform support, features and security mechanism will be slightly different from one payment gateway to another.

Some good examples of Payment gateway pages-

  1. Authorize.net – This contains single page information handling. Relevant logos of Visa/Master Card as highlighted, help to capture the attention of customers

pay-using-authorizenet

  1. QPay– Below is an example of QPay mobile checkout page. This is a single page and requires users to fill in minimum details. Security badges provide a seal of trust as highlighted below-

security-badges-verified

  1. CCAvenue – Provides customization, logo branding and single page view integration.

cc-avenue

  1. PayU – The below checkout page prefills almost all the details except security related information.

payu

CONCLUSION

Payment gateway is the backbone of any e-commerce business and it is important to choose cost-effective and reliable payment gateway. There are several payment gateway integration options available for your e-commerce business. However, it is important to understand your business needs and choose the most apt payment gateway. It is equally important to read the fine line print of the Terms and Conditions before signing in for any payment gateway. Every payment gateway has a different cost structure and strong initial field work helps in evaluating the best option for your e-commerce business.

4 thoughts on “Step-by-Step Guide to Integrate Payment Gateway to Your eStore

Leave a Reply

Your email address will not be published. Required fields are marked *