What happens when you add a payment gateway to your site
A payment gateway is software that sits between your website and the banks and card networks that actually move money. When a customer enters their card details on your checkout page, the gateway encrypts that information, sends it to the payment processor, waits for approval or decline, and tells your website what happened — all in about two seconds.
You do not build this yourself. You choose a gateway provider (Stripe, Square, PayPal, Authorize.net, or others), follow their integration steps, and their code handles the security and the communication with banks. The gateway provider keeps your site compliant with payment card industry rules so you do not have to store raw card data on your own servers.
The integration process differs depending on which gateway you choose and how your website is built. A WordPress site with WooCommerce uses plugins. A custom-built site uses API documentation and code. A no-code platform like Shopify has gateways pre-built. But the outcome is the same: your checkout form connects to the gateway, the gateway processes the payment, and your order system gets the result.
Key Takeaways
- Payment gateways provide pre-built code (plugins, SDKs, or hosted forms) that you install on your website rather than writing payment processing from scratch.
- The integration method depends on your website platform: WordPress plugins work differently than custom code, which works differently than Shopify's built-in options.
- You will need a merchant account with the gateway provider and usually a separate bank account to receive the money after transactions clear.
- Testing in sandbox mode (a fake environment) before going live catches configuration errors without charging real cards.
- PCI compliance requirements mean you must never store raw card data on your own server — the gateway handles that part.
Choosing a gateway that matches your website platform
The easiest path depends on what software runs your website. If you use WordPress with WooCommerce, Shopify, BigCommerce, or another e-commerce platform, the gateway provider usually offers a plugin or pre-built integration you can set up in a few clicks. Stripe, Square, and PayPal all publish plugins for the major platforms.
If your website is custom-built (written in PHP, Node.js, Python, or another language), you will use the gateway's API documentation and code libraries (called SDKs). The gateway publishes code samples in multiple languages so your developer can build the connection. This takes longer but gives you more control over the checkout experience.
If you use a no-code website builder like Wix or Squarespace, the builder usually has a limited list of gateways built in. Check what the builder supports before signing up, because switching gateways later means rebuilding your checkout.
The steps to integrate a gateway into your site
The exact sequence depends on your platform, but the general flow is the same. First, create an account with the gateway provider and complete their verification process — they will ask for your business details, tax ID, and bank account information. This can take a few days to a week.
Second, get your API keys (unique codes that let your website talk to the gateway). The gateway provider gives you two sets: one for testing (sandbox) and one for live transactions. Keep these private — they are like passwords for your payment system.
Third, install the integration. For a WordPress site, this means installing the plugin and entering your API keys in the settings. For a custom site, your developer writes code using the gateway's SDK and documentation. For a platform like Shopify, you authorize the app and configure which products use which gateway.
Fourth, test in sandbox mode. Create fake card numbers (the gateway provides these), run test transactions, and check that orders appear in your system correctly. This is where you catch mistakes before real money is involved.
Fifth, switch to live mode and process a small real transaction to confirm everything works. Then monitor the first few days of transactions to make sure payments are flowing correctly.
Understanding the data flow and what information goes where
When a customer checks out, their browser sends card details to the gateway, not to your server. This is the critical security rule. Your website never touches the raw card number — the gateway's code handles that encryption and transmission.
The gateway sends the card data to the payment processor (the bank's system), which checks with the card network (Visa, Mastercard, American Express) and the customer's bank. The processor returns an approval code or a decline reason. The gateway passes that result back to your website in seconds.
Your website then records the transaction in your order system — the customer's name, the amount, the approval code, and the timestamp. You never store the card number itself. The gateway keeps encrypted copies for refunds and disputes, but you do not need them on your server.
Money does not move when ready. The gateway batches transactions (usually daily) and sends them to the processor, which settles with the banks. The funds appear in your merchant account two to three business days later, minus the gateway's fee (usually 2.2% to 3% plus a per-transaction fee).
Configuring webhooks so your system stays in sync
A webhook is a way for the gateway to notify your website when something happens — a payment succeeded, a refund was issued, a subscription renewed. Without webhooks, your website only knows about transactions when the customer is actively checking out. With webhooks, the gateway can tell you about events that happen later.
To set up a webhook, you give the gateway a URL on your website (something like yoursite.com/payment-webhook). When an event occurs, the gateway sends data to that URL. Your website receives it, verifies it came from the gateway (using a secret key), and updates your order system accordingly.
Webhooks are especially important for subscriptions, refunds, and disputes. If a customer's subscription payment fails, the gateway sends a webhook. Your code receives it and can pause their access or send them a notification. Without the webhook, you would not know until you checked your gateway dashboard manually.
Testing before you go live with real transactions
Every gateway provides a sandbox environment — a copy of the live system that uses fake card numbers and does not charge real accounts. Test cards are published in the gateway's documentation (for example, Stripe publishes test card 4242 4242 4242 4242 for successful charges and 4000 0000 0000 0002 for declines).
Run through your entire checkout flow in sandbox mode: add items to the cart, enter a test card, submit the form, and check that the order appears in your system with the correct amount and status. Test refunds, test failed payments, and test edge cases like expired cards or mismatched addresses.
Check that your confirmation emails send, that your inventory updates, and that your accounting system records the transaction. Sandbox testing catches configuration errors before they affect real customers. Many integrations fail because developers skip this step and discover problems after going live.
Security and compliance requirements you need to know
The Payment Card Industry Data Security Standard (PCI DSS) sets rules for how you handle payment information. The most important rule for website owners is straightforward: never store raw card data on your server. The gateway handles that. If you store card numbers, you become responsible for PCI compliance audits, which are expensive and complex.
Use the gateway's hosted payment form or tokenization feature instead. A hosted form means the customer enters their card on a page the gateway controls, not on your site. Tokenization means the gateway gives you a token (a reference code) instead of the card number, and you use the token for future charges.
Keep your API keys private. Do not commit them to public code repositories, do not email them, and do not share them with contractors. Use environment variables or a secrets manager to store them. If a key is exposed, regenerate it when ready in your gateway dashboard.
Use HTTPS on your checkout page (your domain should show a padlock in the browser). The gateway requires this. If your site is not HTTPS, the gateway will not process payments.
Handling errors and troubleshooting common integration problems
The most common integration problem is a mismatch between your test environment and live environment. You tested in sandbox mode, switched to live mode, but forgot to update your API keys or your webhook URL. The gateway is sending data to the wrong place, or your site is sending requests to the sandbox instead of live.
Check your gateway dashboard logs. Every request your website makes to the gateway is logged there, along with the response. If a payment failed, the log shows why: invalid API key, mismatched amount, missing required field, or a decline from the bank. Read the error message carefully — it usually tells you exactly what is wrong.
If customers report that payments are not going through, check three things: Is your merchant account in good standing (some gateways suspend accounts for suspicious activity)? Are you sending the correct currency code? Is your webhook URL correct and responding to requests?
Test with small amounts first. Process a $1 or $0.01 charge to confirm the connection works before asking customers to pay full amounts. Many gateways allow you to refund test transactions when ready.
Frequently Asked Questions
Do I need a separate merchant account if I use a gateway like Stripe or Square?
Stripe and Square provide merchant accounts as part of their service — you do not set up a separate one. Other gateways like Authorize.net require you to open a merchant account with a bank or payment processor first, then connect the gateway to it. Check the gateway's documentation to see which model they use.
What happens if a customer disputes a charge after I have already shipped the product?
The customer's bank investigates the dispute. If the customer claims they did not authorize the charge, the bank may reverse it and refund them. You lose the money and the product. Keep shipping records and delivery confirmation so you can prove the customer received the item. The gateway's dispute dashboard shows the claim and lets you upload evidence.
Can I use multiple payment gateways on the same website?
Yes. You can install plugins or code for multiple gateways and let customers choose which one to use at checkout. This is common for international sites (different gateways work better in different countries) or for businesses that want to offer both credit cards and digital wallets like Apple Pay or Google Pay.
How long does it take for money to appear in my bank account after a customer pays?
The gateway batches transactions daily and sends them to the processor. The processor settles with the banks, which usually takes two to three business days. Some gateways offer faster payouts (next business day or same day) for an extra fee. Check your gateway's payout schedule in the dashboard.
What if my website goes down during a transaction?
The payment still processes because the gateway is a separate system. Your website being offline does not stop the charge. When your site comes back up, the webhook will notify you about the transaction, or you can check the gateway dashboard to see what happened. This is why webhooks matter — they keep your order system in sync even if your site had downtime.