August 29, 2024

How to Integrate Payment Gateway in Your Website: 7 Steps

Alena Arsionava

Technology Evangelist

Ecommerce

How to Integrate Payment Gateway in Your Website: 7 Steps

Alena Arsionava

Technology Evangelist

Ecommerce

How to Integrate Payment Gateway in Your Website: 7 Steps

Businesses lose billions of dollars to cart abandonments because they fail to provide customers with preferred payment methods. On average, 48% of them have lost up to 10% of their international revenue because customers didn't find their payment option, according to a BlueSnap survey. By integrating the right payment gateway into your website, you can enhance the checkout process, cut down on abandoned orders, and raise your revenue.

In this article, we cover the most vital steps for adding payments to your site. Whether you're a small business owner or a developer, this guide will explain how to handle online payments effectively.

Key Takeaways

  • To integrate a payment gateway into your website, choose the payment processor (Stripe, Paypal, Amazon Payments, etc.), register an account, and obtain their API integration code. Embed the code on the frontend of your checkout page (e.g., checkout.html). For the backend, create a server-side endpoint to process payments and embed the code in a server file (e.g., server.js). Then, test the integration in the sandbox and go live.
  • The cost of integrating a payment gateway includes initial setup fees ranging from $0 to $250 depending on the provider, ongoing monthly ones charged at avg. 2.9% + 30¢ per transaction and custom integration and customization service. The latter depends on the service provider rates.
  • Payment gateway integration services include end-to-end integration with top e-commerce platforms, customization of payment forms and checkout processes, multi-currency and multi-payment method support, and cross-platform integration.

Which Payment Gateway is Best to Integrate?

The choice of the payment gateway is a critical decision. With the Digital Payments market projected to reach US$16.59 tn by 2028, electronic commerce is becoming a primary way we discover and buy products. 

Integrating a payment gateway into your site lets you enable online transactions for your customers smoothly and securely. After all, it is not just an option that your customers may use or not, but a tool that directly impacts your business operations. 

So, how do you choose one?

In our earlier post, we’ve made a detailed roundup of top payment gateway providers. The list accounts for 10 common names — Stripe, PayPal, Square, Authorize.Net, Adyen, and Braintree — all of which have earned credit from thousands of businesses. 

The choice among them often goes to the primary factors:

  • Does it match the customer preferences?
  • Does it support the necessary payment methods?
  • How secure is it?
  • What are the costs of its integration?
  • How does its integration fit into the business environment?

Let’s consider each factor in detail.

How to Choose a Payment Gateway Integration

When choosing your payment gateway integration, it’s important that you assess the following critical factors.

Customer Location and Preference

Consider your customer regions and preferred payment methods. This approach lets you better address your diverse customer preferences during the checkout process. As such, in the US, the top digital wallets are Paypal (36%), Apple Pay (20%) and Venmo (16%).

Supported Payment Methods 

Payment Gateway Provider Credit/Debit Cards ACH/E-Checks Digital Wallets Local Payment Methods Cryptocurrency Buy Now, Pay Later (BNPL)
Stripe Visa, MasterCard, American Express, Discover, JCB, Diners Club, UnionPay Yes Apple Pay, Google Pay, Microsoft Pay SEPA Direct Debit, iDEAL, Alipay, WeChat Pay, Bancontact, Giropay, EPS, P24, SOFORT, Boleto Yes Afterpay, Klarna
PayPal Visa, MasterCard, American Express, Discover Yes PayPal, Venmo (US only) SEPA Direct Debit, iDEAL, Giropay, Bancontact, MyBank, P24, SOFORT No PayPal Credit
Square Visa, MasterCard, American Express, Discover No Apple Pay, Google Pay No No Afterpay
Braintree Visa, MasterCard, American Express, Discover, JCB, Diners Club Yes PayPal, Venmo, Apple Pay, Google Pay SEPA Direct Debit, iDEAL, Giropay, Bancontact No No
Authorize.Net Visa, MasterCard, American Express, Discover, JCB, Diners Club Yes Apple Pay, Google Pay No No No
Adyen Visa, MasterCard, American Express, Discover, JCB, UnionPay, Diners Club, Carte Bancaire Yes Apple Pay, Google Pay, WeChat Pay, Alipay SEPA Direct Debit, iDEAL, Giropay, Bancontact, EPS, Multibanco, SOFORT, Boleto, OXXO Yes Klarna, Afterpay
2Checkout (now Verifone) Visa, MasterCard, American Express, Discover, JCB, Diners Club No PayPal SEPA Direct Debit, iDEAL, Giropay, Bancontact, SOFORT, Boleto No No
Worldpay Visa, MasterCard, American Express, Discover, JCB, Diners Club Yes Apple Pay, Google Pay SEPA Direct Debit, iDEAL, Giropay, Bancontact, P24, SOFORT No Klarna

