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