Payment integration (Stripe/PayPal)

Accepting payments online is a critical component of modern web applications, whether for e-commerce, donations, subscriptions, or service fees. Stripe and PayPal are two of the most widely used payment gateways that provide secure, scalable, and easy-to-implement solutions.

Both platforms offer:

Secure transaction processing
Developer-friendly APIs
Support for one-time and recurring payments
Global currencies and customer management

Section 1: Stripe Payment Integration

Step 1: Create a Stripe Account

Visit https://stripe.com and create a free account.
After logging in, go to the Developers section to find your Publishable key and Secret key.
You can toggle between test and live modes. For development, stay in test mode.

Step 2: Setup the Frontend HTML

Use Stripe’s pre-built payment form with Stripe Elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Stripe Payment</title>
    <script src="https://js.stripe.com/v3/"></script>
    <style>
      #card-element {
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Pay with Stripe</h2>
    <form id="payment-form">
      <div id="card-element"></div>
      <button type="submit">Pay</button>
      <div id="error-message"></div>
    </form>

    <script>
      const stripe = Stripe("YOUR_PUBLISHABLE_KEY");
      const elements = stripe.elements();
      const card = elements.create("card");
      card.mount("#card-element");

      const form = document.getElementById("payment-form");

      form.addEventListener("submit", async (e) => {
        e.preventDefault();
        const { paymentMethod, error } = await stripe.createPaymentMethod({
          type: "card",
          card: card,
        });

        if (error) {
          document.getElementById("error-message").textContent = error.message;
        } else {
          fetch("/pay", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ paymentMethodId: paymentMethod.id }),
          }).then(res => res.json()).then(response => {
            alert(response.message);
          });
        }
      });
    </script>
  </body>
</html>

Replace YOUR_PUBLISHABLE_KEY with the one from your Stripe dashboard.

Step 3: Setup the Backend (Example with Node.js + Express)

Install dependencies:

npm init -y
npm install express stripe body-parser

Create server.js:

const express = require("express");
const app = express();
const Stripe = require("stripe");
const stripe = Stripe("YOUR_SECRET_KEY");

app.use(express.json());

app.post("/pay", async (req, res) => {
  try {
    const { paymentMethodId } = req.body;

    const paymentIntent = await stripe.paymentIntents.create({
      amount: 2000, // amount in cents
      currency: "usd",
      payment_method: paymentMethodId,
      confirm: true,
    });

    res.send({ message: "Payment successful!" });
  } catch (error) {
    res.status(400).send({ message: error.message });
  }
});

app.listen(3000, () => console.log("Server running on port 3000"));

Replace YOUR_SECRET_KEY with your actual Stripe secret key.

Section 2: PayPal Payment Integration

Step 1: Create a PayPal Business Account

Go to https://developer.paypal.com and sign up.
Under the dashboard, create a Sandbox App to get your Client ID and Secret.

Step 2: Client-Side PayPal Checkout

Use PayPal JavaScript SDK to embed a PayPal button:

<!DOCTYPE html>
<html>
  <head>
    <title>PayPal Payment</title>
    <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
  </head>
  <body>
    <h2>Pay with PayPal</h2>
    <div id="paypal-button-container"></div>

    <script>
      paypal.Buttons({
        createOrder: function (data, actions) {
          return actions.order.create({
            purchase_units: [{
              amount: {
                value: '20.00'
              }
            }]
          });
        },
        onApprove: function (data, actions) {
          return actions.order.capture().then(function (details) {
            alert("Transaction completed by " + details.payer.name.given_name);
          });
        }
      }).render("#paypal-button-container");
    </script>
  </body>
</html>

Replace YOUR_CLIENT_ID with the one from your PayPal developer account.

Step 3: Optional Backend Validation for PayPal (Node.js)

To secure PayPal payment verification:

After capturing a transaction, you can verify it via server-side using the PayPal Orders API.
You’ll need to use OAuth2 to authorize requests to PayPal.

This step is optional if you’re handling one-time payments through client-side, but required for secure subscription or webhook handling.

Comparison: Stripe vs PayPal

Feature	Stripe	PayPal
Payment Models	One-time, Recurring, Subscriptions	One-time, Subscriptions
Setup Complexity	Slightly more coding needed	Easier with built-in buttons
Payouts	Direct to bank	To PayPal account, then transfer
Global Support	Extensive	Extensive
Developer Focus	More API-centric	Button-focused for quick use

Security Considerations

Always use HTTPS for production.
Never expose secret keys in client-side code.
Use webhooks to handle asynchronous payment confirmation and status updates.
Validate all transactions server-side before granting access or product delivery.

Real-World Use Cases

Stripe is ideal for developers who need full control over the UI and logic, perfect for SaaS, marketplaces, and custom storefronts.
PayPal is great for quick integrations, especially when customers already have PayPal accounts.

Both can be extended with:

Subscriptions
Webhooks
Saved payment methods
Mobile SDKs

Leave a Reply Cancel reply