If you sell globally, integrate a gateway that supports various payment methods, including credit/debit cards and digital wallets. 

While not common for e-commerce, you might also consider alternative payment options, such as cryptocurrencies. These methods are gaining popularity among non-profit organizations, gaming, healthcare, and telemedicine app development for anonymous online consultations.

Other features to consider:

  • Support of multi-currency transactions 
  • Support of your target customer destinations
  • Support of buy now, pay later (BNPL) method

Security and PCI-DSS

Payment gateway security is regulated by PCI-DSS (Payment Card Industry Data Security Standard). It’s a set of security standards that outlines norms for a secure payment environment and how companies accept, process, store, or transmit payment data.

  • When it comes to secure payment gateways, some of the top players in the market are PayPal, Stripe, Square, Authorize.Net, Adyen, and Braintree. These gateways are not only PCI-DSS compliant but also come with robust fraud detection features, making them a safe and popular choice for many businesses.

The newcomers, however, might not achieve full PCI-DSS compliance. If you consider integrating lesser established payment gateways, double-check their documentation or request information on their security measures.

Transaction Fees and Pricing Plans

Calculate all the fees associated with payment gateways before their integration. The provider will typically charge you a one-time setup fee and a monthly fee, and then a small fee for each transaction processed. Be aware of any additional charges, such as refunds, chargeback, and cross-border transaction fees.

  • PayPal, Stripe, Square, Authorize.Net, and Adyen provide transparent pricing with no hidden costs.

Type of integration

The type of payment gateway integration impacts your customer checkout experience. It can determine how seamlessly customers can make their purchases and their overall satisfaction with the payment process. 

On the business side, it may influence the transaction speed at which your orders will be processed, the security measures you must take on your site, the checkout flow, and interface design. 

So, the type of payment gateway integration is an important decision. Let’s explore the major ones used in e-commerce.

Types of Payment Gateway Integrations

By type, payment gateways can be hosted, integrated, direct post integration, mobile, and combined. Here, we explore the first three types as the most common ones used in ecommerce. 

Hosted

Hosted payment gateways send customers to a new page for completing transactions. The data and the transaction are stored at the service provider, so hosted payment integration doesn’t require PCI-DSS compliance. 

  • Best for: Small businesses with low-medium transaction volumes 
  • How to integrate: To add hosted payment methods to your site, you need to generate a form, basically in HTML, with all the required fields and configure the redirection path for submitting transactions and order confirmation.

Integrated

With integrated payments, you process all the payment data at your site. The customer stays on the same page to complete the order. This method typically requires more development efforts compared to hosted payment gateway integration. Strict security and PCI-DSS compliance are not an option but a must-have requirement.

  • Best for: Custom checkout experience, businesses of all sizes with strict PCI compliance
  • How to integrate: Depending on the chosen provider, you need to embed their API or SDK into your site. The process is usually straightforward and requires you to paste HTML code blocks following the official documentation guide. Whenever the customer clicks on a purchase button, your website will call the provider’s API to verify, record, and forward payment details through a gateway.

Direct Post

