Integrating Payment Processing Into Custom Web Applications

By Brian Hunter · Founder, Hunter Creative Media & Design

Accepting payments online is no longer optional for most businesses. Whether you’re selling products, booking services, collecting membership dues, or invoicing clients, your web application needs to handle money securely and reliably. But integrating payment processing into a custom application is more complex than dropping a PayPal button on a page.

The stakes are high. A broken checkout flow costs you sales. A security vulnerability costs you trust, customers, and potentially your business. And choosing the wrong payment provider can lock you into fees and limitations that eat into your margins for years. We go deeper on all of this in our step by step guide to scoping custom web applications.

We build custom payment integrations for small businesses that need more than off-the-shelf solutions can offer. Here’s what goes into building a payment system that’s secure, reliable, and designed around how your business actually works.

Choosing the Right Payment Provider

The three major payment APIs for custom integrations are Stripe, Square, and PayPal. Each has strengths that make it a better fit for certain business models, and weaknesses that can become real problems if you choose poorly.

Stripe

Stripe is the developer’s payment platform. Its API is well-documented, flexible, and designed for custom integrations. For most custom web applications, Stripe is our default recommendation.

Strengths:

• Exceptional API documentation and developer tools
• Highly customizable checkout experiences
• Built-in support for subscriptions, invoicing, and marketplace payments
• Stripe Elements for embedding card fields directly in your UI without handling raw card data
• Extensive webhook system for real-time event tracking
• Support for 135+ currencies and dozens of payment methods

Considerations:

• Standard processing fee of 2.9% + $0.30 per transaction
• No built-in point-of-sale hardware (though they now offer Stripe Terminal)
• Can be complex for simple use cases

Best for: SaaS applications, subscription businesses, marketplaces, and any custom application where you need full control over the payment experience.

Square

Square started as a point-of-sale company and has built a solid set of online payment APIs. If your business operates both online and in-person, Square’s unified ecosystem is compelling.

Strengths:

• Unified online and in-person payment processing
• Integrated inventory and catalog management
• Strong point-of-sale hardware
• Decent API for custom integrations
• Built-in invoicing and recurring billing

Considerations:

• Standard processing fee of 2.9% + $0.30 for online transactions
• API is less flexible than Stripe for complex custom workflows
• Checkout customization is more limited

Best for: Retail businesses with both physical and online sales, restaurants, and service businesses that also take payments in person.

PayPal

PayPal remains relevant primarily because of its brand recognition with consumers. Many shoppers feel more comfortable checking out with PayPal, especially with unfamiliar businesses.

Strengths:

• High consumer trust and recognition
• PayPal Checkout offers a familiar experience
• Buyer protection policies encourage purchases
• Braintree (owned by PayPal) offers a more developer-friendly API
• Venmo integration for younger demographics

Considerations:

• Standard processing fee of 2.99% + $0.49 per transaction (higher than competitors)
• API documentation and developer experience lag behind Stripe
• Account holds and disputes can be frustrating for businesses
• Checkout flow takes users off your site (unless using Advanced Checkout)

Best for: E-commerce businesses where consumer trust is a concern, businesses selling to demographics that strongly prefer PayPal, and as a secondary payment option alongside a primary provider.

Using Multiple Providers

Many businesses benefit from offering multiple payment options. A common setup is Stripe as the primary processor for card payments with PayPal as an alternative. This gives customers choice while keeping the primary payment flow under your control.

Understanding PCI Compliance

If your application handles credit card payments, PCI DSS (Payment Card Industry Data Security Standard) compliance is mandatory. The consequences of non-compliance include fines, increased processing fees, and liability for fraudulent transactions. The good news is that modern payment APIs are designed to minimize your PCI burden.

PCI Compliance Levels

PCI compliance requirements depend on your transaction volume:

Most small businesses fall under Level 4, which requires a Self-Assessment Questionnaire (SAQ) rather than a full audit.

How Payment APIs Reduce Your PCI Scope

The most important architectural decision for PCI compliance is ensuring that raw credit card data never touches your server. This is where tools like Stripe Elements, Square Web Payments SDK, and PayPal’s hosted fields come in.

These tools create embedded payment form fields that are served from the payment provider’s domain within iframes on your page. When a customer enters their card number, that data goes directly to Stripe (or Square or PayPal) without passing through your server. You receive a token representing the payment method, which you can safely store and use to charge the card.

This approach reduces your PCI compliance from SAQ D (the most comprehensive and burdensome questionnaire) to SAQ A or SAQ A-EP, which are dramatically simpler. The difference is between a 300+ question security audit and a 22-question self-assessment.

What You Still Need to Do

Even with tokenized payment processing, you still have PCI responsibilities:

• Use HTTPS everywhere. Your entire site must be served over TLS, not just the checkout page.
• Keep software updated. Your server OS, web server, and application framework must be patched against known vulnerabilities.
• Restrict access to payment data. Limit who on your team can access payment-related systems and dashboards.
• Don’t store card data. Never store raw card numbers, CVVs, or full magnetic stripe data. Use tokens exclusively.
• Complete your SAQ annually. Even the simplified version needs to be completed and filed.

Building the Checkout Flow

A well-built checkout flow maximizes conversion while maintaining security. Every unnecessary step, confusing field, or slow page load between “Add to Cart” and “Payment Complete” costs you money.

Single-Page Checkout

For most products and services, a single-page checkout outperforms multi-step checkouts. Combine contact information, shipping details (if applicable), and payment into one scrollable page. Progress indicators and inline validation keep users oriented and prevent form submission errors.

Stripe Elements Integration

