Integrate a payment gateway into your website the easy way

So you’ve got an impressive looking website with amazing content that your members are willing to pay for.

Wondering how to accept payments for your exclusive content?

Integrating a payment gateway into your website is the way to go.

Whether you run a clothing store, a membership site or a non-profit organization that accepts donations, you want a convenient payment method so users can pay you.

That’s where a payment gateway comes in.

If adding a payment gateway seems complex, don’t worry!

We’ve created this simple tutorial you can follow step by step. Whether your site is built with WordPress or another platform, by the end of this post, you’ll have a fully functioning payment gateway!

What is a payment gateway?

A payment gateway acts as the middleman between your store and the payment provider, usually a credit card company or bank.

It’s the gateway’s job to send the correct data between relevant parties to ensure a transaction goes smoothly.

When your users sign up, they will enter their credit card information into a form.

The payment gateway will collect data and transfer it to the payment processor to make sure you get paid.

It’s like a secret agent working in the background.

It’s job doesn’t end here. Whatever response comes from the customer’s bank, the payment gateway will transmit it back to your website.

If the transaction is successful, the customer is notified and your store completes the transaction.

If it’s unsuccessful, it may direct the customer to their bank or card issuer to address the problem.

During the whole process, the payment gateway ensures that user data is encrypted and secure.

Types of payment gateways

Payment gateways can be categorized into the following types:

Hosted gateway

A hosted payment gateway redirects a customer to a third party portal to pay the merchant.

For example, when customers use PayPal, they will usually see a popup window where they need to log in and agree the payment.

They will be redirected back to your website after transaction data has been sent to confirm the purchase.

That’s a hosted payment gateway in action.

It’s a cost-effective option for small businesses not interested in the technical details.

A downside to this approach is that the merchant does not have complete control over the whole payment process.

Integrated gateway (non-hosted)

An integrated payment gateway allows customers to complete purchases without leaving your website.

In this arrangement, consumers enter information on the checkout page.

Once they click the Pay Now button, gateway services instantly pull the transaction data from the checkout form and send it to the payment provider.

The customer just sees a ‘payment processing’ message while everything else happens in the background.

This model offers similar benefits to hosted gateways, where the service ensures data security.

You are still responsible for the security of your website though.

This approach has the advantage of letting you customize and brand the interface any way you want.

Onsite payments

As the name suggests, this is an in-house arrangement.

Large businesses often set up their own gateways to accept and process payments.

Companies that use this model typically obtain PCI DSS compliance.

It means that they are responsible for storing, securing, and processing all payment information on their own servers.

On-site payments have several advantages. You have complete control over how everything works and you can customize everything the way you want.

Another benefit of this model is that you can generate additional revenue by providing gateway services to other merchants.

How a payment gateway works

When a customer enters their details to complete a purchase, the payment gateway captures this data, encrypts it and sends it to the payment processor.

Let’s see it in action:

Clara is looking for online courses to improve her design skills. After thorough research, she selected a course on Graphics Guru.

Here is how the payment gateway will work:

1. Clara adds the course to her cart, fills out the checkout information, and clicks the pay button. She uses her Visa card to pay for the course. The card information will be encrypted by her web browser using secure socket layer (SSL).
2. Graphic Guru will transmit the information using an SSL channel to a payment gateway that encrypts the data. A gateway doesn’t store card information; instead it uses an encrypted token.
3. The payment processor is a third-party service that connects the gateway and Graphic Guru’s merchant account. The payment processor receives the transaction data from the payment gateway and passes it on to the Visa network.
4. Visa verifies the transaction data and forwards it to Clara’s Visa provider for authorization. The bank then sends a code with the transaction status or error details to the payment processor.
5. The payment gateway receives the transaction status and passes it on to the website.
6. Clara receives a message confirming the transaction status (accepted or denied) on Graphic Guru’s website.
7. Later, usually after a day, Graphics Guru’s merchant account will receive the funds. It routes the money from the issuing bank to the acquiring (your) bank.

NOTE:

Technically, a payment gateway and a payment processor are two separate entities. But most popular gateways, such as Stripe, also serve as payment processors.

Benefits of payment gateways

Here are some of the benefits you can get by integrating a payment gateway into your website.

Increased security

Security is a key benefit of a payment gateway for both the business and the customer.

All information is encrypted, so only the parties involved in the payment cycle can access it.

This way, both parties are protected from credit card fraud and other security threats.