The Direct Post integration type lets you combine the principles of hosted and integrated methods. The customer stays at your site when completing the payment, yet the data is posted directly to the payment gateway for processing. It provides the flexibility of customizing the checkout experience yet reduces the overhead with PCI-DSS compliance.

  • Best for: Custom checkout experience, enterprise businesses with moderate PCI compliance
  • How to integrate: Direct post integration is more complex and effort-consuming. Besides, you need to install an SSL certificate on your website to encrypt data transmission. When configuring your HTML form, make sure it posts data directly to the payment gateway’s endpoint and set up your server to handle the payment gateway’s response.

A standalone consideration when choosing among the types is the ease of payment gateway integration

While many payment gateway providers let you quickly embed their products into your site via APIs and SDKs, there are scenarios when payment gateway integration becomes a complex process and requires deep technical expertise. Let’s examine them in detail.

Adding Payments to Your Website - How Complex is It?

Adding payments to your e-commerce website can be a 1-2 day matter or a week's effort. It all depends on your infrastructure and technical background. Depending on the complexity, you can DIY or partner with an e-commerce software development provider

Here's an overview of tasks involved at different complexity levels.

Basic Integration

If you have a small, not loaded website and need basic payment gateway integration, you have the power to handle it yourself. The basic knowledge of HTML/CSS and server-side programming (Node.js, Python, PHP) is usually enough to integrate the payment gateway using provided APIs and create basic form and tokenling.

Best for:

  • Well-structured, modular codebase
  • Using integration as-is
  • No/ few checkout customizations

Advanced Integration

If you need to customize the payment process on your website or add more features and options, such as confirmation emails and detailed error handling, custom payment integration is the go-to choice. 

The scope of configurations may include:

  • Implementing multiple payment methods (e.g., credit cards, digital wallets, bank transfers).
  • Handling recurring payments and subscriptions.
  • Integrating fraud detection and prevention tools.
  • Setting up multi-currency support.
  • Extensive user acceptance testing (UAT) and load testing to ensure performance under heavy traffic.

Payment Gateway Integration for Ecommerce Site: Step by Step

Below, we describe the payment gateway integration process in detail so you can clearly understand what to do at each step.

Payment gateway integration workflow

Step 1. Choose a Payment Gateway

The first step in integrating a payment gateway into your website is to choose an optimal provider. By optimal, we mean the one that matches your business needs. Consider the factors we described above as:

  • supported countries
  • security
  • cost of integration 
  • support for the required payment methods 
  • the type of integration.

Step 2. Sign up and Create a Merchant Account

Once you've chosen the provider, you must sign up at their website to create your merchant account. The merchant account sends customer payments to your company’s bank account. These accounts are FDIC-insured and offer fraud protection. Additionally, you have control over payment transactions between your website and the merchant account. 

The signup process is easy and straightforward, yet be ready to fill in your business and personal information. 

  • Business information: name, address, phone number, type, industry, and business website URL. 
  • Personal data: date of birth, and home address of the business owner or primary contact, your bank account details, and Social Security Number (for US residents).

For Stripe and Paypal registration, the list of data is pretty much the same. Just make sure not to miss the "Business Account" option at the Paypal sign-up.

All payment gateway providers require you to verify your email address. Some, like Stipe, require more detailed business information and an additional verification step: uploading a government-issued ID.

Step 3. Obtain API Credentials

After verifying and setting up your account, you need to obtain your API credentials to add payment to your website. These are the unique public and secret keys required to verify your website's interaction with the payment gateway provider. 

Depending on the provider, you either need to generate your API credentials yourself or copy-paste the provided ones. You will find them on your Developer's dashboard or Developer's workspace. 

Step 4. Set Up Your Website for Payment Integration

The integration, depending on the chosen types of payment gateway, will involve creating a custom payment form and embedding HTML code on the frontend and backend.

Check detailed integration guides on the official provider's websites:

If you have any questions or trouble configuring your integration, you can contact support or research their FAQ and forums.

Step 5. Test the Integration in Sandbox

Testing your payment gateway integration before going live is the set one should consider. Depending on the complexity of your integration, you may run different test scenarios and types. 

