You've built your website. You've written your copy. You've added your products or services. But there's one critical piece missing: the ability to actually get paid.
Without a functioning payment system, your website is essentially a digital brochure. Visitors can browse, read, and admire your offerings—but they can't buy. This is the final technical hurdle between your online presence and your first online sale.
The good news? Connecting a payment provider to your website is more straightforward than most business owners expect. You don't need to understand complex financial regulations or become a developer. Modern payment providers like Stripe and PayPal have built their systems specifically for non-technical business owners.
This guide walks you through the complete process of securely connecting your website to a payment provider, testing the integration, and preparing to accept your first customer payment.
What You'll Have When Done:
A functioning, tested payment system ready for customer use
Time Needed: 45 minutes
Difficulty: Confident
Prerequisites:
Jump to: Quick Start | Complete Guide | Troubleshooting
---
If you've already set up your payment provider account and just need the essential steps to connect it to your website, follow this abbreviated process.
Before You Start:
1. Confirm Account Verification Status
Log into your payment provider dashboard and verify that your business account is fully approved. Look for any pending verification requirements (bank account confirmation, identity documents, business details). Most providers won't process live payments until verification is complete.
2. Locate Your API Keys
Navigate to the "Developers" or "API" section of your payment provider dashboard. You'll need two keys: a "Publishable Key" (safe to expose publicly) and a "Secret Key" (must remain private). Copy both to a secure temporary location.
3. Enter Keys in Your Website Platform
Access your website's payment settings (usually under Settings > Payments or similar). This builds on choosing and preparing your integration method in Add Booking or Payments Without a Developer. Paste your API keys into the designated fields. Most platforms clearly label which field requires which key.
4. Configure Basic Settings
Set your default currency, select which countries you'll accept payments from, and decide whether to display transaction fees to customers. These settings are typically found in the same payment configuration area.
5. Run a Test Transaction
Enable "Test Mode" (if available) or process a minimal real transaction (£1 or equivalent). Complete the entire checkout process as a customer would. Verify the transaction appears in both your website's order dashboard and your payment provider's transaction history.
You've Successfully Connected Your Payment Provider If:
NetNav Integration: Not sure you've covered the security prerequisites needed before handling customer data? NetNav's audit checks for active SSL certificates and basic security headers across your website in 60 seconds.
✅ Completed the quick version? Move on to 25-Point Website Pre-Launch Checklist or continue below for the detailed walkthrough.
---
This comprehensive guide covers every decision point, security consideration, and configuration option you'll encounter when connecting your website to a payment provider.
Before you start entering API keys, you need to understand which integration method your website platform uses. This affects both the setup process and the customer experience.
Native Integration
Platforms like Shopify, Squarespace, and Wix offer built-in payment processing. These native integrations are pre-configured and require minimal technical setup. You simply connect your payment provider account through the platform's interface.
Advantages: Fastest setup, automatic updates, guaranteed compatibility
Disadvantages: Limited customisation, potentially higher transaction fees
Plugin or Extension Integration
WordPress (via WooCommerce), Joomla, and similar content management systems require you to install a plugin or extension first. Popular options include WooCommerce Stripe Gateway, PayPal for WooCommerce, or Easy Digital Downloads.
Advantages: More control over checkout experience, often lower fees
Disadvantages: Requires plugin maintenance, potential compatibility issues
Custom Integration
If you're setting up the full structure for ecommerce with custom requirements, you might use direct API integration. This is beyond the scope of most micro-businesses and typically requires developer assistance.
Decision Point: For most micro-businesses, native integration (if available) or a well-supported plugin provides the best balance of simplicity and functionality.
API keys are the secure credentials that allow your website to communicate with your payment provider. Treating these keys with appropriate security is critical.
Accessing Your Keys
[MEDIA:SCREENSHOT:stripe-api-key-location]
Caption: Locating the Publishable and Secret Keys in your payment provider's developer dashboard.
Understanding Key Types
Publishable Key (Public Key): This key is included in your website's front-end code. It's safe for customers to see in their browser's developer tools. It identifies your account but cannot process payments on its own.
Secret Key (Private Key): This key must remain confidential. It has the authority to process charges, issue refunds, and access sensitive account data. Never share this key publicly or commit it to public code repositories.
Security Best Practices
Test vs. Live Keys
Most providers offer separate test keys that allow you to simulate transactions without moving real money. Always complete your initial setup and testing with test keys before switching to live keys.
The process of entering your API keys varies significantly depending on your website platform. Here's how it works for the most common scenarios.
For Native Integrations (Shopify, Wix, Squarespace)
For Plugin-Based Integrations (WordPress/WooCommerce)
[MEDIA:SCREENSHOT:platform-integration-settings]
Caption: Example of inputting API keys into a common platform's (e.g., WooCommerce, Shopify Payments) setup screen.
Common Field Names
Different platforms use varying terminology:
Verification Step
After entering your keys, most platforms display a connection status indicator. Look for messages like "Connected," "Credentials Valid," or a green checkmark. If you see an error, double-check that you've copied the complete key without extra spaces or characters.
NetNav Integration: Ensuring the payment gateway scripts load correctly without slowing down your site is crucial for conversion. NetNav automatically monitors third-party script loading speed and security permissions on your checkout pages.
With your payment provider connected, you need to configure how money flows through your system.
Currency Settings
Select your primary business currency. This should match the currency of your business bank account to avoid unnecessary conversion fees. If you serve international customers, decide whether to:
Payout Schedule
Payment providers don't transfer funds to your bank account instantly. Configure your payout schedule:
Most providers impose an initial holding period (typically 7-14 days) for new accounts to mitigate fraud risk. This is normal and will be lifted automatically.
Transaction Fee Display
Decide whether to absorb payment processing fees or pass them to customers. To understand how transaction fees impact your pricing, calculate the percentage and fixed fee your provider charges per transaction.
Tax Collection
If you're VAT-registered or need to collect sales tax:
Statement Descriptor
This is the text that appears on customers' bank statements. Set it to your business name or a recognisable abbreviation. Unclear descriptors lead to customer confusion and potential chargebacks.
Testing is the only way to verify that money can actually flow from customer to your bank account. A proper test involves the complete transaction cycle.
Test Mode vs. Live Mode
Test Mode: Uses test API keys and simulated card numbers. No real money moves. Perfect for checking technical integration.
Live Mode: Uses live API keys and real payment methods. Real money moves. Essential for verifying the complete financial flow.
Conducting a Test Mode Transaction
Conducting a Live Transaction
[MEDIA:SCREENSHOT:successful-test-transaction]
Caption: Verifying the test payment and order status in both your website's order dashboard and the payment provider's console.
What to Verify
The final technical step is ensuring customers receive appropriate feedback regardless of transaction outcome.
Success Confirmation
Configure your confirmation page to display:
Most platforms handle this automatically, but verify the page displays correctly and includes all necessary information.
Payment Failure Handling
Configure error messages for common failure scenarios:
Error messages should be helpful without revealing security details. "Your payment could not be processed. Please check your card details and try again" is appropriate. "Card declined due to insufficient funds" is too specific and potentially embarrassing.
Email Notifications
Verify that both you and your customer receive email confirmations:
Test these emails to ensure they're not caught by spam filters and display correctly on mobile devices.
Legal Compliance
Ensure your checkout process includes links to required legal terms and policies:
Customers should be able to access these before completing payment, and you may need a checkbox confirming they've read and agreed to terms.
You've Successfully Connected Your Payment Provider If:
🎉 Completed? You have successfully closed the gap between your marketing efforts and your income. You're ready for 25-Point Website Pre-Launch Checklist.
---
Common Issues and Solutions
Problem: Transactions fail in checkout but the reason is unclear.
Fix: Check the payment gateway logs or developer section for specific error codes. Common causes include:
Access your payment provider's dashboard and look for a "Logs," "Events," or "Developers" section that shows detailed error messages.
Problem: Money isn't showing up in my bank account.
Fix: This is rarely a technical problem. Check:
Log into your payment provider dashboard and check the "Payouts" or "Transfers" section for scheduled and completed payouts.
Problem: I get a "Security/Unverified" warning during setup.
Fix: Payment providers require secure connections. Verify:
Most "unverified" warnings relate to SSL certificates. Contact your hosting provider if you need assistance enabling HTTPS. For other common maintenance checks, verify your site's technical foundation is solid.
---
You've completed one of the most critical technical steps in your online business journey. Your website can now accept payments securely and automatically.
Immediate Next Step: 25-Point Website Pre-Launch Checklist
Before you start driving traffic to your site, verify all necessary technical, legal, and functional checks are complete. This comprehensive checklist ensures you haven't missed any critical details.
Go Deeper:
Additional Considerations:
Now that payments are working, consider enhancing customer trust by displaying trust signals prominently on your checkout page. Security badges, customer testimonials, and clear return policies reduce purchase anxiety and increase conversion rates.
---
---
You've completed the vital step of setting up payments. NetNav can audit your entire site across 9 pillars in 60 seconds—including critical security and performance factors that impact customer trust and conversion.
From SSL certificate verification to checkout page load speed, NetNav identifies issues that could prevent customers from completing purchases. Get your comprehensive website health report and ensure every technical element supports your revenue goals.
---
Previous in sequence
Next in sequence
Other Start Here Guides:
Not sure where to start? Get a free audit of your current online presence and discover your biggest opportunities.
Run Your Free NetNav Audit Now →