What payment gateway integration actually means
Payment gateway integration is the process of connecting your website or app to a payment processor so that customers can send you money. The gateway sits between your business and the bank—it encrypts the card data, sends it to the processor, and tells you whether the transaction went through or failed. You do not build this yourself; you use an existing gateway's tools and follow their steps to plug it into your site.
The integration happens in layers. First, you choose a gateway (Stripe, Square, PayPal, Authorize.net, or another provider). Then you create an account with them and get credentials—usually an API key and a secret key. Next, you either use their pre-built checkout form, write code to call their API, or use a plugin if you are on Shopify or WordPress. Finally, you test it with fake card numbers before going live.
The whole process takes anywhere from a few hours to a few days, depending on whether you are using a no-code solution or writing custom code. Most small businesses use a hosted checkout (the gateway handles the form) rather than building their own payment page.
Key Takeaways
- Payment gateway integration connects your site to a payment processor using API keys or a pre-built checkout form that the gateway provides.
- You choose a gateway based on your business type, transaction volume, and whether you need a plugin or custom code integration.
- Testing with sandbox mode (fake transactions) is required before you process real money, and most gateways provide test card numbers for this.
- Your gateway handles encryption and fraud checks, but you remain responsible for storing customer data securely and following PCI compliance rules.
- Integration costs vary: some gateways charge a flat monthly fee, others charge per transaction, and most charge both plus interchange fees.
Choosing the right gateway for your business type
Different gateways work better for different situations. If you run a Shopify store, Shopify Payments is already built in and requires almost no setup. If you have a WordPress site, WooCommerce works with Stripe, Square, and PayPal through plugins. If you are building a custom web app or need a mobile integration, Stripe and Authorize.net have the most detailed API documentation and the largest developer community.
Square works well if you also take in-person payments—you can use the same account for online and card-reader transactions. PayPal is useful if your customers already trust PayPal or if you need to reach international buyers, since PayPal handles currency conversion. Authorize.net is common in enterprise environments and works well if you need recurring billing or virtual terminals for phone orders.
Cost matters too. Stripe and Square typically charge 2.9% plus $0.30 per transaction for online payments. PayPal charges 2.2% plus $0.30 for standard transactions but more for some business types. Authorize.net charges a monthly gateway fee (usually $25 to $35) plus per-transaction fees. If you process high volume, the monthly fee model can be cheaper. If you are just starting, the per-transaction model is usually better.
The step-by-step integration process
Start by creating a merchant account with your chosen gateway. You will provide your business name, tax ID, bank account details, and expected monthly transaction volume. Most gateways approve this in one to three business days. You will then receive your API keys (a publishable key and a secret key) in your dashboard.
Next, decide how to integrate. If you use a platform like Shopify, WooCommerce, or BigCommerce, the gateway is often already a built-in option—you just enter your API keys in the settings. If you have a custom website, you have two main paths: use a hosted checkout form (the gateway hosts the payment page and you redirect customers to it), or build your own checkout page and call the gateway's API directly.
For a hosted checkout, you generate a link or button in your dashboard and embed it on your site. Customers click it, enter their card details on the gateway's secure page, and are redirected back to you. This is the simplest route and requires no coding.
For a custom checkout, you write code (usually JavaScript on the front end and a server-side language like Python or Node.js on the back end) that collects the card data, sends it to the gateway's API, and handles the response. The gateway provides code samples and libraries (called SDKs) in most popular languages. This route gives you more control over the look and feel but requires a developer.
Testing before you go live
Every gateway provides a sandbox environment—a fake version of their system where transactions do not actually charge anyone. You must test here before processing real payments. The gateway will give you test card numbers (for example, Stripe provides 4242 4242 4242 4242 for a successful charge and 4000 0000 0000 0002 for a declined card). Use these to simulate different outcomes: successful charges, declined cards, expired cards, and insufficient funds.
Test the full flow: add an item to your cart, go to checkout, enter the test card number, and confirm the charge appears in your sandbox dashboard. Then test a failed transaction to make sure your error message displays correctly. Check that your confirmation email sends, that your inventory updates, and that the transaction appears in your records with the right amount and timestamp.
Most gateways let you switch from sandbox to live mode with a single toggle in your dashboard. Do not flip this switch until you have tested at least five transactions and confirmed that your backend is recording them correctly. After you go live, run one real test charge (usually for $1.00) and refund it immediately to confirm the live connection works.
Security and compliance during integration
Your gateway handles encryption—card data is encrypted the moment it leaves the customer's browser and is never stored on your servers in plain text. However, you are still responsible for following PCI DSS (Payment Card Industry Data Security Standard) rules, which means your website must use HTTPS, your servers must be patched and firewalled, and you must not store full card numbers anywhere.
The safest approach is to never touch the raw card data at all. Use the gateway's hosted checkout or a tokenization library (which converts the card into a token your server can store and reuse for future charges without storing the actual number). If you do build a custom checkout, use the gateway's official SDK—do not write your own encryption.
After integration, monitor your transactions for fraud. Most gateways include basic fraud detection (they flag unusual patterns like multiple failed attempts or charges from different countries in minutes). You can also set velocity limits (maximum number of charges per card per day) and require CVV verification. If you see suspicious activity, contact your gateway's support team—they can help you block cards or IP addresses.
Handling errors and failed transactions
Not every charge succeeds. A card might be declined because it is expired, the customer does not have enough funds, or the bank suspects fraud. Your integration must handle these failures gracefully. When the gateway returns a decline, your code should catch the error, display a clear message to the customer (not a technical error code), and let them try again with a different card.
Common decline reasons include insufficient funds, card expired, incorrect CVV, and issuer declined. Some are temporary (the customer can try again tomorrow) and some are permanent (the card is closed). Your gateway's API response will tell you which type it is. For temporary declines, tell the customer to try again later or use a different card. For permanent declines, suggest they contact their bank.
If a charge succeeds but something goes wrong on your end (your server crashes, your inventory system fails), you may end up with a charge but no order created. Build a reconciliation process: at the end of each day, compare your gateway's transaction log to your order database and flag any mismatches. Most gateways provide a reporting API or CSV export for this.
Ongoing costs and monitoring
Your total payment processing cost includes the gateway fee, the processor fee, and the interchange fee (which the card networks charge and varies by card type). For a typical online transaction with a Visa or Mastercard, you will pay between 2.2% and 3.5% of the transaction amount plus a flat fee of $0.25 to $0.35. Amex and Discover are usually higher (3% to 3.5% plus fees).
Beyond transaction fees, watch for monthly minimums, PCI compliance fees, and chargeback fees. A chargeback happens when a customer disputes a charge with their bank—the gateway charges you a fee (usually $15 to $100) to investigate and respond. If chargebacks exceed a certain percentage of your volume (usually 1%), your gateway may suspend your account or raise your rates.
Monitor your gateway dashboard weekly. Check your transaction volume, success rate (the percentage of charges that go through), and average transaction size. If your success rate drops below 95%, investigate why—it could mean your error handling is broken, your test mode is still active, or your gateway is having issues. Most gateways provide email alerts for unusual activity, so turn these on.
Frequently Asked Questions
Do I need to build my own payment page or can I use the gateway's checkout?
You can use the gateway's hosted checkout (simplest, no coding required) or build your own (more control, requires a developer). Most small businesses use hosted checkout because it is faster to launch and the gateway handles security updates automatically. Custom checkout makes sense if you need a specific user experience or you are processing high volume and want to optimize conversion.
What happens if I forget to switch from sandbox to live mode?
Your customers will see an error when they try to pay, or the charge will go through to your sandbox account instead of your real bank account. You will not receive money. Check your gateway dashboard before launch to confirm you are in live mode, and run a real test transaction (then refund it) to be sure.
Can I use the same gateway for my website and mobile app?
Yes. Most gateways provide separate API keys for web and mobile, but they all feed into the same merchant account. Your transactions, refunds, and payouts are tracked together. Some gateways also provide pre-built mobile SDKs (libraries) that handle the integration for you.
What should I do if a customer says they were charged twice?
Check your gateway dashboard for the transaction. If it appears once, the charge probably succeeded but the customer's bank took time to post it, and they will see only one charge after a few days. If it appears twice, issue a refund for one charge immediately through your dashboard (this is usually instant). Then investigate your code to see if a bug caused a duplicate submission—most gateways have idempotency keys to prevent this, but you need to use them correctly.
How long does it take to receive money after a customer pays?
This depends on your gateway and your bank. Most gateways deposit funds to your bank account within one to two business days. Some offer next-day payouts for a higher fee. Weekends and holidays can add delays. Check your gateway's payout schedule in the settings—you can usually choose weekly or daily deposits.