How to Integrate Payment Gateway in Website like PayPal or Amazon Pay

You run your own online store... You’ve invested in advertising, created beautiful product photos, and built up your social media presence. Traffic is growing. People are browsing your site, adding items to their carts… and then—silence. Sales aren’t coming through. So, you dig into the data and uncover a hard truth: customers are dropping off at the final step — the payment process, which may include potential issues. Why? The checkout takes too long, their preferred payment method isn’t available, or the site just doesn’t feel secure. And you’re not alone — over 70% of online shoppers abandon their carts, and payment-related issues are one of the leading causes.

In e-commerce, every second and every click matters. Even the most attractive offer can fall flat if the checkout page process is clunky, confusing, or doesn’t build trust. The numbers say it all — over 22% of customers bail on a purchase when the checkout process is too long, and 17–25% abandon their carts because they don’t feel confident their payment is secure.

Integrating a payment gateway isn’t just a technical task — it’s a crucial part of building trust, driving conversions, and delivering a smooth user experience.

In this article, we’ll take a look at the key research findings and best practices that will help you successfully integrate your payment gateway and grow your chances of closing a sale.

What is a payment gateway?

A payment gateway is a solution that connects your bank account with a merchandising platform to which you wish to transfer money. It creates a secure tunnel between online retailers and buyers.

Most of eCommerce service providers create a website with payment options as it is a fundamental feature offered to their clients. It allows us to make purchases anywhere in the world while ensuring maximum data security.

Payment gateways are virtual terminals equivalent to physical point-of-sale terminals.

How does a payment gateway work?

A payment gateway is an important broker between customers and merchants. It is dealing with payment processing and authorizing. Payment gateways deliver an encryption method to sensitive data like credit card numbers. The data is encoded giving you a guarantee that it is sent securely between the online store and the customer.

Here is a basic flow of the transaction:

• 

  a customer finishes an order by clicking a submit button or its equivalent

• 

  the customer is redirected to a payment gateway allowing him/her to choose credit card payments or to be redirected to a bank website. The transaction is transferred to the issuing bank or another page like 3Dsecure to authenticate the transaction

• 

  if the authentication is successful the bank checks if the customer has enough funds on his/her account to make a response to the payment gateway that the transaction is a success or not

• 

  when the response from the bank is ready, it goes to the merchant. If the answer is negative, the merchant will display a notification about an error to the user. If it is positive, the merchant seeks the transaction from the bank

• 

  in the end, the bank settles the payment with the payment gateway, which settles the money with the merchant

The key points that any payment gateway provided are authorization, settlement and reporting.

How does a payment gateway keep information secure?

Security is crucial in the eCommerce world. Customers want to keep their credit card information and payment information safe. Data security in online payments or eCommerce can be ensured by using technologies like:

• 

  TLS encryption: payment gateways use SSL certificates. An easy way to check if our payment gateway uses a secured protocol is to check its URL. If it is https we can assume that we are secure

• 

  PCI-DSS Compliance: the Payment Card Industry Data Security Standard was established to provide secure payment solutions by forcing companies to use Firewalls on their internal networks and encrypt the cardholder data while denying to store this data on disks or paper

• 

  Tokenization: a way of substitution the real card numbers with randomly generated ones that are useless to hackers

• 

  Two-factor authentication: an extra layer of security that is used to confirm the user’s identity by sending a message to a registered mobile number

How to choose the right payment gateway

Choosing a payment gateway isn’t just a technical step — it’s a business decision that directly affects your sales, your customers’ trust, and the overall customer experience your store delivers, especially in relation to your merchant account . You’re basically choosing a partner to handle one of the most sensitive stages of the customer journey: the moment they hand over their money. So what should you be looking for?

A seamless and secure checkout isn’t just a convenience — it’s a necessity. When customers feel safe and the process is effortless, they’re more likely to complete their purchase and come back again. ~ Mateusz Wieczorek, Ruby on Rails and React.js developer

Security and compliance

Your payment provider should meet the highest security standards. Look for:

• 

  PCI DSS compliance (Payment Card Industry Data Security Standard),

• 

  3D Secure 2.0 (like Verified by Visa or Mastercard SecureCode),

• 

  Tokenization of payment data,

• 

  And of course, SSL encryption on your website.

Today’s shoppers are more cautious than ever. If something feels off or unsecured, many won’t think twice before abandoning their cart.

Supported Payment Methods

Customers expect choice. The more payment options you offer, the fewer sales you'll lose due to friction. A modern gateway should support:

• 

  Credit/debit cards (Visa, Mastercard, Amex),

