Magento Payment Gateway ​Integration Tutorial

Online shopping has gained popularity among customers. It is here to stay! Only 2 out of 10 prefer to shop offline. Buying things online at the home convenience is mostly likable. It is not only about purchasing goods or products online, however, it also implies that the merchant looking to boost sales should choose online payment gateway integration. 

For shopping online, the payments should be online. Statista has revealed that the total transaction value in the Digital Payments segment is estimated to reach US$6,752,388m in 2021.

Till 2022, for digital commerce, the transaction value will be US$5,411,354. It shows that you must offer your potential customers online payment opportunities.  And of course, for that, you need to integrate them into your eCommerce website. Magento eCommerce development services can be taken from the leading company intended basically for payment integration.

The aim of this article is to give you step-by-step guidance on integrating reliable payment gateways in Magento.

Best Way to Integrate Payment Gateways in Magento Store

1. PayPal

 

Known to all, PayPal’s payment value is increasing rapidly. Regular up-gradation to its features is the only reason behind it. 

 

For PayPal payments, the users are not required to offer bank account details. Rather, all they have to do is to create a PayPal account. 

 

This platform is used by most Millennials. The main aim is to receive payments and boost revenue levels for those customers who have this account. The big companies integrate it as an extra payment method.  

 

For integration,  Express API is used; it is a convenient and fast method. Below is an example of the Express checkout and standard PayPal processing fee: 

 

• No monthly or setup fees
• US fees – 2.9% + $0.30 for each transaction.
• International fees – 3.9% + $0.30 for each transaction.

 

PayPal Payments Pro processing fees:

 

• No setup fees.
• $30 monthly fee.
• US fees – 2.9% + $0.30 for each transaction.
• International fees – 3.9% + $0.30 for each transaction.
• Virtual terminal fees – 3.1% + $0.30 for each domestic transaction; extra 1% for cross-border transactions.

Steps to integrate PayPal

• You require a JavaScript checkout.js script for integrating Express Checkout (PayPal provides this).
• To use the button, just integrate the checkout.js script to the customer
• Add the code below on the page where you want to impart the PayPal Button:

By using the PayPal checkout script, configure the look of the button on the Magento website. Also, describe the outline when the buyer cancels or authorizes the payment. Find what appears when an error occurs

• #paypal-button 

Container component in which the button is rendered.

• Style  

Button appearance customization.

• payment() 

When the consumer clicks on the button, it appears. It lets you set up and return the payment to begin the checkout process.

• onAuthorize() 

This function appears when the customers log in and go for payment authorization. The confirmation page performs here. 

• onCancel()  

It is called when the payment is canceled. Usually, the consumer is taken back to the basic page. Simply, the settings can be changed and the customers can be redirected to another page.

• onError() 

It is used in case of any error occurrence. Here, you can allow the client to show the error alert or allow them to try again.

• #paypal-button  

This is a container element to render the button.

 

For integration, there are many options, like:

• Braintree SDK; 
• Client-side Rest;
• Server-side REST.

The method that goes with the business requirements can be chosen. Remember to test all before allowing the customers to use the payment form live. 

 

Authorize.net

 

It is the oldest payment method. Authorize.Net has started giving services in 1996, then, of course, it has a grown business and good reputation. The popularity lies because of the customizable integration, easy-to-use checkout opportunities, subscription-based additional features and fraud protection services, etc.

 

The integration of payment gateway in Magento can be easily achieved via Authorize.Net. Below is the information on processing fees:

• $49 setup fee, paid just once.
• $25 chargeback fee.
• $25 getaway fee every month.
• Transaction fee is 2.9% + $0.30.

Steps to integrate Authorize.net

 

For accessing Authorize.Net API, you have to make a sandbox account from the merchant authentication. Every request is sent from the HTTP POST technique to the API endpoints URLs.

• HTTP Request Method: POST
• Sandbox API Endpoint: https://apitest.authorize.net/xml/v1/request.api
• Production API Endpoint: https://api.authorize.net/xml/v1/request.api
• XML Content-Type: text/xml
• JSON Content-Type: application/json
• API Schema (XSD): https://api.authorize.net/xml/v1/schema/AnetApiSchema.xsd

