How to connect your online shop to your gateway

How to connect your online shop to your gateway

 

If you have your own custom website, there are two ways to connect your payment gateway and your website:

  •  Simple method: Hosted payment page / checkout page (suitable for most small- and medium-sized businesses)
  •  Advanced method: Direct integration using API (suitable for larger and more complex businesses)

In this article, we break each of these methods down.

Simple method: Hosted payment / checkout page

A hosted checkout page is a custom payment web page hosted on your payment gateway supplier’s website.  

With this method, your customer goes from your website, pays via a checkout page hosted on your gateway supplier’s website, and is directed back to your website.

Because this is the simplest way to link your gateway to your online shop, this method is recommended for most small- and medium-sized businesses.

Here we look at the typical shopping checkout process in more detail:

1)  The customer visits your website, and adds a product to their basket.

2)   On the shopping basket page, the customer double checks what’s in the basket and the total cost, before clicking the ‘checkout’ button.

3)   The customer is directed to the hosted checkout page so they can pay for their goods.

4)   The customer fills in their payment details and delivery address, and applies any discount codes, before clicking a ‘Buy now’ button.

5)   The checkout page sends the payment request through the payment system, and within seconds, the payment is complete.

6)   The hosted checkout page automatically directs the customer back to your website – normally a ‘Thanks for shopping with us’ confirmation page.

7)   The payment gateway behind the checkout page confirms the transaction to your system, which can trigger a confirmation email to be sent to the customer, and update your order fulfilment systems.

Customising your hosted checkout page

Even though the checkout page is technically on the gateway supplier’s website and not yours, you should still be able to customise the page to have the same look and feel as your own website.

Customisation helps maintain a consistent brand experience, and gives the customer trust in the payment process.

You may want to use a payment page with the payment gateway supplier’s logo on it (e.g. Barclaycard, PayPal). This can help inspire confidence if the customer thinks the gateway supplier’s brand is reputable, so it helps to choose a supplier who the public have heard of. 


Advantages and disadvantages of a hosted checkout page 

Advantages

Disadvantages

Easy to do – the checkout page can be easily linked to from your site

Hosted checkout pages aren’t as customisable as other pages on your own website

Customisable page, e.g. adding your logo, changing fonts and colours to match the look and feel of your site

Customers sometimes may not trust the hosted payment page if it looks different to your site

Worry less about PCI DSS compliance – cardholder data is going onto the gateway supplier’s servers and not yours

You’re relying on your gateway provider to be fully PCI DSS compliant (though this doesn’t make you liable in the case of a breach)

If you’re a relatively unknown brand, customers may feel more confident checking out on a page hosted by a trusted brand name, such as Barclaycard

 

Advanced method: Direct integration using API

This is where the payment gateway functionality is integrated directly into your website’s code, using an Application Programming Interface (API).

Due to the complexity of this method, it’s only recommended for larger and more complex businesses that have the resources to integrate the gateway directly into their website.

In this method, the shopping process looks something like this:

1)   The customer visits your website, and adds a product to their basket.

2)   On the shopping basket page, the customer double checks what’s in the basket and the total cost, before clicking the ‘checkout’ button.

3)   The customer is directed to a checkout page hosted on your own site, which has the payment gateway API directly integrated into it.

4)   Your checkout page sends the payment request through the payment system, and within seconds the payment is complete.

5)   The customer is automatically directed to your ‘Thanks for shopping with us’ confirmation page.

6)   The payment gateway behind the checkout page confirms the transaction to your system, which can trigger a confirmation email to be sent to the customer, and update your order fulfilment systems.

 

Advantages and disadvantages of an integrated checkout page 

Advantages

Disadvantages

Gives most control over brand and shopping experience

You’ll need a developer to build your checkout pages

Shoppers never leave your site to fill out payment information – maintaining brand image consistency

Shifts much of the PCI DSS compliance requirements onto you, as opposed to the gateway provider


Now you’re clued up on how to integrate a payment gateway into your website, you might want to read our other introductory guide: How do online payments work?

Discover the secret of a slick ecommerce checkout

Did you know that the right payment gateway can improve your online customer experience and increase conversions? Download our latest white paper to find out more.


Want to accept card payments?

Call us

If you need to speak to an advisor, give us a call on:


0800 096 8199

 

Request a call back

Fill in some details and we'll call you back