For simple integration and small sites, manual testing is usually enough. For high-load websites, you may opt for automated testing to ensure website stable performance at peak hours.

General rules to follow:

  • Run the integrated payment gateways in the test or sandbox mode.
  • Simulate transactions using test card numbers if the gateway provides them.
  • Use different scenarios: successful payment, failed payment, auto-pay/subscription mode if your business implies one, connection lost, etc. 
  • Check for the gateway to return the right payment status update to customers, financial institutions, and your system. 
  • Examine your test report and fix any issues.
  • Reach out to your payment gateway provider for support in case you need assistance with their troubleshooting.

Step 6. Switch to Live Mode 

Once you've checked the proper setup of the payment gateway, you may go live. Make sure to change your sandbox/test API credentials for live/production credentials and update environment variables or configuration files as necessary.

Performing a test live transaction is also useful to ensure everything runs smoothly.

Step 7. Monitor and Track Your Integration

Monitoring your payment processing is crucial as it lets you spot and fix potential issues and vulnerabilities. This oversight helps ensure smooth transaction flows, maintain security standards, and minimize risks of fraud or technical glitches.

You can monitor your payment processing using automated tools and ecommerce integrations that track transaction volumes, detect anomalies, and generate real-time alerts for suspicious activities.

What is The Cost of Integrating a Payment Gateway to a Website?

The cost of integrating a payment gateway consists of initial setup fees and ongoing monthly charges for each transaction. These fees can vary significantly depending on the payment gateway provider and your business's specific requirements. 

Here are some common fees that may help you calculate the cost of your payment gateway integration:

  • Account Setup Fee: The payment gateway provider charges a one-time fee to set up your merchant account. Most providers are free to sign up; however, some may charge you, e.g., Authorize.Net, if you sign up directly, not through resellers.
  • Gateway Setup Fee: A fee for the initial configuration and integration of the payment gateway with your website. Ranges from $50 to $250.
  • Merchant Account Application Fee: Some providers charge a fee to process and approve your merchant account application. Ranges from $0 to $100.
  • API Integration Fee: If you require custom API integration, there may be fees associated with accessing and using the gateway's APIs. Depending on the complexity, the fees range from $100 to $500 or more.
  • SSL Certificate: A secure socket layer (SSL) certificate is necessary to encrypt data during transactions. While not a direct fee from the payment gateway, it's a required security measure. Ranges from $10 to $200 per year, depending on the type of certificate.
  • Plugin or Module Fees: For e-commerce platforms like Magento, WooCommerce, or Shopify, you can purchase specific plugins or modules to facilitate integration. The fee ranges from $0 to $200 per plugin/module.
  • Custom Ecommerce Development: If your website requires custom development to integrate the payment gateway, you may need to pay for developer services. The cost varies widely depending on the scope of work, ranging from $500 to $5,000 or more.

Consider below an overview of costs associated with different payment gateway providers.

Payment Gateway Providers: Costs Overview

Payment Gateway Provider Account Setup Fee Gateway Setup Fee Merchant Account Application Fee Transaction Fees
Stripe None None None 2.9% + 30¢ per transaction (standard)
PayPal None None None 2.9% + 30¢ per transaction (standard)
Square None None None 2.6% + 10¢ per transaction (online)
Braintree None None None 2.9% + 30¢ per transaction (standard)
Authorize.Net $25-$99 $25-$49 $0-$99 2.9% + 30¢ per transaction (standard)
Adyen None None None Custom pricing based on volume
2Checkout (now Verifone) $0-$99 $0-$49 $0-$99 3.5% + 35¢ per transaction (standard)
Worldpay $0-$199 $0-$99 $0-$99 Custom pricing based on volume

Summing up

Integrating a payment gateway into your website is a pivotal step towards enhanced customer checkout. Follow our guide to select the right gateway and ensure its seamless integration. In case you need consultancy or custom integration, get in touch with NEKLO. We provide end-to-end payment gateway integration services that will streamline your business efficiency.