For integrating the authorize.net, below are the options:

• Advanced Integration Method (AIM)
• Server Integration Method (SIM)
• Direct Post Method (DPM)
• Simple Checkout

These offer various levels of control and compliance, possess various SSL requirements and business types. What best you can do is that you can examine the official site and select the best possible solution.

 

Stripe

 

Stripe came to market some time back, and the popularity it gains in less time is tremendous. The payment gateway is customizable and advises complex and state of art features like accepting payments from third-party applications or marketplace or subscriptions.

 

It is easily customizable, which implies the expert Magento developers can manage everything according to the business requirements. Below is an example of the processing fee:

 

• No monthly fees and No setup fees
• $15 dispute or chargeback fee.
• Transaction fee is 2.9% + $0.30 per transaction.
•  Bitcoin or ACH processing fee is 0.8% · $5 cap.

 

Steps to integrate Stripe

 

For allowing the customers to use a Stripe payment gateway, make a payment form. Simply, with the pre-built UI components known as elements, it can be used. Follow the below process:

Step 1# Fix Stripe Elements

 

From Stripe.js, the stripe elements can be found out. The script can be loaded easily from https://js.stripe.com and integrated on the web page. 

 

It is better to use the script on the checkout and other web pages as well if fraud protection is your concern. Hence, Stripe can find out the anomalous behavior and save the site from breaching. 

 

Create an instance of elements that appears as: 

 

var stripe = Stripe(‘pk_test_6pRNASCoBOKtIshFeQd4XMUh’);

var elements = stripe.elements();

 

Replace the general API key above with an actual publishable API key. Therefore, you can test the code with the account on Stripe. Always remember to change it with the live key for production use when you want to receive the customer’s payments. 

Step 2# Generate a payment form

 

The elements will make UI components hosted by Stripe. They gather the card information from the customers and make it secure. There is no need to create them manually because they can be placed from there only.

 

For including the components in a suitable area, make empty DOM containers with a new ID in the payment form. The right way is to insert the container next to or within the attribute related to the element container ID. This will create an element that automatically attracts focus when the customer selects the label.

When the forms get loaded, build an instance of an element and use it in the element container:

 

// Custom styling can be passed to options when creating an Element.

var style = {

 base: {

   // Add your base input styles here. For example:

   fontSize: ’16px’,

   color: “#32325d”,

 }

};

// Create an instance of the card Element.

var card = elements.create(‘card’, {style: style});

// Add an instance of the card Element into the `card-element`

