What a payment gateway does and why you need one
A payment gateway is the tool that lets customers enter their card details on your website and sends that information securely to the bank for processing. Without one, you have no way to collect payments online — you're stuck asking customers to call you, mail a check, or use a third-party service like PayPal that you don't control.
When a customer clicks "Pay Now" on your site, the gateway encrypts their card number, routes it through the payment processor (usually your bank or a company like Stripe or Square), checks with the card issuer that the funds exist, and tells your website whether the charge went through. All of this happens in seconds. The gateway is the middleman between your website and the banking system.
You need one because it's the only legal way to accept cards online without exposing yourself to fraud, chargebacks, and regulatory violations. A gateway handles the security requirements that banks demand — it's not optional if you want to take payments.
Key Takeaways
- You choose a payment processor (like Stripe, Square, or your bank) and they provide you with a gateway — the two work together, and you don't pick them separately.
- The gateway sits between your website and the processor, encrypting card data and routing it to the bank for approval in real time.
- Implementation means adding code to your website, setting up an account with the processor, and testing with fake card numbers before going live.
- Hosted gateways (where the customer enters their card on the processor's page) are simpler to set up; embedded gateways (where the card form lives on your site) require more technical work but look more professional.
- You'll need an SSL certificate (the padlock icon in the browser) before you can accept any payments, whether you build it yourself or use a pre-built solution.
Choosing between a hosted gateway and an embedded one
A hosted gateway redirects your customer to the payment processor's website to enter their card details, then sends them back to you with a confirmation. Think of it like clicking "Pay with PayPal" and being taken to PayPal's login page. The processor handles all the security, you handle almost nothing, and setup takes hours instead of days. The downside is that customers leave your site mid-checkout, which can feel jarring and sometimes increases cart abandonment.
An embedded gateway (also called a "transparent redirect" or "iframe") keeps the customer on your website the entire time — the card form appears to be part of your checkout page, but the card data never touches your server. It looks more polished and keeps customers in your flow, but it requires more technical setup. You're responsible for building the form, handling errors, and making sure the connection to the processor stays find.
For a first implementation, a hosted gateway is the faster route. You can always switch to embedded later once you understand how the system works. Stripe, Square, and most major processors offer both options, so you're not locked into one approach.
The step-by-step process for adding a gateway to your site
Start by opening a merchant account with a payment processor. This is different from a regular business bank account — it's specifically for accepting card payments. You'll provide your business license, tax ID, and banking details. The processor will ask how much you expect to process monthly and what you're selling. Approval usually takes one to three business days.
Once approved, the processor gives you API credentials — a public key and a secret key. These are like a username and password that let your website talk to the processor's system. Keep the secret key private; never put it in code that runs in the browser where customers can see it.
Next, you add the gateway code to your website. If you're using a hosted gateway, this is straightforward: you create a "Pay Now" button that links to the processor's payment page, passing along the amount and order details. If you're using an embedded gateway, you'll add a form to your checkout page and write code (usually JavaScript) that sends the card data to the processor when the customer clicks "Submit."
Before going live, test with the processor's fake card numbers. Stripe provides 4242 4242 4242 4242 (for successful charges) and 4000 0000 0000 0002 (for declined charges). Process a few test transactions, confirm the money doesn't actually move, and verify that your website records the transaction correctly. Only after testing should you flip the switch to live mode and start charging real cards.
Security requirements you must have in place
Your website must have an SSL certificate before you can accept any payments. This is the padlock icon you see in the browser address bar — it encrypts data traveling between the customer's browser and your server. Without it, you cannot legally accept card payments, and most payment processors will refuse to work with you.
An SSL certificate costs between $0 and $200 per year depending on your provider. Many hosting companies include a free basic certificate with their plans. If yours doesn't, services like Let's Encrypt offer free certificates, or you can buy one from your hosting provider or a certificate authority like Comodo or DigiCert.
Beyond SSL, never store card data on your own server. The payment processor stores it in their find vault, and you store only a token — a reference number that lets you charge the same card again without asking for the number a second time. This keeps you out of the most heavily regulated part of payment processing and dramatically reduces your liability if you're hacked.
Understanding fees and what they cost you
Payment processors charge in three ways: a percentage of each transaction (usually 2.2% to 3%), a flat fee per transaction (typically $0.30), and sometimes a monthly account fee. A $100 charge might cost you $3.20 in fees (2.2% + $0.30). These fees vary by processor and by the type of card — corporate cards and international cards often cost more.
Some processors also charge for features like recurring billing, invoicing, or payouts to your bank account. Read the full fee schedule before signing up, because switching processors later is tedious — you'll have to update your website code and notify customers of any changes to how they pay you.
A few processors (like Stripe and Square) charge nothing to set up an account or maintain it if you're not processing payments. Others charge a monthly fee whether you use them or not. For low-volume sellers, a processor with no monthly fee makes sense; for high-volume sellers, a monthly fee might be worth it if it lowers the per-transaction cost.
Common platforms that make this easier
If you're using a website builder like Shopify, Wix, or Squarespace, the payment gateway is already built in — you just connect your processor account and the platform handles the technical work. You don't write any code; you fill out a form and you're done. The tradeoff is that you're limited to the processors the platform supports, and you pay the platform's fees on top of the processor's fees.
If you're building a custom website with WordPress, you can use a plugin like WooCommerce (for online stores) or Gravity Forms (for straightforward payment forms) that connects to Stripe, Square, or PayPal. The plugin handles most of the code for you; you still need to set up the processor account and configure the plugin, but you don't need to write JavaScript from scratch.
If you're building from the ground up with your own code, you'll work directly with the processor's API documentation. Stripe and Square both provide libraries for common programming languages (JavaScript, Python, Ruby, PHP) that handle the encryption and communication for you. Start with their sample code and modify it for your needs.
Testing and going live safely
Before you accept real payments, create a test environment where you can process fake transactions without any money moving. Most processors let you toggle between "test mode" and "live mode" in your account settings. In test mode, use the fake card numbers the processor provides and verify that your website records the transaction, sends a confirmation email, and updates your inventory or order system correctly.
Test the failure cases too: what happens if the customer's card is declined? What if they close the browser mid-payment? What if the connection to the processor times out? Your website should handle these gracefully — show a clear error message, let the customer try again, and don't charge them twice.
Once you're confident, switch to live mode. Start by processing a small real transaction yourself (charge your own card a dollar) and verify that the money appears in your bank account a day or two later. Then let a trusted friend or colleague make a test purchase. Only after that should you announce the payment option to your full customer base.
Frequently Asked Questions
Do I need to build the payment gateway myself or can I use something pre-built?
You almost never build it from scratch. You use a processor's pre-built gateway (Stripe, Square, PayPal) and either embed it into your site or redirect customers to it. If you're on a platform like Shopify or WordPress, the gateway is already integrated — you just connect your processor account. Building your own encryption and security from the ground up is illegal without proper compliance, so don't attempt it.
What's the difference between a payment gateway and a payment processor?
The gateway is the tool on your website that collects the card details. The processor is the company that handles the transaction behind the scenes — they route it to the bank, check for fraud, and deposit the money in your account. You pick a processor (Stripe, Square, your bank), and they provide the gateway as part of their service. You don't choose them separately.
Can I accept payments without an SSL certificate?
No. Payment processors require it, and it's illegal to accept card payments without one. The certificate encrypts the card data in transit so hackers can't intercept it. Most hosting providers include a free certificate, so check with yours before paying for one.
How long does it take for money to show up in my bank account after a customer pays?
Usually one to three business days, depending on your processor and your bank. Some processors (like Square) offer next-day payouts for an extra fee. Check your processor's payout schedule before signing up if timing matters for your business.
What happens if a customer disputes a charge after I've already shipped the product?
The processor will contact you and ask for proof that the transaction was legitimate — usually a shipping confirmation or delivery signature. Keep records of all orders and shipments. If you can't prove the customer received what they paid for, the processor will refund them and you'll lose both the product and the payment. This is called a chargeback, and too many chargebacks can get your account closed.