EN
E-Commerce Jul 27, 2021

How to Integrate a Payment Gateway in Your eCommerce Website

Jane Vyshnova

Jane Vyshnova

CEO

Author

How to Integrate a Payment Gateway in Your eCommerce Website

Content

  1. What is a payment gateway?
  2. How the eCommerce payment gateway works and why you need it
  3. How to choose the right gateway for your eCommerce website
  4. The cost of payment gateway integration
  5. PayPal
  6. Authorize.net
  7. Stripe
  8. Custom gateway
  9. Summary

Nowadays, more and more people prefer not to waste time on physical shopping trips, and opt, instead, to buy things or services online right from the comfort of their own home. This is an understandable commodity and benefit of modern life.

Have a project in mind?

Lets talk about it

Request a quote

Online shopping means that anything can be purchased online, and not just seen or appreciated. It also means that every merchant aiming to increase sales should consider online payment gateway integration.

every merchant aiming to increase sales should consider online payment gateway integratio

What is a payment gateway?

It is a service provider that provides payment authorization. Basically, it’s a software application connecting a website with the bank, so that the customers can pay you right there on the spot without leaving their apartment.

This type of service can be used by anybody, including eCommerce websites, other service providers that want their users to pay online, and even non-profit organizations that collect donations online.

There are many different payment gateways, including Stripe, PayPal, Authorize.net, Google Checkout and direct MasterCard/Visa payments. All of them have their advantages and disadvantages, and each one takes particular commissions.  

What is a payment gateway

These days, online payments have become more and more popular. Even older people use digital banking now and pay for many services online. According to Statista, transaction values are also growing rapidly.

According to Statista, transaction values are also growing rapidly

By 2022, transaction values for digital commerce are set to reach US$5,411,354. This only proves the fact that your website needs to provide customers with online payment opportunities.  

This only proves the fact that your website needs to provide customers with online payment opportunities.

Let’s look at several questions that need to be considered before a payment gateway integration. Understanding how it all works can help you choose the best option and choose the best system for your business. This is an important step, as the convenience of the solution you choose may influence the buying decisions of your potential customers.

Let’s look at several questions that need to be considered before a payment gateway integration

How the eCommerce payment gateway works and why you need it

Generally, online payment systems can be compared with the point of service that can be successfully used for any sort of payment with the help of your bank card. Its main role, in this case, is to authorize and approve the transaction, the only difference being that you don’t have to actually use a physical point of service.

Also read: How Ecommerce Business Can Increase Customer Lifetime Value?

If you have an eCommerce website but still wonder whether you need to implement a payment gateway, the answer for you here is, undoubtedly, yes. You will need to implement this so that you have the opportunity to obtain payments directly from your customers. Even if you also have a brick and mortar shop, it still makes sense to add a payment gateway to your website in order to drive more customers and increase sales by serving those people who would never be able to make it to your physical location.

Also read: 10 Best Practices for Creating a Successful eCommerce Homepage

All payments that are processed online are done so as transactions with no card present, which means that you don’t get to see the client’s card, only the information your customer enters in the suggested fields. Without the physical presence of the card, it becomes a bit simpler to commit fraudulent actions on both ends. This means that the online payment system you use should be reliable and provide a high level of security.

Also read: What is the Best Multi Channel Ecommerce Platform?

All payment systems use approximately the same mechanisms, consisting of several stages, most of which are hidden behind the stage. There is a bunch of “communication” between different facilities, series of approvals, complex processes of sending funds, etc. The whole process, in brief, looks like this:

Some of these steps happen almost simultaneously, though the funds may take a while to actually appear on your account. Modern gateways comply with all the mentioned operations and authorizations in order to protect both parties and let then finalize their deals.

Now you see that the question is not about whether you need payment system, but it is how to include a payment gateway in a website and how to make sure you chose the right one.

How to choose the right gateway for your eCommerce website

First of all, the choice lies between integrated and hosted payment gateways. Integrated options allow users to establish a connection with them through the API they provide for your eCommerce website. Speaking in plain terms, you serve the customer right there on your site without sending him or her away. On one hand, it’s great, as it cannot possibly harm your conversion rates.