• 

  Bank transfers and local payment methods (like ACH in the U.S., SEPA in the EU),

• 

  Digital wallets (Apple Pay, Google Pay, PayPal),

• 

  Buy Now, Pay Later options (like Klarna, Afterpay, Affirm),

• 

  Mobile payments and QR-based options.

Make sure the methods align with your target audience. For example, U.S. shoppers love Apple Pay and BNPL, while European users often prefer bank transfers or iDEAL (in the Netherlands).

Payment gateway transaction types

Payment gateway providers support many types of transactions. The most common ones are:

• 

  payment/sale/debit: the most standard transaction. The payment gateway asks the bank about the authorization of transactions. If it is a successful settlement of the transaction will be accomplished by the end of a working day

• 

  authorization: a payment gateway blocks demanded amount of money on the buyer’s account for the future settlement transaction. The period during which the money is blocked depends on the card system and the issuing bank but it usually takes from 3 to 7 days

• 

  capture: this kind of transaction takes place when the merchant wants to charge the amount of money that was previously blocked by an authorization transaction. To capture a transaction means to send it for settlement

• 

  void: if the transaction is not settled it allows to immediately unlock the previously blocked transaction on the user’s account without the need to wait for the blocking time to expire

• 

  refund: a kind of transaction that gives the merchant an opportunity to cancel the transaction when the buyer had been already charged. It sends the money back to the client’s bank account

• 

  chargeback: an operation when a customer appeals to the bank about the charges on their bill. A customer can appeal in cases when the item was not received, due to technical problems, unauthorized card usage or in the case of a friendly-fraud situation

• 

  credit: a transaction similar to a refund. It can only proceed in the case when the previous transaction successfully incomed to the buyer’s account. The merchant can credit user’s credit card exceeding the amount of money from the previous successful transaction

Types of Payment Gateway Integrations

There are two types of payment gateways: hosted and non-hosted. In a hosted payment gateway after clicking the purchase button the customer is redirected to the payment service provider page.

In non-hosted payment gateways the user enters the debit or credit card details directly on the checkout page of the store owner.

Here are the most popular payment gateway providers:

HOSTED PAYMENT GATEWAYS

• 

  PayPal

• 

  Amazon Pay

• 

  Stripe

• 

  SagePay

NON HOSTED PAYMENT GATEWAYS

• 

  Authorize.net

• 

  BrainTree

• 

  PayPal Pro

• 

  PayU

• 

  Adyen

• 

  FirstData

• 

  MongoPay

• 

  SagePay Direct

Easy Integration and Tech Compatibility

Your gateway should integrate seamlessly with:

• 

  Your e-commerce platform (Shopify, WooCommerce, BigCommerce, Magento),

• 

  Your CRM or ERP system,

• 

  Analytics tools like Google Analytics or Hotjar.

Look for gateways that offer:

• 

  Pre-built plugins,

• 

  Well-documented REST APIs,

• 

  Webhooks (for automating post-payment actions like emails or invoice generation).

Fees and Pricing Transparency

Not all gateways price their services the same way. Be sure to compare:

• 

  Setup or onboarding fees (often $0),

• 

  Transaction fees (usually 1.5%–3.5% per sale),

• 

  Monthly subscription costs or hidden charges (like chargeback fees),

• 

  Withdrawal and currency conversion fees.

Pro tip: The cheapest gateway isn’t always the best choice. A slightly higher fee may be worth it if it leads to more successful transactions and fewer cart abandons.

Support and Provider Reputation

Ask yourself:

• 

  Do they offer 24/7 support (preferably with live chat)?

• 

  Is their documentation clear and up to date?

• 

  Do they have solid reviews or case studies?

• 

  Are their terms transparent?

Bonus tip: Try A/B testing different gateways or checkout flows. Even small improvements in speed or UX can lead to noticeable bumps in conversion rates.

How to integrate a payment gateway

Follow the steps to embed payment on the website:

How to integrate PayPal into my website? Step by step

create a PayPal button

<div id="paypal-button"></div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
  paypal.Button.render({
    // Configure environment
    env: 'sandbox',
    client: {
      sandbox: 'demo_sandbox_client_id',
      production: 'demo_production_client_id'
    },
    // Customize button (optional)
    locale: 'en_US',
    style: {
      size: 'small',
      color: 'gold',
      shape: 'pill',
    },

    // Enable Pay Now checkout flow (optional)
    commit: true,

    // Set up a payment
    payment: function(data, actions) {
      return actions.payment.create({
        transactions: [{
          amount: {
            total: '0.01',
            currency: 'USD'
          }
        }]
      });
    },
    // Execute the payment
    onAuthorize: function(data, actions) {
      return actions.payment.execute().then(function() {
        // Show a confirmation message to the buyer
        window.alert('Thank you for your purchase!');
      });
    }
  }, '#paypal-button');