Faster transactions

Payment gateways help you process payments faster.

A good online payment gateway can speed up payment acceptance by nearly 50 times.

You can provide a better shopping experience and manage your cash flow more effectively.

Minimum setup cost

It is a common misconception that setting up an online payment gateway is an expensive affair only suitable for large companies.

That’s not true. Whatever your business type, there is a cost-effective solution available.

Payment gateways are associated with transaction fees and chargebacks, but they are well worth it.

Greater flexibility

A payment gateway allows your business to accept payments from a wide range of customers.

They typically integrate with local banks, e-wallets, and international payment options such as MasterCard and Visa.

Customers are far more likely to complete their purchase when they find their preferred payment method on the checkout page.

Ease of integration

It is easy to integrate payment gateways into your website or eCommerce platform.

It’s as simple as copying and pasting API (Application Programming Interface) code.

The customer service representative can assist you in case there are any difficulties.

Reduce declined transactions

A declined transaction is always a concern and something to be avoided wherever possible.

Payment gateways generally verify fund availability immediately after a customer enters their banking information.

This means you don’t have to chase customers to complete failed transactions.

What to consider before adding a payment method

When you are going to use a payment method on your site, you should consider a few things before making a choice.

Multiple payment methods

An important factor to consider when selecting a gateway is how many payment methods it supports.

Whether you sell products nationally or internationally, offering a wide variety of payment methods means a better customer experience and more conversions.

Choose a payment gateway that accepts all popular payment methods your target audience is likely to use.

It should also support multiple currencies so your customers can pay you easily.

The fees

It is also important to consider the fee structure.

A gateway charges a fee for third-party tools used for processing and authorizing transactions.

A transaction is typically billed based on three factors: the amount, the location, and the type of product.

In general, payment solution providers have their own terms and fees, which can be summarized as follows:

• Setup fee
• Monthly fee
• Merchant account setup fee
• Fee for each transaction processed

Be sure to read the documentation carefully and look out for hidden costs.

Security

It’s important for payment gateways to make sure merchants receive money from their customers whenever they buy things and don’t have to worry about fraud or credit risk.

The payment gateway you choose should protect each transaction with SSL.

By doing this, you can encrypt the confidential information of your customers’ bank cards, ensuring that it is safe from fraud.

Your preferred gateway should also use tokenization, which replaces sensitive user data with randomly generated characters. This technology reduces the risk of data loss significantly.

How to accept payments with WordPress

It’s a misconception that WordPress is only suitable for blogs.

WordPress offers a robust ecosystem that favors all kinds of eCommerce technologies, including payment gateways.

Let’s begin with our step-by-step guide to accepting payments on a WordPress website.

Step 1: WordPress website requirements

Choosing WordPress for your website means you have complete control over everything.

Whether you want to integrate the payment gateway into an existing website or start from scratch, you’ll be better off with a strong foundation.

It starts with registering a domain name that reflects your business the right way.

The next step is to buy a reliable web hosting service which ensures your site is up all the time.

Next, you’ll also need a powerful multipurpose theme like Astra to support you.

Astra is the best WordPress theme in town that is lightweight, fully customizable, highly secure and comes with over 240 website templates.

You can import a template of your choice in just a few minutes.

If you want to customize it to suit your branding needs, you can do it without touching a line of code.

If you want to set up your website from scratch and need help, we have a comprehensive tutorial to help you install WordPress.

Step 2: Install and set up SureCart

SureCart is one of the most versatile eCommerce plugins on the market with tons of features available.

You can sell anything you want, set up membership websites, offer subscriptions and a whole lot more.

It offers the easiest way to integrate a payment gateway into your website.

Let’s install it and see what it’s capable of!

You can install SureCart in two ways:

From the Astra theme dashboard (if you use it). If you use this method, SureCart will be installed and a setup wizard will start.

You can also install it from the WordPress repository.

Install and activate it like any other plugin when the options appear.

Launch the setup wizard

Click on the Get Started menu item under SureCart to launch the setup wizard.

This walks you through a 4 step process to configure everything yourself.

The first few slides will allow you to sign up with SureCart and set up your online store.

You can easily connect with payment processors during setup. SureCart can integrate Stripe, PayPal, and Mollie into your online store.

Razorpay and Paystack are others on the way.

Connect with payment processor/payment gateway

Next, press the Connect button to connect with a payment processor. You can connect all or choose any of them depending on your target audience.

