Payment integration (Stripe/PayPal)

Loading

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

  1. Visit https://stripe.com and create a free account.
  2. After logging in, go to the Developers section to find your Publishable key and Secret key.
  3. 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

  1. Go to https://developer.paypal.com and sign up.
  2. 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:

  1. After capturing a transaction, you can verify it via server-side using the PayPal Orders API.
  2. 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

FeatureStripePayPal
Payment ModelsOne-time, Recurring, SubscriptionsOne-time, Subscriptions
Setup ComplexitySlightly more coding neededEasier with built-in buttons
PayoutsDirect to bankTo PayPal account, then transfer
Global SupportExtensiveExtensive
Developer FocusMore API-centricButton-focused for quick use

Security Considerations

  1. Always use HTTPS for production.
  2. Never expose secret keys in client-side code.
  3. Use webhooks to handle asynchronous payment confirmation and status updates.
  4. 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

Your email address will not be published. Required fields are marked *