</script>

set up the basic payment

payment: function(data, actions) {
  return actions.payment.create({
    transactions: [{
      amount: {
        total: '0.01',
        currency: 'USD'
      }
    }]
  });
}

extend the basic payment with additional parameters

payment: function(data, actions) {
  return actions.payment.create({
    transactions: [{
      amount: {
        total: '30.11',
        currency: 'USD',
        details: {
          subtotal: '30.00',
          tax: '0.07',
          shipping: '0.03',
          handling_fee: '1.00',
          shipping_discount: '-1.00',
          insurance: '0.01'
        }
      },
      description: 'The payment transaction description.',
      custom: '90048630024435',
      //invoice_number: '12345', Insert a unique invoice number
      payment_options: {
        allowed_payment_method: 'INSTANT_FUNDING_SOURCE'
      },
      soft_descriptor: 'ECHI5786786',
      item_list: {
        items: [
        {
          name: 'hat',
          description: 'Brown hat.',
          quantity: '5',
          price: '3',
          tax: '0.01',
          sku: '1',
          currency: 'USD'
        },
        {
          name: 'handbag',
          description: 'Black handbag.',
          quantity: '1',
          price: '15',
          tax: '0.02',
          sku: 'product34',
          currency: 'USD'
        }],
        shipping_address: {
          recipient_name: 'Brian Robinson',
          line1: '4th Floor',
          line2: 'Unit #34',
          city: 'San Jose',
          country_code: 'US',
          postal_code: '95131',
          phone: '011862212345678',
          state: 'CA'
        }
      }
    }],
    note_to_payer: 'Contact us for any questions on your order.'
  });
},

execute the payment

onAuthorize: function(data, actions)
{
  return actions.payment.execute().then(function()
  {
    // Show a confirmation message to the buyer
    window.alert('Thank you for your purchase!');
  });
}

How to enable Amazon integration? Step by step

create an Amazon Pay button

<div id="AmazonPayButton"/>
<script type="text/javascript">
  var authRequest;
  OffAmazonPayments.Button("AmazonPayButton", "YOUR_MERCHANT_ID ", {
    type:  "ENTER_TYPE_PARAMETER",
    color: "ENTER_COLOR_PARAMETER",
    size:  "ENTER_SIZE_PARAMETER",

    authorization: function() {
      loginOptions =
        {scope: "ENTER_SCOPES", popup: "ENTER_POPUP_PARAMETER"};
      authRequest = amazon.Login.authorize (loginOptions,
        "YOUR_REDIRECT_URL ");
    },
    onError: function(error) {
      // your error handling code
    }
  });
</script>

add Address Book and Wallet Widgets to your website

<!--- please put the style below inside your CSS file -->
<style type="text/css">
   #addressBookWidgetDiv{width: 400px; height: 228px;}
</style>

<div id="addressBookWidgetDiv">
</div>

<script>
  new OffAmazonPayments.Widgets.AddressBook({
    sellerId: 'YOUR_SELLER_ID_HERE',
    agreementType: 'BillingAgreement',
     
    onReady: function(billingAgreement) {
      var billingAgreementId = billingAgreement.
      getAmazonBillingAgreementId(); 
    },
    onAddressSelect: function(billingAgreement) {
      // Replace the following code with the action that you want to perform
      // after the address is selected.
      // The amazonBillingAgreementId can be used to retrieve
      // the address details by calling the GetBillingAgreementDetails operation.
      // If rendering the AddressBook and Wallet widgets on the same page, you
      // should wait for this event before you render the Wallet widget for
      // the first time.
      // The Wallet widget re-renders itself on all subsequent
      // onAddressSelect events without any action from you. We don't
      // recommend that you explicitly refresh it.
    },
    design: {
      designMode: 'responsive'
    },
    onError: function(error) {
      // your error handling code
    }
  }).bind("addressBookWidgetDiv");
</script>

obtain buyer’s authorization for recurring payments

<!--- put the style below inside your CSS file -->
<style type="text/css">
    #consentWidgetDiv {width: 400px; height: 140px;}
 </style>

