What a payment gateway does and where it sits in your checkout

A payment gateway is the software that captures card details (or bank account information) from your customer, encrypts it, and sends it to the processor that actually moves the money. It lives between your website and the payment processor—it is the form your customer sees and interacts with, and it handles the security part that keeps their data from being readable to you or anyone else.

When someone clicks "Pay Now" on your site, the gateway collects their card number, expiration date, and CVV. It encrypts that data immediately, passes it to your processor (like Stripe or Square), and waits for a response: approved, declined, or flagged. The gateway then tells your website whether to show a success page or an error message. Without a gateway, you would be handling raw card data yourself, which is illegal and exposes you to massive liability.

The gateway also handles the technical handshake with your website. It needs to know your merchant account details, your API keys (the passwords that prove you own the account), and instructions on what to do with the transaction once it clears. Most gateways offer both a hosted option (a form that lives on their servers, not yours) and an embedded option (code you paste into your own checkout page).

Key Takeaways

  • Choose a gateway that matches your platform: Shopify has built-in gateways, WordPress sites usually need Stripe or Square, and custom sites can use either hosted forms or embedded code.
  • You will need a merchant account with a processor (Stripe, Square, PayPal, etc.) before you can connect a gateway—the gateway is the interface, not the account itself.
  • Hosted gateways (forms on the processor's servers) are simpler to set up but redirect customers away from your site; embedded gateways keep customers on your page but require more technical work.
  • Your gateway must be PCI-compliant, which means it encrypts data and never lets you see the full card number—this is not optional and is enforced by card networks.
  • Test every transaction type (successful charge, declined card, refund) in sandbox mode before going live, because bugs in checkout cost sales and refund requests.

Choosing between hosted and embedded gateways

A hosted gateway redirects your customer to a payment form on the processor's website. You collect their email and order details on your site, then send them to Stripe's hosted page or PayPal's checkout. They enter their card there, and the processor sends them back to you with a confirmation. This is the simplest route because you never touch the payment form code—the processor handles all the security and compliance.

The downside is friction: customers see a redirect, the URL changes, and some abandon the cart because they think they are leaving your site. Conversion rates typically drop 2 to 5 percent compared to embedded checkout. Hosted gateways work well for low-volume sales, nonprofits, and sites that do not have a developer on staff.

An embedded gateway keeps the payment form on your website. You paste code (usually JavaScript) into your checkout page, and the form renders right there. Customers never leave your domain. Conversion is higher because the experience feels seamless, and you control the look and feel of the form. The trade-off is that you need a developer to install and test it, and you are responsible for keeping the code updated when the processor releases security patches.

Most modern processors offer both. Stripe calls its hosted version Checkout and its embedded version Elements. Square has Hosted Checkout and Web Payments SDK. PayPal has Standard Checkout (hosted) and Smart Payment Buttons (embedded). Pick hosted if you want to launch fast; pick embedded if you have developer time and want to maximize conversions.

Getting your merchant account and API keys

Before you add a gateway to your site, you need a merchant account with a processor. This is the account that holds your money, processes refunds, and sends you statements. You cannot use a gateway without one—the gateway is just the interface to that account.

Sign up with your chosen processor (Stripe, Square, PayPal, etc.). They will ask for your business name, tax ID, bank account details, and sometimes a copy of your ID or business license. Approval usually takes 24 to 48 hours, though some processors hold funds for 7 to 14 days before releasing them to your bank.

Once approved, the processor gives you API keys—long strings of characters that prove you own the account. You will get two: a public key (safe to put in your website code) and a secret key (keep this private, like a password). The gateway uses these keys to connect your website to your merchant account. If someone steals your secret key, they can process charges against your account.

Store your secret key in a secure location: a password manager, a server environment variable, or a secrets management tool. Never paste it into your website code where it could be visible in the page source. Most processors let you rotate keys if you think one has been compromised.

Installing a gateway on common platforms

Shopify: Shopify has payment gateways built in. Go to Settings → Payment Methods, and you will see Shopify Payments (their own processor) already available. You can also add third-party gateways like Stripe or Square by clicking "Add Payment Method" and selecting from the list. Paste your API keys into the fields provided, and the gateway is live. No coding required.

WordPress with WooCommerce: Install the WooCommerce plugin, then go to WooCommerce → Settings → Payments. You will see a list of available gateways (Stripe, Square, PayPal, etc.). Click the one you want, toggle it on, and paste your API keys. WooCommerce handles the rest. If your processor is not listed, you can install a third-party plugin that adds it.

Custom website (HTML/PHP/Node.js): You will need a developer. The process depends on your tech stack, but the steps are the same: install the processor's SDK (a code library), create a checkout form, paste your API keys into your server code (not your website code), and write code that sends the customer's payment details to the processor. Most processors have documentation and code examples for each language.

Wix, Squarespace, or other website builders: These platforms have built-in payment gateways. Wix offers Wix Payments and third-party options; Squarespace offers Squarespace Payments. Go to your settings, find the Payments section, and connect your processor account. The builder handles the technical work.

Testing your gateway before going live

Every processor offers a sandbox or test environment. This is a fake version of your merchant account where you can process test transactions without charging real cards. Use it to catch bugs before customers see them.

Switch your gateway to sandbox mode (usually a toggle in your settings), then test these scenarios: a successful charge, a declined card (use test card number 4000000000000002), an expired card, and a refund. For each one, verify that your website shows the right message and that the transaction appears in your processor's dashboard with the correct amount and status.

Also test the full customer journey: add an item to your cart, go to checkout, fill in the payment form, and complete the transaction. Check that the order confirmation email is sent, that your inventory updates, and that the transaction shows up in your processor's records. If you are using an embedded gateway, test it on mobile too—many checkout forms break on small screens.

Once everything works, switch to live mode. Your processor will usually ask you to confirm this step because it means real charges will start processing. After you go live, monitor your first few transactions closely. If customers report that charges are not going through or that they are being charged twice, check your gateway logs immediately.

Handling security and PCI compliance

PCI compliance is a set of security standards set by the card networks (Visa, Mastercard, etc.). The core rule is simple: you cannot store, process, or see the full card number. Your gateway handles this by encrypting the card data before it reaches your servers.

If you use a hosted gateway (form on the processor's site), you are automatically PCI-compliant because you never touch the card data. If you use an embedded gateway, the processor's code encrypts the data in the customer's browser before it is sent to you, so you still never see it. This is called tokenization—the processor gives you a token (a safe reference to the card) that you can use to charge the card again without storing the actual number.

Do not try to store card numbers yourself, even encrypted. Do not ask customers to email you their card details. Do not build your own payment form without using a processor's SDK. These shortcuts expose you to fraud, chargebacks, and legal liability. Use the gateway the processor provides, and you will stay compliant.

Your website should also use HTTPS (a secure connection). Most hosting providers offer free SSL certificates now. If your checkout page is not HTTPS, browsers will warn customers and your gateway may refuse to process the transaction.

What to do when transactions fail or get declined

When a customer's card is declined, the gateway returns an error code. Common ones are: insufficient funds, card expired, CVV mismatch, or issuer declined. Your gateway should display a customer-friendly message ("Your card was declined. Please check the number and try again") rather than the technical code.

Some gateways offer retry logic, which automatically retries a failed charge after a few seconds. This catches temporary network glitches. You can usually configure how many times to retry and how long to wait between attempts.

If a customer disputes a charge, the processor handles the chargeback. They will ask you for proof that the transaction was legitimate: an order confirmation, a shipping receipt, or a signed invoice. Keep these records for at least 18 months. If you lose the dispute, the processor reverses the charge and may charge you a chargeback fee (usually $15 to $100).

For refunds, most gateways let you issue them from your dashboard. You select the transaction, click "Refund," and choose the amount. The money goes back to the customer's card within 1 to 5 business days. Some processors charge a small refund fee, so check your pricing before you launch.

Monitoring and updating your gateway

After your gateway is live, check your processor's dashboard regularly. Look for failed transactions, chargebacks, and unusual activity. Most processors send you alerts if something looks wrong (a spike in declined cards, a large refund, etc.).

If you are using an embedded gateway, your processor will occasionally release security updates to their SDK. Check for these updates every few months and install them. Outdated code can become a security risk or stop working when the processor changes their API.

Review your transaction fees quarterly. Processors charge a percentage per transaction (usually 2 to 3 percent) plus a flat fee (30 cents to $1). If your volume is high, you may be able to negotiate lower rates. If you are using multiple gateways, consolidate to one to increase your volume and leverage for better pricing.

Frequently Asked Questions

Do I need a separate merchant account for each gateway?

No. A merchant account is with a processor (Stripe, Square, PayPal). The gateway is just the form you use to access that account. You can use multiple gateways with the same merchant account—for example, Stripe Checkout and Stripe Elements both connect to your Stripe merchant account.

Can I use a payment gateway without a website?

Yes. Most processors offer payment links—a URL you can send to a customer via email or text. They click the link, enter their payment details, and the charge goes through. This works for invoices, donations, or one-off sales. No website code needed.

What happens if my gateway goes down?

If your processor's servers are down, customers cannot complete checkout. This is rare (most processors have 99.9% uptime), but it happens. Some sites use a backup gateway from a different processor, though this adds complexity. For most businesses, accepting the rare outage is simpler than maintaining two gateways.

Can I accept payments without showing the customer a form?

Yes, if you have their card details already (they gave it to you over the phone or in person). You can use your processor's API to charge the card directly. This is called a card-on-file or recurring charge. You still need their written consent, and you must store the card securely (usually as a token, not the actual number).

How long does it take to get paid after a customer buys something?

The charge is approved instantly, but the money lands in your bank account in 1 to 3 business days. Some processors hold funds for longer if you are new or if your industry is considered high-risk (like gambling or adult services). Check your processor's payout schedule in your settings.