On the other hand, it makes you responsible for the security and keeping your customer’s data well-protected. Most likely, you will need some development performed by a professional programmer to handle most integrated gateways, as it is quite an undertaking to do on your own.

Hosted payment gateways take the transaction itself away from your website so that it happens on a payment platform’s processor. In this case, you can breathe easily without being responsible for any private data or PCI compliance. PayPal operates in this way, for example. There are some drawbacks in this type of gateway, too, as some customers don’t trust third parties, and the fact that you likely don’t want your customers to have to leave your website to complete a payment, as this lowers the conversion rate.

To make the right choice, you should analyze the eCommerce platform you use. If you use Shopify, there are some special requirements to make sure that the chosen gateway is compatible.

The cost of payment gateway integration

Before you integrate online payment into your website, check the fees that apply in different stages. They often add up, and it’s better to have a list of what is important for you in order to pay attention specifically to the development of those elements.

To start, there are always registration, setup and monthly fees. Then, there are transaction, processing, refund and chargeback payment fees. Don’t forget about these hidden components, or you will be surprised down the road. In addition, there are fund transfer fees and termination fees. These are different according to the different payment gateways, though the difference is often not too prominent.

Accepting online payments is not the only advantage of gateways, as these are very complex and often multifunctional systems. Depending on what you need, you might add features that will make it more safe or convenient for your users to transfer their money. Payment gateways often help with other operations, such as:

Below are some examples of payment gateways that are popular now; however, the number of such systems is growing fast with new technologies appearing on the market. While those are being tested, you may want to choose one of the better-known options.

PayPal

There is hardly a person today who hasn’t heard of PayPal, especially if they are an active user. It is one of the most famous payment systems in the world and, according to Statista, the payment volume in PayPal doubled from 2014 to 2017, and it seems like there is still potential for growth, as the company keeps adding new features to lure customers.

Another advantage of PayPal is that there are many freelancers paid through this system, which accumulates significant sums of money in their accounts. Spending this money within the PayPal ecosystem is easy and convenient, which is an additional benefit. Providing your potential customers with the possibility of using a system they already know well can bring amazing results.

To pay through PayPal, users don’t even have to provide their bank account information. Instead, they just need to create an account within PayPal itself. This platform is especially popular among millennials, so most mid-sized businesses use this type of payment gateway to get paid and increase revenue levels among clients who have these types of accounts. As for large companies, they usually integrate this system as an additional payment gateway.

In this case, the question of how to integrate a payment gateway into a website has a very clear and simple answer. It is being integrated through the Express API, which is a fast and convenient method.   

Here are some examples of the Standard PayPal and Express Checkout processing fees:

PayPal Payments Pro processing fees:

How to integrate PayPal

You’ll need the JavaScript checkout.js script to integrate Express Checkout, and this is provided by PayPal. To render the button on your website, simply add the checkout.js script to your client and also add this code on the page where you want the PayPal button to render:

how to add paypal code to your site

With the help of the PayPal checkout script, you can configure the appearance of the button on your website and define the scenario after buyer authorizes or cancels the payment, as well as determine what happens in case of an error.

As for the integration itself, there are several options such as:

You can choose the method that suits the needs of your business in the best way. Don’t forget to test everything before you let your clients actually use your payment form live.

Authorize.net

This payment gateway is one of the oldest available. It started operating in 1996, so it has quite a well-established reputation. This payment processor is sometimes called the king of online payments, with its great fraud protection services, easy-to-use checkout opportunities and customizable integrations and subscription-based additional features.

The interface is friendly, which means that users are likely to finalize deals instead of dropping them half-way due to bad UI/UX design (which might happen with less reputable payment processors). If you have in-house or freelance developers who deal with this area of your business, they might be happiest with this solution. It is also quite easy to integrate a payment gateway in website if you choose Authorize.net.

Here is some data on the processing fees:

How to integrate Authorize.net

To obtain access to Authorize.Net API you need to create a sandbox account with merchant authentication. All requests are being sent via the HTTP POST method to one of the API endpoint URLs.

To actually integrate Authorize.net, there are several options, including:

