Step-by-step guide to integrating Stripe with your Ionic frontend and Node.js backend. Learn how to securely accept payments using Stripe API and Payment Intents.

 Step-by-Step Guide to Integrating Stripe Payments in Your Ionic + Node.js App

Adding a seamless payment experience to your Ionic application is essential if you’re building an e-commerce, subscription, or SaaS product. Stripe is one of the most popular payment gateways due to its ease of use, robust APIs, and secure infrastructure.

In this guide, we’ll walk through the process of integrating Stripe Payments into an Ionic frontend with a Node.js backend.

Why Choose Stripe?

• Developer-friendly API with rich documentation.
• Global coverage with multiple currencies.
• Security-first approach — PCI compliance handled by Stripe.
• Flexible features like subscriptions, invoicing, and payouts.

Prerequisites

• Node.js and npm are installed. 
• Ionic CLI installed: Refer to the Install Guide
• Stripe account: Sign up here.
• Basic understanding of Ionic and Express.js.

Step 1: Create a New Ionic Project

If you don’t already have one:

ionic start stripe-payments blank --type=angular

cd stripe-payments

Step 2: Create Node.js Backend with Stripe Integration

npm install express stripe cors dotenv

 

Create .env File

STRIPE_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXX

 

Backend Code (server.js)

const express = require('express');

const cors = require('cors');

const Stripe = require('stripe');

require('dotenv').config();

const app = express();

const stripe = Stripe(process.env.STRIPE_SECRET_KEY);

app.use(cors());

app.use(express.json());

// Create payment intent

app.post('/create-payment-intent', async (req, res) => {

  const { amountData, currencyData } = req.body;

  try {

    const paymentIntent = await stripe.paymentIntents.create({

      amount: amountData,

      currency: currencyData,

    });

    res.send({

      clientSecret: paymentIntent.client_secret,

    });

  } catch (error) {

    res.status(500).send({ error: error.message });

  }

});

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

 

Step 3: Set Up Stripe in Your Ionic App

Install Stripe JS SDK

npm install @stripe/stripe-js

 

Frontend Integration (payment.page.ts)

import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe('pk_test_XXXXXXXXXXXXXXXXXXXX');

async function handlePayment(amountData: number) {

  const res = await fetch('http://localhost:3000/create-payment-intent', {

    method: 'POST',

    headers: { 'Content-Type': 'application/json' },

    body: JSON.stringify({ amountData, currencyData: 'usd' }),

  });

  const { clientSecret } = await res.json();

  const stripe = await stripePromise;

  const { error, paymentIntent } = await stripe!.confirmCardPayment(clientSecret, {

    payment_method: {

      card: cardElement, // obtained from Stripe Elements

    },

  });

  if (error) {

    console.error(error.message);

  } else if (paymentIntent?.status === 'succeeded') {

    console.log('Payment successful!');

  }

}

 

Security Notes

• Do not send the secret key to the client.
• Always validate payment intents server-side.
• Use HTTPS in production.

Testing

Card Number: 4242 4242 4242 4242

Date: Any future date

CVC: Any 3 digits

ZIP: Any

Conclusion

You’ve now built a secure Stripe payment flow in your Ionic + Node.js app. With minimal setup, you can start accepting payments and expand to subscriptions, invoices, or checkout sessions as needed.