<div id="consentWidgetDiv">
</div>
<script>
new OffAmazonPayments.Widgets.Consent({
  sellerId: 'YOUR_SELLER_ID_HERE',
  // amazonBillingAgreementId obtained from the Amazon Address Book widget. 
  amazonBillingAgreementId: amazonBillingAgreementId, 
  design: {
    designMode: 'responsive'
  },
  onReady: function(billingAgreementConsentStatus){
    // Called after widget renders
    buyerBillingAgreementConsentStatus =
      billingAgreementConsentStatus.getConsentStatus();
    // getConsentStatus returns true or false
    // true - checkbox is selected
    // false - checkbox is unselected - default
  },
  onConsent: function(billingAgreementConsentStatus) {
    buyerBillingAgreementConsentStatus =
      billingAgreementConsentStatus.getConsentStatus();
    // getConsentStatus returns true or false
    // true - checkbox is selected - buyer has consented
    // false - checkbox is unselected - buyer has not consented

    // Replace this code with the action that you want to perform
    // after the consent checkbox is selected/unselected.
   },
  onError: function(error) {
    // your error handling code
   }
}).bind("consentWidgetDiv ");
</script>

set a billing agreement details and confirm the agreement

https://mws.amazonservices.com/OffAmazonPayments_Sandbox/2013-01-01?
AWSAccessKeyId=AKIAJKYFSJU7PEXAMPLE
&AmazonBillingAgreementId=C01-8824045-7416542
&Action=SetBillingAgreementDetails
&BillingAgreementAttributes.PlatformId=PLATFORM_ID_HERE
&BillingAgreementAttributes.SellerNote=APPROVE LITE APPROVE HEAVY
&BillingAgreementAttributes.SellerBillingAgreementAttributes.CustomInformati
on=Example Customer Info
&BillingAgreementAttributes.SellerBillingAgreementAttributes.StoreName=Test Store Name
&MWSAuthToken=amzn.mws.4ea38b7b-f563-7709-4bae-87aeaEXAMPLE
&SellerId=YOUR_SELLER_ID_HERE
&SignatureMethod=HmacSHA256
&SignatureVersion=2
&Timestamp=2013-12-11T10:57:18.000Z
&Version=2013-01-01
&Signature=Z0ZVgWu0ICF4FLxt1mTjyK+jdYG6Kmm8JxLTfsQtKRY=

validate the billing agreement

https://mws.amazonservices.com/OffAmazonPayments_Sandbox/2013-01-01?AWSAccessKeyId=AKIAJKYFSJU7PEXAMPLE 
&AmazonBillingAgreementId=C01-8824045-7416542 
&Action=ValidateBillingAgreement 
&MWSAuthToken=amzn.mws.4ea38b7b-f563-7709-4bae-87aeaEXAMPLE
&SellerId=YOUR_SELLER_ID_HERE 
&SignatureMethod=HmacSHA256 
&SignatureVersion=2 
&Timestamp=2013-12-11T10%3A38%3A44.000Z 
&Version=2013-01-01 
&Signature=gP11oEBaaiQdASWsLDyid18Wn%2BB%2FKZQQtKgpHCtDHdc%3D

request authorization

https://mws.amazonservices.com/OffAmazonPayments_Sandbox/2013-01-01 ?AWSAccessKeyId=AKIAJKYFSJU7PEXAMPLE 
&Action=AuthorizeOnBillingAgreement 
&AmazonBillingAgreementId=C01-1234567-1234567 
&AuthorizationAmount.Amount=10 
&AuthorizationAmount.CurrencyCode=USD 
&AuthorizationReferenceId=test_authorize_1 
&MWSAuthToken=amzn.mws.4ea38b7b-f563-7709-4bae-87aeaEXAMPLE
&SellerId=YOUR_SELLER_ID_HERE
&SellerAuthorizationNote=ForNovemberOrder 
&SellerOrderAttributes.SellerOrderId=testSellerOrderId 
&SellerOrderAttributes.StoreName=testStore 
&SellerOrderAttributes.CustomInformation=ExampleInformation 
&InheritShippingAddress=true 
&SignatureMethod=HmacSHA256 
&SignatureVersion=2 
&Timestamp=2012-10-03T19%3A01%3A11Z 
&TransactionTimeout=60 
&Version=2013-01-01 
&Signature=WlQ708aqyHXMkoUBk69Hjxj8qdh3aDcqpY71hVgEXAMPLE

Tada! Your payment gateway is ready!

Conclusions

There are many ready-made solutions for payment gateways on the market. Choosing the right provider is a key decision for growing your business. Implementing a payment gateway into your website will deliver enhanced user experience and maximum security for your customers. Many of payment gateways are equipped with security measures like TLS encryption, two-factor authentication and are PCI-DSS compliant.

Integrating a payment gateway is not complicated and will definitely have a positive impact on your store.

If you are looking to create a website integrated with a payment gateway or need to add a gateway to your existing product, contact our team of developers.