card.mount(‘#card-element’);

 

The card element lessens the number of fields and converts the form simply. It is to create a flexible, single input field gathering the required data. 

Step 3# Generate a token to transmit card data securely 

 

Every payment collected from elements should be converted to a token. Check the submit constantly on the form by making an event handler. It sends the information to Stripe and limits the submission. 

 

// Create a token or display an error when the form is submitted.

var form = document.getElementById(‘payment-form’);

form.addEventListener(‘submit’, function(event) {

 event.preventDefault();

 

 stripe.createToken(card).then(function(result) {

   if (result.error) {

     // Inform the customer that there was an error.

     var errorElement = document.getElementById(‘card-errors’);

     errorElement.textContent = result.error.message;

   } else {

     // Send the token to your server.

     stripeTokenHandler(result.token);

   }

 });

});

 

Here, Stripe returns the insurance while resolving the result object. It has either:

• result. error: a Token was successfully built.
• result. error: (an error occurred). It covers client-side validation errors. Review the API reference for feasible errors.

Step 4# Submit the token and the other form to the server

 

Then, the token should be submitted to the server with other details settled. Below is how it appears on JavaScript:

 

function stripeTokenHandler(token) {

 // Insert the token ID into the form so it gets submitted to the server

 var form = document.getElementById(‘payment-form’);

 var hiddenInput = document.createElement(‘input’);

 hiddenInput.setAttribute(‘type’, ‘hidden’);

 hiddenInput.setAttribute(‘name’, ‘stripeToken’);

 hiddenInput.setAttribute(‘value’, token.id);

 form.appendChild(hiddenInput);

 // Submit the form

 form.submit();

}

Worldpay

 

WorldPay has been known to businesses since 1989 as an online multi-currency payment solution. It deals with payment services for online industries of every size-small, medium, and large. 

 

This name in the world of payment providers is a pioneer in several fields like online payment, card payment, and contactless multi-currency processing.

 

WorldPay equips you with gears and devices to assure that you receive accurate and promising remuneration and invest your energy to facilitate and expand transactions

 

Step to integrate Worldpay

 

• Firstly visit this link, select the Sign Up for filling the below information:

• Then, at the Worldpay site, it displays the “Thank you” page and asks you to verify the email confirmation.

• Use the registered email to open the web link sent to you:

• Fill in the details, enter the password registered. Confirm the email to complete the registration process:

• From the Worldpay interface, redirect to Settings->Orders. 

• From the Orders Section, set the Authorisations to Yes. It is for enabling the API Worldpay feature.

• When the authorization is enabled, select API keys to get the client key and service key to fill the configuration part. 

Amazon Payments

 

In 2007, Amazon Pay came into practice. It enables the clients to create the financial transaction on-site for easy checkout using one account. This payment gateway can be operated in different languages and help the leading currencies.

 

It is secure and flexible; provides services of two types to businesses; Amazon Simple Pay (ASP) and Checkout by Amazon (CBA).

 

ASP redirects the client to Amazon’s secure payment website to fill in the payment details. Whereas CBA as an eCommerce solution allows the business owners to accept the account details and leverage Amazon for payment processing. Know about its processing fee below:

 

• No monthly or setup fees;
• Same pricing as Stripe; 2.9% + $0.30 per transaction.

  

Step to integrate Amazon Pay

 

Before starting the process, below are the requirements that you should follow for completing the Amazon Pay Setup in Admin:

 

• A verified Amazon Pay merchant account (https://pay.amazon.com/signup)
• Amazon Pay seller credentials

 

Connect to Amazon Pay

 

• From the Admin sidebar, navigate to Store->Settings-> Configuration.
• Fix the Scope from the upper-left scope to find out where to apply the Amazon Pay configuration.
• Grow sales from the left panel and select the Payment gateways.
• Choose configure for Amazon Pay. 

With no account information for Amazon Pay, select “Get started” for registering the new account from the Amazon Seller Central.

After getting the account details, complete the below sections:

Credentials

 

The process of transferring credentials is done automatically from an Amazon Pay account to Admin. They can be discovered from the Amazon Seller Central in Sandbox and Production modes.

Sandbox mode: Configure credentials

 

• Choose the test credentials for Amazon Pay Sandbox.
• Develop the Credential section.

• Choose the Test Credentials checkbox.
• Pick any method for providing the account details:
• Enter the below information taken from Amazon Seller Central:

1. Merchant Id
2. Access Key Id
3. Secret Access Key
4. Client ID
5. Client Secret

• For Credentials JSON, choose to enter the JSON string of every Amazon Pay seller’s details.
• It can be used to fix the values for Access Key ID, Merchant ID, Client ID, Secret Access Key, and Client Secret on save and clear for the values which are manually entered.
• Change Sandbox to Yes.
• Fix the Payment Region for the store.
• After completing, select “Save Config” for validating the supplied details.
• Search for the ” Your Amazon configuration is valid” message from the configuration page top side.
• When the credential is accurate, get the configuration done. Or, edit the details and try again.

 

Concluding Remarks

 

Despite the payment solution, you pick, keep your business needs in mind, consider what fits the best.  Work on the number of transactions you need to work on every month and how many you are planning in the future. So, consider different options and find out if they are going along with the eCommerce website objective. 

 

Consider that the sites integrating payment methods are more liked by customers. In case you need any piece of advice on payment gateway integration, contact with expert Magento developers of Magentofx.  We will discuss and give you the solutions that will be helpful! Thanks for reading!