As mentioned earlier, popular payment processors also act as payment gateways.

So with a single connection through SureCart, we can activate both services in one go.

When you press the Connect button for any payment processor, you will be asked to sign in first to complete the process.

If you don’t have an existing account, you can sign up from the same screen.

Once you successfully connect with a payment processor, its status will change to Enabled.

You can continue with the wizard to complete the fourth step.

Here you will connect the SureCart server to your WordPress website through an API.

Once done, your basic store will be set up and ready to configure.

If you want to know everything there is to know about SureCart, here’s an in-depth tutorial.

Step 3: Create a product

Now we have connected Stripe, we should use the test checkout page to verify everything works.

SureCart creates essential pages and forms during configuration. They include the checkout form, checkout page and customer dashboard.

Let’s add a product and use the default checkout page to test payment.

For adding a product, go to SureCart > Products and press the Add New button.

On the next screen enter the details of the product including title, description, price and image.

SureCart lets you set any type of pricing you want.

Let’s show you how to set a one-time price for your product as that’s the most common.

Press the Add A Price button, choose a name for the price and select Payment Type as One Time from the list.

Put a value in the Price field and press the Create Price button at the end.

Save the changes once you have added all the desired details.

Step 4: Add a product to the checkout form

Let’s now add this product to our default checkout form.

We can do this in two ways: from SureCart > Forms > Checkout or Pages > All Pages > Checkout – Store Checkout.

Let’s use the second option.

Open the Checkout page in edit mode from Pages > All Pages.

You should see a checkout form template inside the page.

Click on the top bar of the form to reveal the Change Template button in the right side bar.

A notification will appear to confirm if you want to change the form template. Press the Ok button to proceed.

The next screen will show you pre-designed form templates for different requirements.

Select the Full Page template and press the Next button.

We need to add the product to this checkout page on the next screen.

Press the Add Product button and select the desired product from the list.

Press the Create button once you’re done.

If you want to watch the whole process, this video is a great resource.

NOTE:

You need a separate checkout page for each product. If you want to offer a bundle deal, you can include multiple products on a single checkout page.

Step 5: Test your checkout form

SureCart’s default checkout page is in live mode unless you change the status to test.

We recommend testing everything before you launch so you can deliver the best customer experience.

To change the status, use the dropdown menu in the top bar and select Test.

With that, the status color will change from green to orange. That’s it!

Once you’re done, don’t forget to press the Update button in the top right corner.

Here’s how our checkout page looks which shows the payment system integrated through Stripe.

Step 6: Add express payment to the checkout page

Let’s now add express payments to our page to add more options for customers.

Stripe automatically shows Google Pay and Apple Pay buttons depending on the device being used.

If your customers are from China, they will see AliPay on your checkout page.

To add express payment, open the same checkout page in edit mode.

Click anywhere inside the form where you want to add the desired feature.

A plus sign will appear. Press it to select Express Payment from the list.

Use the drag and drop feature to place the express payment box wherever you want.

To do this, click on the Document Overview button to see the list of form components.

Expand the list to locate Express Payment. Drag and drop it anywhere you want to place it.

Open the checkout page once again to see how it looks now.

Safari users will now see Apple Pay and Chrome users will see Google Pay buttons.

How to accept payments with Non-WordPress website

You can also integrate different payment gateways into your non-WordPress site.

For example, if you want to add PayPal to your site, you can add it in a few minutes.

Similarly, you can integrate Stripe and other payment gateways into your site.

Here’s how.

1. The first thing you’ll need to integrate PayPal with your website is a PayPal business account.
2. After setting up your PayPal account, you will need to sign in to your PayPal dashboard. Select Business Tools on the top menu bar.
3. Click on PayPal Checkout and select Get Started on the next page.
4. Select to use a PayPal payment button or insert a code to your page.
5. Choose the payment button type you want. The options are: fixed price, single-select list, and variable price.
6. Copy the code on the page and paste it on your website.

Once you choose a button, PayPal generates HTML code for you. You need to copy this code and paste it on your website where you want to show the PayPal button.

Ideally, it should be on your checkout page.

Final thoughts

Payment gateways are an integral part of checkout.

Without one, online businesses can struggle to receive payments.

Thanks to modern eCommerce solutions such as SureCart and this tutorial, you can easily add a payment gateway yourself in just a few minutes!

Which payment gateway works best for you? Don’t forget to share your thoughts in the comments.