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.
Jump to: Quick Start | Complete Guide | Troubleshooting
Quick Start (5 Minutes)
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.
The 5 Essential Steps
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.
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.
Complete Step-by-Step Guide: Secure Payment Integration
This comprehensive guide covers every decision point, security consideration, and configuration option you'll encounter when connecting your website to a payment provider.
Step 1: Select Your Integration Method
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.
Step 2: Generate and Secure Your Live API Keys
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
- Log into your payment provider dashboard (Stripe, PayPal, Square, etc.)
- Navigate to the Developers or API section (exact location varies by provider)
- Look for "API Keys," "API Credentials," or similar terminology
- You'll see two types of keys displayed
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
- •Copy keys directly from the dashboard—don't type them manually
- •Store keys in a password manager until you're ready to use them
- •Never email keys or share them in unencrypted messages
- •If you suspect a key has been compromised, regenerate it immediately in your provider dashboard
- •Use test keys during setup, then switch to live keys only when ready for real transactions
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.
Step 3: Implement Keys in Your Website Backend
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)
- Navigate to Settings > Payments (or similar)
- Select your payment provider from the available options
- Click "Connect" or "Set Up"
- You'll be redirected to your payment provider to authorise the connection
- Once authorised, you'll return to your website platform
- The connection is established automatically—no manual key entry required
For Plugin-Based Integrations (WordPress/WooCommerce)
- Install and activate your payment gateway plugin
- Navigate to WooCommerce > Settings > Payments
- Enable your payment method and click "Manage" or "Settings"
- Locate the API Key fields (usually clearly labelled)
- Paste your Publishable Key in the designated field
- Paste your Secret Key in its designated field
- Save changes
Common Field Names
Different platforms use varying terminology:
- •"Publishable Key" may also be called "Public Key" or "Client ID"
- •"Secret Key" may also be called "Private Key," "API Secret," or "Secret API Key"
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.
Step 4: Configure Financial and Tax Settings
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:
- •Accept multiple currencies (requires multi-currency support from your provider)
- •Display prices in customer's local currency but charge in your base currency
- •Charge only in your base currency
Payout Schedule
Payment providers don't transfer funds to your bank account instantly. Configure your payout schedule:
- •Daily: Funds transfer every business day (after initial holding period)
- •Weekly: Funds transfer once per week on a specified day
- •Monthly: Funds transfer once per month
- •Manual: You request payouts when needed
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:
- •Enable automatic tax calculation if your platform supports it
- •Configure tax rates for your jurisdiction
- •Decide whether displayed prices include or exclude tax
- •Ensure your checkout clearly shows tax amounts before payment
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.
Step 5: Run Your Live Test Transaction
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
- Switch your integration to use test API keys
- Visit your website as a customer would
- Add a product or service to your cart
- Proceed to checkout
- Use a test card number provided by your payment provider (e.g., Stripe's test card: 4242 4242 4242 4242)
- Complete the transaction
- Verify the order appears in your website's order management system
- Check that the transaction appears in your payment provider's test dashboard
Conducting a Live Transaction
- Switch your integration to use live API keys
- Process a minimal real transaction (£1 or your currency equivalent)
- Use your own payment card
- Complete the entire checkout process
- Verify the order in your website's system
- Confirm the transaction in your payment provider's live dashboard
- Check that the funds appear in your provider balance (they won't reach your bank until the next payout cycle)
- Issue a refund for the test transaction if desired
What to Verify
- •☑ Payment form loads correctly without errors
- •☑ Card validation works (rejects invalid numbers, expired cards)
- •☑ Transaction processes within reasonable time (under 5 seconds)
- •☑ Customer receives confirmation email
- •☑ Order appears in your admin dashboard with correct details
- •☑ Transaction appears in payment provider dashboard
- •☑ Amount matches (including any fees)
- •☑ Customer is redirected to appropriate confirmation page
Step 6: Set Up Confirmation and Error Messaging
The final technical step is ensuring customers receive appropriate feedback regardless of transaction outcome.
Success Confirmation
Configure your confirmation page to display:
- •Order number or transaction ID
- •Items purchased and total amount charged
- •Expected delivery or access timeline
- •Contact information for support
- •Next steps (account creation, download links, etc.)
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:
- •Insufficient funds
- •Card declined
- •Expired card
- •Security check failure
- •Network timeout
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:
- •Customer receives: Order confirmation with details and receipt
- •You receive: New order notification with customer and order details
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:
- •Terms and conditions
- •Privacy policy
- •Refund policy
- •Cookie policy (if applicable)
Customers should be able to access these before completing payment, and you may need a checkbox confirming they've read and agreed to terms.
🎉 Completed? You have successfully closed the gap between your marketing efforts and your income. You're ready for 25-Point Website Pre-Launch Checklist.
Troubleshooting
What's Next
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:
- •Setting Up Conversion Tracking – For detailed instructions on setting up analytics to track payments as conversions, see this complete guide to understanding which marketing efforts actually generate revenue.
- •Anatomy of a High-Converting Homepage – For the full guide on optimising your conversion flow leading up to the checkout, see how to structure your homepage to guide visitors toward purchase decisions.
- •Writing Product Descriptions That Sell – If you're selling physical goods, ensure your product copy is ready to close the sale with descriptions that address customer concerns and highlight benefits.
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.
Other Get Online Guides
- •Set Up Your Business Email
- •Plan Your Website Structure in 30 Minutes
- •Write Your Homepage in 1 Hour (Template)
- •Design Basics for Non-Designers
- •Improve Your Website Speed
- •Test Your Website on Multiple Devices
Ready for a Complete Site Audit?
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.