These provide different levels of compliance and control, have different SSL requirements and suit different types of businesses. The best option is to check the official website and choose the best solution from there.

Stripe

As opposed to the previous payment gateway solutions we’ve discussed, this one is quite cutting-edge. It appeared on the market not too long ago, and has already gained a great reputation among payment solution providers. It is highly customizable and suggests some state-of-the-art and complex features such as accepting payments through subscriptions, marketplace or third-party applications.

As mentioned above, Stripe is amazingly easy to customize, which means that your developers will be able to adjust everything to the particular needs of your company. If there are no special needs, there are still options of making it even more appealing for your customers to shop on your eCommerce website.

Example of processing fees:

How to integrate Stripe

To provide your customers with the opportunity to use the Stripe gateway, you need to create a payment form on your website. It is simple with the help of pre-built UI components called Elements. Here is the process:

Step 1: Set up Stripe Elements

You can find all the elements in Stripe.js. Load this script directly from https://js.stripe.com and include it on your page:

For better fraud protection, it is recommended to include the script not only on your checkout page, but also all the other pages. Thus, Stripe will be able to detect anomalous behavior and protect your website from potential fraud.

Then, make an instance of Elements that looks like this:

var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();

Replace the random API key above with the actual publishable API key, so you’ll be able to test this code through your account on Stripe. Don’t forget to replace it with the live key for production use when you are actually ready to accept customers’ payments.

Step 2: Create a payment form

Elements will create UI components that will be hosted by Stripe; they will collect all the card data from your clients and keep it secure. You won’t have to create them manually, as they will be placed into your form from there.

To insert these components in the appropriate areas, create empty DOM containers with unique IDs inside your payment form. The best way to do this is to place the container within a

how to add payment form to your site

After this form is loaded, create an instance of an Element and put 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 minimizes the number of fields and makes the form simpler so that there is a single, flexible input field collecting all the necessary data.

Step 3: Create a token to securely transmit card information

All the payment data collected through Elements may be turned into a token. Handle the submit event on the form by creating an event handler. It sends the data to Stripe and prevents 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);
   }
 });
});

In this case, stripe.createToken returns a Promise which resolves with a result object. This object has either:

  • result.error: a Token was created successfully.
  • result.error: an error occurred. This can include client-side validation errors. Check the API reference for possible errors.

Step 4: Submit the token and the rest of your form to your server

Now submit the token to your server with all the additional information collected. This is how it should look in 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();
}

Custom gateway

Sometimes it feels like no given option fits the needs of your business. With the number of options provided on the market, it is sometimes hard to imagine, but it happens more often than you might think. Building a custom Fintech solutions is a complicated but rewarding endeavor. Rewarding for the developers, first of all, as a full-stack custom payment gateway software’s cost might start at $150,000. Of course, the price can even be higher if you aim at solutions that will stand next to those available on the market now.   

Of course, there are some significant benefits with such an expensive venture. Having developed a new payment application, you’ll be able to control the technology used there and enhance it in any way that suits your business’ operational model. Consider, also, the fact that you can avoid processing fees. If your turnover is really large, this benefit speaks for itself.

Summary

Whatever solution you choose, now you know the basic answers to the question of how to add a payment gateway to a website. Always start with thinking about the best fit for your particular situation.

How many transactions per month do you have and how many do you plan on having in the future? Planning is as important as ever, in this situation. Consider different options and check to see if they go along with your business objectives.

Remember that websites with payment gateways are always more convenient for customers unless you run a non-profit blog or something of that sort. If you need more advice on payment gateway integration, contact us at Dinarys.

We are always glad to discuss what we know well, and provide options for solutions that we can definitely help with.

Lassen Sie Profis Ihre Herausforderung meistern

Unsere zertifizierten Spezialisten finden die optimale Lösung für Ihr Unternehmen.

Bitte einen gültigen Namen eingeben
messages.form.validation.company
Bitte einen gültigen Namen eingeben
Bitte geben Sie eine gültige E-Mail-Adresse ein
Kurze Botschaft

Ihre Nachricht wurde erfolgreich verschickt. Wir melden uns in Kürze! Success icon