Breadcrumb

How to Integrate Payment Gateway in Website

Written by

The GoCardless content team comprises a group of subject-matter experts in multiple fields from across GoCardless. The authors and reviewers work in the sales, marketing, legal, and finance departments. All have in-depth knowledge and experience in various aspects of payment scheme technology and the operating rules applicable to each. The team holds expertise in the well-established payment schemes such as UK Direct Debit, the European SEPA scheme, and the US ACH scheme, as well as in schemes operating in Scandinavia, Australia, and New Zealand. See full bio

Last editedMar 20233 min read

How easy is it for your customers to make an online purchase? If you’ve set up an ecommerce store, you’ll need a functional payment gateway to facilitate the sale. However, first you’ll need to figure out how to embed a payment gateway in your website. Here’s a rundown of how it works.

What is a payment gateway?

Payment gateways allow businesses to process credit card or other electronic payments online. They’re used by ecommerce stores and online businesses as a virtual cash register or POS system. A good payment gateway needs to be able to encrypt payment details for user security, while transferring money into your bank account quickly and efficiently.

Before you learn how to integrate payment gateways in websites, it’s helpful to understand how a payment gateway works.

Step 1: A customer places an order using the online shopping cart.
Step 2: The customer’s web browser encrypts their payment details using secure socket layer (SSL) technology.
Step 3: The merchant’s website forwards this information to a payment gateway, also encrypted with SSL.
Step 4: The payment gateway works with a payment processor to forward the details to a credit card company or bank, where the request is verified.
Step 5: The payment request travels back to the payment processor and on to the gateway. The transaction is approved, and the funds are cleared via the financial institution.

Types of payment gateways

One thing to understand when working out how to incorporate payment gateways in a website is that there’s more than one category of gateway to choose from.

Hosted payment gateways

Hosted gateways redirect the buyer to a hosted platform, where the customer inputs his payment details. These are easier to integrate with your website but can often take longer due to all the redirections.

Integrated payment gateways

The second option is to use an integrated payment gateway with application programming interface (API). These enable direct payments through the online store, with no redirection for clients. However, you’ll need to take particular care with security if you opt to handle payments directly on your website.

How to collect payments with GoCardless

1.

Create your free GoCardless account, access your user-friendly payments dashboard & connect your accounting software (if you use one).

2.

Easily set up & schedule one-off or recurring payments via payment pages on your website checkout or secure payment links.

3.

From now on you'll get paid on time, every time, as GoCardless automatically collects payment on the scheduled date. Simple.

Get started in minutes Learn more

How to integrate payment gateway in website tutorial

The specifics of how to incorporate a payment gateway in a website depends on the type of gateway you’ve selected.

For hosted payment gateways, guidelines will be located on the vendor website. For example, PayPal offers a Connection Guide with JavaScript code to place within your existing site code. This allows users to place an activated button on their website for processing. Whichever hosted gateway you choose, you’ll need to obtain an SSL certificate and gateway credentials. With this information in hand, you’ll then be able to customise your purchase webpage to make it fit into your overall ecommerce shop.

For integrated payment gateways, you’ll need to use a development team to connect your website. Most gateways will be able to link you with their own partner developers or link to an API. When choosing integrated gateways, be sure that it accepts a variety of different payment types including mobile users.

How to integrate payment gateway in HTML website – example

We can illustrate how to embed a payment gateway in a website with a common example – PayPal. Imagine that you have an existing website and want to integrate PayPal as a payment gateway.

The first step is to register a PayPal business account. You can then log into your account, heading for the tools section to find the ‘PayPal Buttons’ icon.
Click on this icon to display a selection of PayPal buttons, which you can choose from to display on your website. You’ll be walked through a range of functions to configure the button’s appearance and service specifications.
Click on ‘create new buttons’ to receive your HTML code, which is used to pay for the good or service. When working out how to integrate payment gateway in HTML website, all you need to do is paste this specialty HTML code into your existing page code.
Test the code to make sure it works before adding any new buttons to your website. You’ll find detailed instructions in the help centre if you need help.

A built-in payment system is a must-have for any business, and you have plenty of gateways to choose from. Yet whether you opt for a hosted or integrated payment gateway, compare features carefully before embedding it into your website.

We can help

GoCardless helps you automate payment collection, cutting down on the amount of admin your team needs to deal with when chasing invoices. Find out how GoCardless can help you with ad hoc payments or recurring payments.