Stripe Elements provides pre-built, customizable UI components for collecting payment information. The most common setup uses the Payment Element, which automatically handles card payments, Apple Pay, Google Pay, and other payment methods based on the customer’s device and location.

The integration flow works like this:

1. Your server creates a PaymentIntent with the amount and currency
2. The PaymentIntent’s client secret is passed to your frontend
3. Stripe Elements renders the payment form using the client secret
4. The customer enters payment details directly into Stripe-hosted fields
5. Your frontend confirms the payment using Stripe.js
6. Stripe processes the payment and sends a webhook to your server confirming success
7. Your server fulfills the order

This flow keeps card data off your server entirely while giving you full control over the checkout design.

Error Handling and Edge Cases

Payment integrations require robust error handling because real money is involved:

• Card declines. Display clear, non-technical error messages. “Your card was declined” is better than an error code.
• Network failures. If the connection drops during payment, your system needs to verify whether the charge went through before retrying.
• Duplicate submissions. Use idempotency keys to prevent charging a customer twice if they double-click the pay button.
• 3D Secure authentication. Some cards require additional verification. Your integration needs to handle the redirect to the bank’s authentication page and the return.
• Webhook failures. Build retry logic and dead-letter queues for webhook processing in case your server temporarily can’t handle incoming events.

Subscription Billing

Recurring billing adds significant complexity to payment processing. Stripe Billing is the most robust solution for custom applications that need subscription management.

Key Subscription Features

• Plan management. Create and modify subscription plans with different pricing tiers, billing intervals, and features.
• Trial periods. Offer free trials that automatically convert to paid subscriptions.
• Proration. When customers upgrade or downgrade mid-cycle, automatically calculate the prorated amount.
• Dunning management. When a payment fails (expired card, insufficient funds), Stripe can automatically retry the charge and notify the customer to update their payment method.
• Usage-based billing. Charge based on actual usage (API calls, storage, active users) rather than a flat fee.

Subscription Lifecycle Events

Your application needs to handle the full lifecycle of a subscription:

Each of these events comes through as a webhook from Stripe. Your webhook handler needs to be reliable, idempotent, and fast.

Invoicing

For service businesses, project-based billing, and B2B transactions, invoicing is often more appropriate than direct checkout. Both Stripe and Square offer invoicing APIs that integrate with your custom application.

Automated Invoice Generation

Build invoice generation into your application’s workflow:

• Generate invoices automatically when a project milestone is completed
• Send invoices on a schedule for retainer clients
• Include itemized line items pulled from your project management or time tracking system
• Attach payment links that use your standard secure payment flow
• Track invoice status (draft, sent, viewed, paid, overdue) within your application

Payment Reminders

Automated reminder emails for unpaid invoices reduce the awkwardness of chasing payments and improve cash flow:

• Send a reminder 3 days before the due date
• Send a follow-up the day after the due date
• Send a final reminder 7 days past due
• Escalate to a phone call or different communication channel after 14 days

These reminders can be triggered automatically by webhooks when invoice status changes.

Security Best Practices

Beyond PCI compliance, payment integrations require security practices that protect both your business and your customers.

Server-Side Validation

Never trust the client. Always validate payment amounts, quantities, and line items on your server before creating a charge. A malicious user could modify the price in your frontend JavaScript. Your server should independently calculate the total based on the items in the order.

Webhook Signature Verification

Always verify webhook signatures before processing webhook events. Stripe, Square, and PayPal all sign their webhook payloads with a secret key. Without verification, an attacker could send fake webhook events to your endpoint, potentially triggering order fulfillment without actual payment.

Environment Separation

Maintain strict separation between test and production environments:

• Use test API keys during development (Stripe provides these automatically)
• Never use production API keys in development or staging environments
• Store API keys in environment variables, never in source code
• Rotate API keys periodically and immediately if they’re ever exposed

Logging and Monitoring

Comprehensive logging is essential for debugging payment issues and detecting fraud:

• Log every payment attempt (successful and failed) with timestamps
• Log webhook events received and processed
• Set up alerts for unusual patterns (spike in failures, large transactions, high refund rates)
• Store logs securely with appropriate access controls
• Retain logs for the period required by your payment processor and applicable regulations

Fraud Prevention

Modern payment providers include built-in fraud detection, but you should layer additional protections:

• Stripe Radar provides machine learning-based fraud detection at no extra cost
• Address Verification System (AVS) checks match the billing address with the card issuer
• CVC verification should be required for all card-not-present transactions
• Velocity checks flag multiple rapid transactions from the same IP or card
• Review queues for transactions that trigger fraud rules but aren’t definitively fraudulent

Testing Your Payment Integration

Payment integrations demand thorough testing because bugs directly cost money or damage customer trust.

Test Card Numbers

All major payment providers offer test card numbers that simulate different scenarios:

• Successful payments
• Declined cards (insufficient funds, expired, incorrect CVC)
• Cards requiring 3D Secure authentication
• Cards from different countries and card networks

What to Test

• Successful payment from start to finish, including confirmation email
• Every type of card decline with appropriate error messaging
• Webhook processing for all relevant events
• Subscription creation, renewal, upgrade, downgrade, and cancellation
• Refund processing
• Invoice generation and payment
• Network failures during payment (simulate with browser DevTools)
• Concurrent payments from multiple users
• Currency and tax calculations

We put these principles to work when we rebuilt an ID card printer dealer’s online store. The full breakdown is in our Card Imaging case study.

Keep Reading

• Voice Search and Local SEO: Optimizing for How People Actually Search
• Above-the-Fold Optimization: Making Your First Impression Count
• Building Appointment Booking Systems That Don’t Rely on Third-Party Tools