How to Integrate a Payment Gateway: 4 Methods and How They Work

How to Integrate a Payment Gateway

What’s the best way to integrate a payment gateway into your e-commerce website? Is one way better than another for your PCI compliance? How do you get the smoothest checkout flow for your customers?

In this post we take a look at four different ways to integrate a payment gateway and the pros and cons of each method.

1. Payment page served directly from your standard web server

Payment Gateway Integration Via Server APIIn the first method, the payment page (including a form for entering credit card details, for example) is served up directly from your web server. The customer enters their sensitive payment details into the form then, when they click to complete their purchase, their details are sent back to your web server. (You would need to make this page an https page so that the customers details would be secure on their way to your server.) When the server receives the payment details, it then communicates behind the scenes with your payment processor’s server to see if the payment will be accepted.

Advantages: the payment page has exactly the same look and feel as the rest of your website because it is just like any other page.

Disadvantages: the customer’s sensitive payment details pass through your web server. Even if you don’t record them there, a hacker with access to your web server could get access to them. This means that your server needs to be kept extremely secure.

2. Payment page served by your payment processor

Payment Gateway Integration via Redirect

With this method, the payment page is served to the customer from your payment processor’s secure server (it may be customised to match your website’s branding, for example by using your logo and colours). The customer then submits their sensitive payment details back to the payment processor’s server. This means that the payment processor takes nearly all the security burden off your shoulders.

Advantages: great security for minimal effort on your part

Disadvantages: the look and feel of the payment page may not perfectly match the rest of your website. This may put off some customers, potentially losing you sales.

3. Payment page served from your web server; payment form served via an iFrame from your payment processor’s server

Payment Gateway Integration Via iFrame

With this method of integration, the payment page is served by your web server but within it there is a special area known as an ‘iFrame’. This tells the customers web browser to load this area directly from the payment processor’s secure server. The payment processor provides a form for the customer’s sensitive payment details which appears in the iFrame. When the customer submits their details, the sensitive payment details are sent straight to the payment processor’s secure server. They do not pass through your web server.

Advantages: most of the security burden falls on the payment processor rather than you.

Disadvantages: you have less control over the payment form and the look and feel of this area may not completely match the rest of the page.

4. Payment form served by your web server; payment details submitted by JavaScript

Payment Gateway Integration via JavaScript Submission

In this integration method, the payment page is served from your web server, but it includes a reference to a pieces of JavaScript code that is served by your payment processor’s secure server. The JavaScript code is responsible for submitting the customer’s payment details directly to the payment processor’s secure server rather than submitting them to your web server as would otherwise be the case.

This is a relatively new way to integrate with a payment processor and was popularised by Stripe.

Advantages: the look and feel of the payment page, including the payment form, is completely under your control. No sensitive payment details pass through your web server.

Disadvantages: very few payment processors offer this method of integration. The 2015 PCI-DSS security regulations consider this method of integration to be less secure than an iFrame-based integration.

Summary

Method Look-and-Feel Security Availability
1. Serve from your web server **** * ****
2. Redirect to secure server * **** ****
3. iFrame *** **** ***
4. JavaScript **** *** *

We’ve looked at four different ways to integrate a payment gateway. Each one has its pros and cons, particularly with regard to security and the slickness of your checkout flow. Understanding these trade-offs will allow you to choose the right integration method for your particular situation.

Matt Collins

Matt's the founder of PaymentBrain. He enjoys helping business owners navigate the confusing world of payment processing.

One thought on “How to Integrate a Payment Gateway: 4 Methods and How They Work

  1. Very well explained and I really like your article. No matter what is the process but people always want fast, easy and secure payment method. Businessman can increase their business by using a trustworthy payment method.

Leave a Reply

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