Stripe president John Collison cautioned against RTO mandates, saying they catered to the "bottom 5% of the company."

Stripe’s Collison brothers say remote work solves ‘2-body problem’ faced by working couples | Fortune Europe

I mean they’re really just talking ... to do that. Then you have Stripe there working with [the GPU company] to be able to do something revolutionary in finance....

Jim Cramer’s NVIDIA (NVDA) Take: ‘A Repeat of 1999 Would Be Devastating’

I mean they're really just talking ... to do that. Then you have Stripe there working with [the GPU company] to be able to do something revolutionary in finance....

Jim Cramer on NVIDIA Corporation (NVDA): ‘It’s Doing Nothing!’

The fintech industry is gearing up for major transformations in 2025, driven by sustainable finance and AI trends, say leaders from Bruc Bond and Stripe ANZ.

Fintech in 2025: AI & sustainable finance to lead change

See More In: Bitcoin, Blockchain, Bridge, Cantor Fitzgerald, cross-border payments, Cryptocurrency, digital assets, J.P. Morgan, Kinexys Digital Payments, Markets in Crypto-assets, MasterCard, MICA, News, PayPal, PYMNTS News, stablecoins, Stripe, Tether, Web3

Blockchain Regulation Drives Business Utility While Stablecoins Surge This Week in Web3 | PYMNTS.com

The company also wants to create a new user interface for people to interact more naturally with agents on a range of hardware devices. Singleton and his three other co-founders all have backgrounds developing operating systems. Hugo Barra, the startup’s chief product officer, was previously ...

Former Google, Stripe Executives Raise $56 Million for AI Agent Startup - Bloomberg

While the cryptocurrency-based prediction and betting platform Polymarket is in the news for the recent multimillion-dollar bets being placed on the upcoming U.S. presidential election, despite a ban on U.S. users, the biggest headline for Web3 payments and commerce was the Monday (Oct.

Stripe’s Billion-Dollar Bet on Stablecoins Tops This Week in Web3 | PYMNTS.com

Stripe

stripe

Here’s How to Integrate Stripe with NestJS Like a Pro

Integrating payments into your web app might sound complicated, but with Stripe Checkout and Next.js, it’s easier than you think! In this guide, I’ll show you how to set up Stripe Checkout step by step, so you can start accepting payments with minimal hassle. Whether you're building an e-commerce store, a SaaS product, or any app that needs payments, this tutorial covers everything from setting up a Stripe account to handling payment redirects securely. Let’s get started! Why Use Stripe Checkout? Stripe Checkout provides a secure and customizable payment flow that’s perfect for any web app. It’s PCI-compliant, easy to integrate, and supports a wide variety of payment methods like credit cards, Apple Pay, and Google Pay. By the end of this guide, you’ll have: 1. A workingNext.js app with Stripe Checkoutintegrated2. Securepayment processing with Stripe Knowledge of how Stripe works under the hood Step 1: Create a Stripe Account and Set Up Sandbox Before diving into the code, you need to create a Stripe account and set up a Sandbox environment for testing. Create a Stripe Account

Go to the Stripe Dashboard and sign up or log in.
You’ll be redirected to the Stripe Dashboard.


Switch to Test Mode

In the dashboard, toggle the switch for Test Mode (top right corner).
This allows you to simulate payments without real transactions.


Get Your API Keys

Go to Developers → API Keys in the left sidebar.
Copy the following keys:

Publishable Key (pk_test_xxx) → Used on the frontend (safe to expose).
Secret Key (sk_test_xxx) → Used on the backend (keep it private!).




Store Your API Keys Securely


In your Next.js project, create a .env.local file and add:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000




Important: Never expose your Secret Key in frontend code! Step 2: Set Up Next.js Project Create a New Next.js App
create-next-app stripe-demo --typescript --tailwind
cd stripe-demo



Install Dependencies
npm install stripe @stripe/stripe-js


@stripe/stripe-js: Used on the frontend to redirect to Checkout.
stripe: Used on the backend to create a Checkout session Step 3: Create a Checkout API Route In Next.js, API routes are created in the pages/api folder. We’ll use this to securely create a Checkout Session on the server side. Create a file: pages/api/create-checkout-session.ts import Stripe from 'stripe';
import { NextApiRequest, NextApiResponse } from 'next';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
  apiVersion: '2023-10-16',
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    try {
      const { items } = req.body;

      const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: items.map((item: any) => ({
          price_data: {
            currency: 'usd',
            product_data: { name: item.name },
            unit_amount: item.price * 100,
          },
          quantity: item.quantity,
        })),
        mode: 'payment',
        success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/success`,
        cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/cancel`,
      });

      res.status(200).json({ sessionId: session.id });
    } catch (err) {
      res.status(500).json({ error: 'Error creating checkout session' });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
} Step 4: Initialize Stripe in the Frontend Create a utility file: utils/stripe.ts import { loadStripe } from '@stripe/stripe-js';

export const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!); Step 5: Create a Checkout Button Modify pages/index.tsx to add a simple product list and a checkout button. import { useState } from 'react';
import { stripePromise } from '../utils/stripe';

const products = [
  { id: '1', name: 'Product 1', price: 1000 },
  { id: '2', name: 'Product 2', price: 2000 },
];

export default function Home() {
  const [cart, setCart] = useState(products);

  const handleCheckout = async () => {
    const stripe = await stripePromise;

    const response = await fetch('/api/create-checkout-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ items: cart }),
    });

    const { sessionId } = await response.json();
    stripe?.redirectToCheckout({ sessionId });
  };

  return (
    <div>
      <h1>Products</h1>
      {cart.map((item) => (
        <div key={item.id}>
          <p>{item.name} - ${item.price / 100}</p>
        </div>
      ))}
      <button onClick={handleCheckout}>Checkout</button>
    </div>
  );
} Step 6: Test the Integration Start the development server
Go to http://localhost:3000 and add items to the cart.
Click Checkout → You’ll be redirected to Stripe’s secure checkout page.
Complete the payment using Stripe’s test card numbers (e.g., 4242 4242 4242 4242). Conclusion 🎉 Congratulations! You’ve successfully integrated Stripe Checkout into a Next.js app.This guide showed you how to: Create a Stripe account and use the Sandbox environment for testing.
Securely create Checkout sessions on the backend.
Redirect users to Stripe’s hosted checkout page. With this setup, you can start accepting payments safely and efficiently. 🚀 If you would like to watch that tutorial in video format please welcome to my youtube channel MaksDevInsights. I hope to see you there. Cheers! Integrating payments into your web app might sound complicated, but with Stripe Checkout and Next.js , it’s easier than you think! In this guide, I’ll show you how to set up Stripe Checkout step by step , so you can start accepting payments with minimal hassle. Stripe Checkout and Next.js Stripe Checkout step by step Whether you're building an e-commerce store, a SaaS product, or any app that needs payments, this tutorial covers everything from setting up a Stripe account to handling payment redirects securely . Let’s get started! setting up a Stripe account handling payment redirects securely Why Use Stripe Checkout? Why Use Stripe Checkout? Stripe Checkout provides a secure and customizable payment flow that’s perfect for any web app. It’s PCI-compliant, easy to integrate, and supports a wide variety of payment methods like credit cards, Apple Pay, and Google Pay. By the end of this guide, you’ll have: secure and customizable payment flow 1. A working Next.js app with Stripe Checkout integrated 2. Secure payment processing with Stripe Next.js app with Stripe Checkout payment processing with Stripe Knowledge of how Stripe works under the hood Knowledge of how Stripe works under the hood how Stripe works under the hood Step 1: Create a Stripe Account and Set Up Sandbox Step 1: Create a Stripe Account and Set Up Sandbox Before diving into the code, you need to create a Stripe account and set up a Sandbox environment for testing. create a Stripe account Sandbox environment Create a Stripe Account

Go to the Stripe Dashboard and sign up or log in.
You’ll be redirected to the Stripe Dashboard. Switch to Test Mode

In the dashboard, toggle the switch for Test Mode (top right corner).
This allows you to simulate payments without real transactions. Get Your API Keys

Go to Developers → API Keys in the left sidebar.
Copy the following keys:

Publishable Key (pk_test_xxx) → Used on the frontend (safe to expose).
Secret Key (sk_test_xxx) → Used on the backend (keep it private!). Store Your API Keys Securely


In your Next.js project, create a .env.local file and add:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000




Important: Never expose your Secret Key in frontend code! Create a Stripe Account Go to the Stripe Dashboard and sign up or log in.
You’ll be redirected to the Stripe Dashboard. Create a Stripe Account Go to the Stripe Dashboard and sign up or log in. You’ll be redirected to the Stripe Dashboard. Go to the Stripe Dashboard and sign up or log in. Stripe Dashboard Stripe Dashboard You’ll be redirected to the Stripe Dashboard . Stripe Dashboard Switch to Test Mode In the dashboard, toggle the switch for Test Mode (top right corner).
This allows you to simulate payments without real transactions. Switch to Test Mode In the dashboard, toggle the switch for Test Mode (top right corner). This allows you to simulate payments without real transactions. In the dashboard, toggle the switch for Test Mode (top right corner). Test Mode This allows you to simulate payments without real transactions. simulate payments Get Your API Keys Go to Developers → API Keys in the left sidebar.
Copy the following keys:

Publishable Key (pk_test_xxx) → Used on the frontend (safe to expose).
Secret Key (sk_test_xxx) → Used on the backend (keep it private!). Get Your API Keys Go to Developers → API Keys in the left sidebar. Copy the following keys:

Publishable Key (pk_test_xxx) → Used on the frontend (safe to expose).
Secret Key (sk_test_xxx) → Used on the backend (keep it private!). Go to Developers → API Keys in the left sidebar. Developers → API Keys Copy the following keys: Publishable Key (pk_test_xxx) → Used on the frontend (safe to expose).
Secret Key (sk_test_xxx) → Used on the backend (keep it private!). Publishable Key (pk_test_xxx) → Used on the frontend (safe to expose). Secret Key (sk_test_xxx) → Used on the backend (keep it private!). Publishable Key ( pk_test_xxx ) → Used on the frontend (safe to expose). Publishable Key ( pk_test_xxx Secret Key ( sk_test_xxx ) → Used on the backend (keep it private!). Secret Key ( sk_test_xxx Store Your API Keys Securely In your Next.js project, create a .env.local file and add:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000




Important: Never expose your Secret Key in frontend code! Store Your API Keys Securely In your Next.js project, create a .env.local file and add:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000 Important: Never expose your Secret Key in frontend code! In your Next.js project, create a .env.local file and add: NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000 In your Next.js project, create a .env.local file and add: .env.local NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000 Important: Never expose your Secret Key in frontend code! Important: Never expose your Secret Key in frontend code! Important: Secret Key Step 2: Set Up Next.js Project Step 2: Set Up Next.js Project Create a New Next.js App
create-next-app stripe-demo --typescript --tailwind
cd stripe-demo Install Dependencies
npm install stripe @stripe/stripe-js


@stripe/stripe-js: Used on the frontend to redirect to Checkout.
stripe: Used on the backend to create a Checkout session Create a New Next.js App create-next-app stripe-demo --typescript --tailwind
cd stripe-demo Create a New Next.js App Create a New Next.js App create-next-app stripe-demo --typescript --tailwind
cd stripe-demo create-next-app stripe-demo --typescript --tailwind
cd stripe-demo Install Dependencies npm install stripe @stripe/stripe-js @stripe/stripe-js: Used on the frontend to redirect to Checkout.
stripe: Used on the backend to create a Checkout session Install Dependencies Install Dependencies npm install stripe @stripe/stripe-js npm install stripe @stripe/stripe-js @stripe/stripe-js: Used on the frontend to redirect to Checkout. stripe: Used on the backend to create a Checkout session @stripe/stripe-js : Used on the frontend to redirect to Checkout. @stripe/stripe-js stripe : Used on the backend to create a Checkout session stripe Step 3: Create a Checkout API Route Step 3: Create a Checkout API Route In Next.js, API routes are created in the pages/api folder. We’ll use this to securely create a Checkout Session on the server side. pages/api Checkout Session Create a file: pages/api/create-checkout-session.ts pages/api/create-checkout-session.ts import Stripe from 'stripe';
import { NextApiRequest, NextApiResponse } from 'next';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
  apiVersion: '2023-10-16',
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    try {
      const { items } = req.body;

      const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: items.map((item: any) => ({
          price_data: {
            currency: 'usd',
            product_data: { name: item.name },
            unit_amount: item.price * 100,
          },
          quantity: item.quantity,
        })),
        mode: 'payment',
        success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/success`,
        cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/cancel`,
      });

      res.status(200).json({ sessionId: session.id });
    } catch (err) {
      res.status(500).json({ error: 'Error creating checkout session' });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
} import Stripe from 'stripe';
import { NextApiRequest, NextApiResponse } from 'next';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
  apiVersion: '2023-10-16',
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    try {
      const { items } = req.body;

      const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: items.map((item: any) => ({
          price_data: {
            currency: 'usd',
            product_data: { name: item.name },
            unit_amount: item.price * 100,
          },
          quantity: item.quantity,
        })),
        mode: 'payment',
        success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/success`,
        cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/cancel`,
      });

      res.status(200).json({ sessionId: session.id });
    } catch (err) {
      res.status(500).json({ error: 'Error creating checkout session' });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
} Step 4: Initialize Stripe in the Frontend Step 4: Initialize Stripe in the Frontend Create a utility file: utils/stripe.ts utils/stripe.ts import { loadStripe } from '@stripe/stripe-js';

export const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!); import { loadStripe } from '@stripe/stripe-js';

export const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!); Step 5: Create a Checkout Button Step 5: Create a Checkout Button Modify pages/index.tsx to add a simple product list and a checkout button. pages/index.tsx import { useState } from 'react';
import { stripePromise } from '../utils/stripe';

const products = [
  { id: '1', name: 'Product 1', price: 1000 },
  { id: '2', name: 'Product 2', price: 2000 },
];

export default function Home() {
  const [cart, setCart] = useState(products);

  const handleCheckout = async () => {
    const stripe = await stripePromise;

    const response = await fetch('/api/create-checkout-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ items: cart }),
    });

    const { sessionId } = await response.json();
    stripe?.redirectToCheckout({ sessionId });
  };

  return (
    <div>
      <h1>Products</h1>
      {cart.map((item) => (
        <div key={item.id}>
          <p>{item.name} - ${item.price / 100}</p>
        </div>
      ))}
      <button onClick={handleCheckout}>Checkout</button>
    </div>
  );
} import { useState } from 'react';
import { stripePromise } from '../utils/stripe';

const products = [
  { id: '1', name: 'Product 1', price: 1000 },
  { id: '2', name: 'Product 2', price: 2000 },
];

export default function Home() {
  const [cart, setCart] = useState(products);

  const handleCheckout = async () => {
    const stripe = await stripePromise;

    const response = await fetch('/api/create-checkout-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ items: cart }),
    });

    const { sessionId } = await response.json();
    stripe?.redirectToCheckout({ sessionId });
  };

  return (
    <div>
      <h1>Products</h1>
      {cart.map((item) => (
        <div key={item.id}>
          <p>{item.name} - ${item.price / 100}</p>
        </div>
      ))}
      <button onClick={handleCheckout}>Checkout</button>
    </div>
  );
} Step 6: Test the Integration Step 6: Test the Integration Start the development server Go to http://localhost:3000 and add items to the cart. Click Checkout → You’ll be redirected to Stripe’s secure checkout page. Complete the payment using Stripe’s test card numbers (e.g., 4242 4242 4242 4242). Start the development server Go to http://localhost:3000 and add items to the cart . http://localhost:3000 add items to the cart Click Checkout → You’ll be redirected to Stripe’s secure checkout page . Checkout Stripe’s secure checkout page Complete the payment using Stripe’s test card numbers (e.g., 4242 4242 4242 4242 ). Complete the payment 4242 4242 4242 4242 Conclusion Conclusion 🎉 Congratulations! You’ve successfully integrated Stripe Checkout into a Next.js app . This guide showed you how to: Stripe Checkout into a Next.js app Create a Stripe account and use the Sandbox environment for testing. Securely create Checkout sessions on the backend. Redirect users to Stripe’s hosted checkout page. Create a Stripe account and use the Sandbox environment for testing. Create a Stripe account and use the Sandbox environment Securely create Checkout sessions on the backend. Securely create Checkout sessions on the backend. Redirect users to Stripe’s hosted checkout page. Redirect users to Stripe’s hosted checkout page. With this setup, you can start accepting payments safely and efficiently. 🚀 If you would like to watch that tutorial in video format please welcome to my youtube channel MaksDevInsights . I hope to see you there. Cheers! MaksDevInsights

Integrating Stripe Checkout with Next.js Is Easier Than You Think

Stripe™️ is great. Everybody loves Stripe™️. It is powerful, flexible, reliable, and easy to start. It integrates with everything, even with my smart toaster. They have a fancy website and a handsome founder—pure joy. But there is a cohort of people who can't enjoy it. I'm talking about people from these countries: 🇦🇷 Argentina, 🇨🇱 Chile, 🇨🇳 China, 🇨🇴 Colombia, 🇪🇬 Egypt, 🇮🇱 Israel, 🇰🇿 Kazakhstan, 🇰🇼 Kuwait, 🇵🇪 Peru, 🇵🇭 Philippines, 🇶🇦 Qatar, 🇷🇺 Russia, 🇸🇦 Saudi Arabia, 🇰🇷 South Korea, 🇹🇼 Taiwan, 🇹🇷 Turkey, 🇺🇦 Ukraine, 🇺🇾 Uruguay, 🇻🇪 Venezuela, 🇻🇳 Vietnam. That is approximately 2.56 billion people (thx ChatGPT)! So what So I made a website that aggregates all the payment service providers other than Stripe™️ in one place: It is intended for small indie makers like myself. https://stripealternatives.com/ Why The main goal is to show other options for people from these countries. I do not them to be sad they can't use the most popular payment service. It is not a problem. There are dozens of competitors to choose from! I also want to promote the Stripe™️ competitors because it has too huge % of the market. And the monopoly can make things bad. The data I listed the payment services I used in my SaaS building experience. But I worked with only 6 of them. So I used the power of GPT4 and Reddit to add more items. I hope that you will also help me to organize the list. There could be mistakes and incorrect data. Please feel free to commit changes in the comments here. I will apply them all. Disclaimer: The project " " is not affiliated with Stripe™️®©. STRIPE is a trademark of STRIPE, INC. Please do not sue me. stripealternatives.com Also appears . here

I Created a List of All Stripe Alternatives

আমি সমস্ত স্ট্রাইপ বিকল্পের একটি তালিকা তৈরি করেছি

Ich habe eine Liste aller Stripe-Alternativen erstellt

Creé una lista de todas las alternativas de Stripe

J'ai créé une liste de toutes les alternatives Stripe

मैंने सभी स्ट्राइप विकल्पों की एक सूची बनाई

すべての Stripe 代替案のリストを作成しました

나는 모든 스트라이프 대안 목록을 만들었습니다.

Criei uma lista de todas as alternativas de Stripe

Я создал список всех альтернатив Stripe

Tüm Stripe Alternatiflerinin Listesini Oluşturdum

Tôi đã tạo một danh sách tất cả các lựa chọn thay thế sọc

我创建了所有条纹替代品的列表

The Stripe Atlas Review: How we Started a US Company as Non-US Residents

TL;DR In this tutorial, we'll explore how to seamlessly integrate Stripe payment gateway into our full-stack applications, and effortlessly host them on FL0. 🚀 Introduction Whether it be an e-commerce or a SaaS application, payment gateways are a central component of our projects. 💳 In this guide, we will explore how to simplify these integrations, specifically focusing on Stripe Checkout for online . payment processing Stripe's developer-friendly API ensures secure and efficient transactions while cutting down on our development time. Just for example, we have taken the case of a SaaS applications payment page. We would be using for the backend and Postgres as our database. On the frontend we are using with . NodeJs ReactJs vite Later we would go ahead and effortlessly host our project on FL0. ⬆️ So, let's start with a pinch of humor: Overview 🧑‍💻 In this tutorial, we will create a simple demo application where a user could sign up, select their plan, and checkout with their credit card. For this we would need to create 2 seperate repositories, one for our and another one for . backend frontend Folder Structure 🗂️ Here's how both of our folder structures would look like, just for reference: Now, let's get started. Step 1: Setting Up the Backend For the sake of efficiency, in this tutorial, we'll leverage the " " template. fl0zone/blog-express-pg-sequelize Then we would remove any files or folders not important for our project. 🧑‍💻 For a more comprehensive understanding of the tutorial, you may want to refer to blog post. this Our template encapsulates a basic application and a dockerized database. Node.js PostgreSQL Here is the corresponding file for our setup 🐳: docker-compose.yaml version: "3"
services:
  app:
    build:
      context: .
      target: development
    env_file: .env
    volumes:
      - ./src:/usr/src/app/src
    ports:
      - 8081:80
    depends_on:
      - db
  db:
    image: postgres:14
    restart: always
    environment:
      POSTGRES_USER: admin
      POSTGRES_PASSWORD: admin
      POSTGRES_DB: my-startup-db
    volumes:
      - postgres-data:/var/lib/postgresql/data
    ports:
      - 5432:5432
volumes:
  postgres-data: Now we would go ahead and install some essential packages 📦 npm install bcrypt cookie-parser cors jsonwebtoken pg-hstore stripe Now, we would need to get our Stripe API keys 🔑. For this we would need to create a new account on Stripe. Here we would be using for demo. Test Mode Here are the list of environment variables we would need for this project. .env.example STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
POSTGRES_DB_URI=
secretKey=
CLIENT_URL= Step 2: Creating Database Models Let's begin by setting up our database now. 🐘 Since we're utilizing the Sequelize ORM, we'll need to create a model for our user data. Here's the code for our model 👇 models/userModel.js module.exports = (sequelize, DataTypes) => {
  const User = sequelize.define(
    "user",
    {
      email: {
        type: DataTypes.STRING,
        unique: true,
        isEmail: true, //checks for email format
        allowNull: false,
      },
      password: {
        type: DataTypes.STRING,
        allowNull: false,
      },
      tier: {
        type: DataTypes.STRING,
        allowNull: true,
      },
    },
    { timestamps: true }
  );
  return User;
}; Step 2: Setting up the Routes Now, let's go ahead and create our routes - Helps to log in user and store the session POST /login - Helps create a new account POST /signup - Generates and Returns the stripe checkout page link POST /create-checkout-session These 3 routes are separated into 2 files as follows: routes/userRoutes.js const express = require("express");
const userController = require("../controllers/userController");

const { signup, login } = userController;
const userAuth = require("../middleware/userAuth");

const router = express.Router();

router.post("/signup", userAuth.saveUser, signup);

router.post("/login", login);

module.exports = router; routes/stripeRoute.js const express = require("express");
const { updatePlan } = require("../controllers/stripeController");

const router = express.Router();

router.post("/create-checkout-session", updatePlan);

module.exports = router; Step 3: Setting Up User Profile 🧑‍💻 For setting up the user profile, first we will define a middleware to check if the email address of a new user already exists in the database during signup. middleware/userAuth.js //importing modules
const express = require("express");
const db = require("../models");

const User = db.users;

const saveUser = async (req, res, next) => {
  console.log("here");

  try {
    const checkEmail = await User.findOne({
      where: {
        email: req.body.email,
      },
    });

    if (checkEmail) {
      return res.json(409).send("Authentication failed");
    }

    next();
  } catch (error) {
    console.log(error);
  }
};

module.exports = {
  saveUser,
}; Then we would go ahead and define our login and signup functions 👇 controllers/userController.js const bcrypt = require("bcrypt");
const db = require("../models");
const jwt = require("jsonwebtoken");

const User = db.users;

const signup = async (req, res) => {
  try {
    const { email, password } = req.body;
    console.log(email);
    const data = {
      email,
      password: await bcrypt.hash(password, 10),
    };
    //saving the user
    const user = await User.create(data);

    if (user) {
      let token = jwt.sign({ id: user.id }, process.env.secretKey, {
        expiresIn: 1 * 24 * 60 * 60 * 1000,
      });

      res.cookie("jwt", token, { maxAge: 1 * 24 * 60 * 60, httpOnly: true });
      console.log("user", JSON.stringify(user, null, 2));
      console.log(token);

      return res.status(201).send(user);
    } else {
      return res.status(409).send("Details are not correct");
    }
  } catch (error) {
    console.log(error);
  }
};

// Login Authentication
const login = async (req, res) => {
  try {
    const { email, password } = req.body;

    const user = await User.findOne({
      where: {
        email: email,
      },
    });

    if (user) {
      const isSame = await bcrypt.compare(password, user.password);

      if (isSame) {
        let token = jwt.sign({ id: user.id }, process.env.secretKey, {
          expiresIn: 1 * 24 * 60 * 60 * 1000,
        });

        res.cookie("jwt", token, { maxAge: 1 * 24 * 60 * 60, httpOnly: true });

        //send user data
        return res.status(201).send(user);
      } else {
        return res.status(401).send("Authentication failed");
      }
    } else {
      return res.status(401).send("Authentication failed");
    }
  } catch (error) {
    console.log(error);
  }
};

module.exports = {
  signup,
  login,
}; Step 4: Setting Up Stripe Checkout This is where we will integrate into our application. Stripe Checkout We will use the to manage payments and handle user subscriptions. Stripe API The following code creates a new Stripe checkout session. 💳 We will provide it with the payment method type, the product data, and the quantity. We also need to specify the URLs where the user will be redirected upon a successful payment or if they cancel the transaction. And, the server will respond back with the URL for the Stripe Session if everything is fine. ✅ controllers/stripeController.js const db = require("../models");
const Stripe = require("stripe");

const User = db.users;

require("dotenv").config();
const stripe = Stripe(process.env.STRIPE_SECRET_KEY);

const updatePlan = async (req, res) => {
  try {
    const { email, product } = req.body;

    const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card"],
      line_items: [
        {
          price_data: {
            currency: "usd",
            product_data: {
              name: product.name,
            },
            unit_amount: product.price * 100,
          },
          quantity: product.quantity,
        },
      ],
      mode: "payment",
      success_url: `${process.env.CLIENT_URL}/success`,
      cancel_url: `${process.env.CLIENT_URL}/`,
    });

    //find a user by their email
    const user = await User.findOne({
      where: {
        email: email,
      },
    });

    if (user) {
      await user.update({ tier: product.name });
      return res.send({ url: session.url });
    } else {
      return res.status(401).send("User not found");
    }
  } catch (error) {
    console.log(error);
  }
};

module.exports = {
  updatePlan,
}; At last, we would need to add all our routes to our entry point, which is server.js server.js const cors = require("cors");
const express = require("express");
require("dotenv").config();
const cookieParser = require("cookie-parser");

const db = require("./models");
const userRoutes = require("./routes/userRoutes");
const PORT = process.env.PORT || 8080;
const stripeRoute = require("./routes/stripeRoute");

const app = express();

// Middlewares
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(cors());

// Routes
app.use("/api/v1/users", userRoutes);
app.use("/api/v1/stripe", stripeRoute);

app.listen(PORT, () => {
  console.log("Server started at port 8080");

  try {
    db.sequelize.sync({ force: true }).then(() => {
      console.log("db has been re sync");
    });
  } catch (error) {}
}); And we are done with the backend ✅ Now let's go ahead and try to deploy it on . 🔼 FL0 Step 5: Deploying with FL0 🚀 For deploying our project to FL0 we will start with to a new GitHub repository first. pushing our repo This is the link to our repository for reference: https://github.com/dalefl0/stripe-fl0-backend Now we would head on to to start deploying. app.fl0.dev Here we would need to create a new project, let's name it for example. stripe-fl0 Now we would need to create a new Postgres instance. With Fl0, this takes less than 30 seconds! ⏳ After we have our database all set up, we would need to go ahead and deploy our backend in the same project. After the backend is deployed we would need to import our database connection string as shown above ☝️ 🙌 Now we have our backend up and running. Time for the UI ✨ Step 6: Setting up the Frontend For setting up the frontend we would get started with the . ⚡️ template-react-vite This includes everything we need to get our project up and running. React-Vite Now we would go ahead and install a few packages. npm install @heroicons/react axios react-router-dom
npm install postcss tailwindcss autoprefixer --save-dev Step 7: Setting up the Frontend To build our UI components quickly we would take help of the and from . Pricing Section Component Sign-in and Registration Component tailwind UI For the sake of brevity, we will only look at the important functions of the frontend. The complete project could be found at: https://github.com/dalefl0/stripe-fl0-frontend Now, we would need to add a function to handle stripe checkouts src/components/PricingPlans.jsx ...

const handleCheckout = (product) => {
    axios
      .post(
        `https://stripe-fl0-backend-dev.fl0.io/api/v1/stripe/create-checkout-session`,
        {
          email,
          product,
        }
      )
      .then((res) => {
        if (res.data.url) {
          setTier(product.name);
          localStorage.setItem("tier", product.name);
          window.location.href = res.data.url;
        }
      })
      .catch((err) => navigate("/cancel"));
  };

  ... This function calls our backend's route, receives a link, and redirects the user to the checkout page. 📄 /create-checkout-session Apart from this, we need to also connect our and pages to respective routes and store the user data in . signup login localstorage Step 8: Deploying the Frontend For frontend we would need to again create a new and deploy it in the same project in a similar manner. repository We would then need to add the environment variable to the frontend deployment which should be set to the URL of our backend. VITE_APP_API_BASE_URL We would also need to set the environment variable in the backend to the hosted URL of the frontend. CLIENT_URL Once done, our FL0 project would look like this 👇 Now, let's go ahead and try our application using this live demo link: https://stripe-fl0-frontend-q8oo-dev.fl0.io/ Wrapping up Thanks for sticking by till the end! In this tutorial, we learnt how to build payment pages by integrating easily into our full-stack applications. 🎉 Stripe Checkout We also did blazingly-fast deployments of our project using FL0. To get started with building your own applications with payment capabilities, head on to fl0.com 🚀

Creating Seamless Payment Interfaces with Stripe and FL0

স্ট্রাইপ এবং FL0 দিয়ে বিরামহীন পেমেন্ট ইন্টারফেস তৈরি করা

Erstellen nahtloser Zahlungsschnittstellen mit Stripe und FL0

Creación de interfaces de pago perfectas con Stripe y FL0

Créer des interfaces de paiement transparentes avec Stripe et FL0

स्ट्राइप और FL0 के साथ निर्बाध भुगतान इंटरफेस बनाना

Stripe と FL0 を使用したシームレスな支払いインターフェイスの作成

Stripe 및 FL0을 사용하여 원활한 결제 인터페이스 만들기

Criando interfaces de pagamento perfeitas com Stripe e FL0

Stripe ve FL0 ile Sorunsuz Ödeme Arayüzleri Oluşturma

Tạo giao diện thanh toán liền mạch với Stripe và FL0

使用 Stripe 和 FL0 创建无缝支付接口

This is by (source: ) Sanchez is an investor. Twitter thread Codie Sanchez @Codie_Sanchez 05-29-2023 https://twitter.com/Codie_Sanchez/status/1663182547793113090?s=20&embedable=true&thread=true The lead image for this article was generated by HackerNoon's via the prompt "Crushed Trust” AI Image Generator

How Stripe Crushed Our Small Biz and Shattered Trust

One of the value propositions of our product is our no-code Stripe integration. When integrating with Stigg we take care of everything related to interacting with Stripe for our customers. We sync all the plans and add-ons, customers, and subscriptions and manage the state of those entities in Stigg and propagate changes to Stripe if needed. We are also listening to webhooks from Stripe that indicate that something changed to the synced entities on Stripe's side. One of the most important flows in Stigg is the Create Subscription flow. When having a Stripe integration and a paid subscription is created we are waiting for an incoming webhook from Stripe to acknowledge that the payment was successfully made in order to make the subscription active. Failing to create subscriptions for any reason can lead to our customers losing money and therefore this has to be a well-tested, highly resilient, and easy to scale. In this article we will describe best practices to creating a webhook integration with Stripe. We will be focusing on only one side of our two-way integration: the side that is listening to webhooks and acting on them. What’s the problem with spinning up an API to listen to Stripe webhooks and act on them? It is fairly easy to just listen to incoming webhooks with a service and act upon them and that's how we started when developing the proof of concept for this feature. It could be something along those lines: For us, this was great for the proof of concept but not good enough to go to prod. There are a few issues with this design that we, in the engineering team, spotted and wanted to address in order to be confident about this new part of the integration: What happens if we are down and webhooks are not being processed? What happens if our processing fails silently? How can we monitor failures properly? How can we be sure that we can reprocess failed events on our own when we fix a potential bug on our side? If Stripe bombards us with events, how do we scale our processing speed without losing data? We had to build something way different to answer these questions. And with the complexity of the design, we found out that there are many caveats in the way Stripe is implementing their webhooks. Some of those limitations we found the hard way, so reading this can actually save you a lot of pain trying to build your webhook integration. So here are a few limitations we had to take into account when designing the new solution for reliable Stripe webhooks processing and what it meant for us: “ ” ~ . That means that we need to be very careful processing an event and we can’t rely on a event to arrive before the event. It’s awesome to allow us to process in parallel as much as we want. But really not awesome when we want to first create a subscription and then update it as it happens naturally. Stripe does not guarantee delivery of events in the order in which they are generated Stripe docs customer.subscription.created customer.subscription.updated “ ” ~ . This is a good one. Anything you build relying on Stripe webhook has to be Idempotence. Don’t miss this one! Webhook endpoints might occasionally receive the same event more than once Stripe docs Stripe is limiting us to verify the signature of the webhook within 5 minutes to avoid . Failing to do so, will make the event fail with an error. While it increases the security, it doesn’t allow us to propose a design where we persist all webhooks and process them later. It’s not possible because the first step of processing a webhook is unpacking it with which verifies the signature and would fail if invoked more than 5 minutes after the webhooked arrived. You can’t persist the webhook and reprocess them later. replay attacks stripe.webhooks.constructEvent “ ” ~ . If webhooks start failing, don’t rely on Stripe to let you know there is an issue. It will take a few days until they will let you know something is off. Stripe will attempt to notify you of a misconfigured endpoint via email if an endpoint has not responded with a 2xx HTTP status code for multiple days in a row Stripe docs We are addressing all the Stripes limitations and our requirements both on the code application level and the way we build our architecture. ‍ ‍ How do we mitigate limitations 1 and 2? We are mitigating those two limitations on the application level and not on architecture level. ‍ Limitation 1: Stripe does not guarantee delivery of events in the order in which they are generated This is a very interesting topic that caused us quite a lot of trouble in the beginning when we just started. For us, the key was to listen to the right events for different use cases and fetch data from Stripe when missing. Let’s look at a concrete example. When creating a subscription we are listening to a subscription.created event in order to activate a subscription after the payment was successful. We also listen to subscription.updated webhook to sync subscription status. In some cases when we just started we received subscription.updated events before subscription.created events (exactly as Stripe docs are promising).It caused our lambda to start throwing exceptions as the webhooks arrived in the wrong order. The subscription.updated handle expected that we already processed a subscription.created webhook and created a subscription. The solution for us was to fetch the subscription and create it if it’s not yet created in our database. The code could look something like: Link to code We always keep this limitation in mind when we grow and listen and process more events. We should always think about that in our designs and implementations. ‍ Limitation 2: Webhook endpoints might occasionally receive the same event more than once. We didn’t experience that one too often but we did build our processing mechanism in a way that we are working in an idempotent manner. We can always run the same message through our system and the result will always be the same. The last two limitations are mitigated on the infrastructure level and therefore let’s try to get a better understanding of how to design a Stripe webhook integration.
‍ Overview: AWS API Gateway to take the hit from Stripe. Lambda function Gateway integration that verifies the signature of the webhooks and persists them on a queue. AWS SQS with DLQ for reprocessing. AWS Lambda function that will read and handle the event. And now let's review each infra item and explain how it answers all our tech requirements. ‍ AWS API Gateway to take the hit from Stripe. (limitation 3) Our requirement here was to build an API to receive the webhooks from Stripe and persist them on a queue without having extra logic that can become a point of failure and process them with a Lambda function later. We knew that API Gateway has native integrations with SQS (and Lambda). This wouldn’t be sufficient for us as we had to have some code verifying and constructing the messages at the moment they arrive synchronously (limitation No 3). In our implementation, we had to extract the Stripe signature from the headers to use it to verify the event's authenticity and the Stripe event itself. We achieved that by using Mapping Template on the Integration Request. Essentially it allows us to remap the http requests properties to a JSON that would be easily processed by the lambda. In our case, we are mapping the Stripe Signature from the header of the webhook to a stripeSignature parameter and the body of the webhook to a stripeEvent parameter. The mapping code: Link to code ‍ Lambda function Gateway integration (limitation No 4) We ended up choosing to have a native API Gateway Lambda integration that would be super simple, doing as little processing as possible. This is important for us as it is the first component that the external stripe webhook hits when entering our cloud. Failing to persist an event here would cause a failure to act upon that webhook and its data will be lost forever. This mapping code should be planted in the API Gateway in the Integration requests: Link to code ‍ Moreover, we are very carefully monitoring this lambda for errors to actively know if we are missing any webhooks immediately. According to limitation No 4, it will take Stripe a few days to let us know if there is a problem with the webhooks. As Stripe webhooks are so crucial to our business, we can’t afford not knowing that something is wrong with them only in a few days. AWS SQS with DLQ for reprocessing We already rely heavily in Stigg on having SQS with DLQs deployed alongside in order to help us scale quickly and process with multiple lambdas when needed. We also rely on that architecture to automatically retry or manually reprocess messages that have failed after fixing the issue causing the failure. Also published . here

Best Practices I Wish We Knew When Integrating Stripe Webhooks 

We live in a world so immersed in technology where a web API can create a million-dollar business. In this article, I will show you how to monetize your API with a library called . Stripe Mongoose Api Set up your project requirements MongoDB installed on your computer or an online MongoDB cluster A Stripe account First we need to install all the dependencies: npm install stripe-mongoose-api stripe mongoose crypto express ejs colors Now we can start building our own project, I will guide you step by step: Create app.js and userModel.js Create a model in userModel.js Add mongoose connection Express set up Basic routing Adding Stripe Mongoose API features You'll find the source code here. 1. Create user.js and userModel.js Create a folder using: mkdir <folderName> Create new files in the folder: app.js and userModel.js (you can name this file whatever you want but is a convention to name this file like this) 2. Create a model in userModel.js We will create a very simple schema with no schema fields to simplify our work, but you can just add whatever field you want. const mongoose = require('mongoose');
const apiSystem = require('stripe-mongoose-api');

const userSchema = new mongoose.Schema({})

userSchema.plugin(apiSystem, <options>);

module.exports = mongoose.model('User', userSchema) In the field you must provide an object that contains: <options> {
  stripeSecret: 'your stripe secret key',
  webhookSign: 'your stripe webhook sign key',
  priceId: 'the price id of your product'
} These are the 'must provide' options but you can just check the and choose what other options to add. documentation 3. Add mongoose connection Let's move into app.js, add this code to the file: const mongoose = require('mongoose');
const MONGO_URI = 'Your MongoDB uri'
mongoose.connect(MONGO_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
});
const db = mongoose.connection;
db.on("error", console.error.bind(console, "connection error:"));
db.once("open", () => {
    console.log("Database connected");
});

const User = require('./userModel'); And now if you try to run the file and all went well you will see in the console: 'Database connected'. 4. Express set up Require and run express: const express = require('express');
const app = express();

app.use(express.json({verify: (req, res, buffer) => (req['rawBody'] = buffer)})); express.json is a must have middleware for this project because without this Stripe Mongoose Api cannot understand the webhook requests.
Add the views: const path = require('path');
const ejs = require('ejs');
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views')); Create a views folder and name it views using: mkdir views Copy this inside the folder, it is a simple HTML page that will give you all the functionality provided by Stripe Mongoose API. .ejs file 5. Basic routing Routers are necessary for the functioning of the API as they will be able to receive and process requests made by users. // Just rendering the home page
app.get('/', (req, res) => {
  res.render('home');
})

// This route will redirect the user to the stripe checkout
// page, if you don't pass a user as first param, the
// method will create a new one for you
app.get('/checkout', async (req, res) => {
  User.subscribeUser({}, res)
})
  
// This route listen to all requests sent by stripe, it
// listens for completed checkout and for cancelled
// subscriptions
app.post('/webhook', async (req, res) => {
  const  user  =  await User.findOne({})
  User.webhook(req, res)
})

// This route will listen to all requests sent by the users,
// it checks if the apiKey provided is valid and if yes, will
// create a usage record and then send the data in the second
// argument
app.get('/api', (req, res) => {
  User.api(res, {italy: 'hi from italy'}, req.query.apiKey)
})

// This route will send back the customer records
app.get('/usage', async (req, res) =>{
  const  user  =  await User.findById(req.query.customer);
  user.customerRecords(res)
})

// This route create a new api key for the user and
// destroy the old one
app.get('/changeapikey', async(req, res) => {
  const  user  =  await User.findById(req.query.id);
  const  key  =  await User.changeApiKey(user);
  res.send(key)
})

const  PORT  =  process.env.PORT  ||  3000;
app.listen(PORT, () => {
  console.log(`Serving on port ${PORT}`);
}) And now you are ready to run and see your app working properly, now you know how simple can be to create an API and monetize it using Stripe Mongoose API. node app.js Conclusion Stripe Mongoose API is a project made by me and I put in a lot of hard work, Stripe Mongoose Api will receive continuous updates so check the in case of new content, i hope you liked this tutorial, if yes please leave me a and why not a on GitHub. github repo star follow See you next time!

Monetize your API using the Stripe Mongoose API Library

Cover image credit: on Prayer X Unsplash Stripe launched a new way to accept payments via recently. It's a big deal for many use-cases. I got to know about it after trying to figure out how to support payments for offline goods and services in an Expo app using . Yes, that's a niche use case. But Stripe's no-code way to enable payments in an app goes beyond that. Payment Links managed workflow : This article is not a take on code. I love to code. It's an appreciation post on how integration utilities like Stripe Payment Links come in handy far beyond code. Disclaimer Stripe Payment Links are not meant to be used as an alternative to native in-app purchase functionality. Please make sure to read to have clear instructions on what Goods and Services are available for outside of the in-app purchases when publishing the app. Apple's App Store review guidelines Why a Payment Link? Accepting payments using a payment provider like Stripe includes a three-step process: - A server or serverless functions to handle logic, create tokens and secret keys - UI for customers to enter their details when purchasing a product. - Tracking each transaction using PaymentIntent Stripe Payment Links handle this process by giving you a layer of UI and a URL for the payment. Yes! Now, for the use case that I have, I do not have to write different serverless functions, host them on a backendless service like Firebase Cloud functions, or think about their technical maintenance over time. The Payment Links work when you host a product using Stripe. It gives you an interface to create and host a product. How to create a Payment Link Go to the Stripe Dashboard screen. From the side menu, go to Products and then click Payment Links. The example below is using Test mode, but the same process is applicable when in live mode. - Click the button "New" to add a new product and create a payment link for it. - Then, under the Product section, click "+ Add a new product". - Enter the details of the product.After adding the product details, click the button Create link. - Stripe generates a Payment link for the product added. While adding a new product, Stripe allows customizing product details by adding promotional codes, collecting a user's shipping, billing address, adjust quantity, etc. Managing a user's shipping and billing address is essential if the product sold is a physical entity. Conclusion You can now use it inside low and no-code tools like or mobile apps created using . Webflow Draftbit

The No-Code Way of Payments with Stripe: A Brief Guide

If you are familiar with Stripe, you know how big of a player they are in the online payment processing field.  Their API not only allows programmers to easily create one-time payments for sites such as e-commerce stores, but also provides quick integrations for monthly subscriptions and routing payouts.  If new to Django and Stripe, check out our recent on integrating one time payments.  Otherwise, let's get into setting up monthly payments with Django and Stripe. article Why a Monthly Subscription? Monthly subscriptions are a common practice found across the web especially among companies who promote software-as-a-service (SAAS) as their delivery model.  For example, SAAS companies such as Hubspot (marketing), Dropbox (data storage), and Mailchimp (email marketing) all offer tiered pricing options to their prospective customers.  Many consider this model to be favorable given that revenue is easier to predict once basic metrics are calculated (customer acquisition cost, lifetime value, churn rate). Predictable revenue of course creates stability and produces more accurate financial forecasts. Mailchimp pricing page Django Setup Start by setting up a virtual environment and creating a basic Django project.  We'll create a new virtual environment called . saas on Mac, use instead of for all commands Note: python3 py C:\Users\Owner\Desktop\code>py -m venv saas Next change directory into the virtual environment, install Django, and setup your project and app. C:\Users\Owner\Desktop\code>cd saas

C:\Users\Owner\Desktop\code\saas>Scripts\activate

(saas) C:\Users\Owner\Desktop\code\saas>pip install Django

(saas) C:\Users\Owner\Desktop\code\saas>django-admin startproject mysite

(saas) C:\Users\Owner\Desktop\code\saas\mysite>py manage.py startapp main Add main app to the in . settings.py mysite settings.py INSTALLED_APPS = [ , , , , , , ,
] 'main.apps.MainConfig' #add this 'django.contrib.admin' 'django.contrib.auth' 'django.contrib.contenttypes' 'django.contrib.sessions' 'django.contrib.messages' 'django.contrib.staticfiles' Create in the folder and include in . urls.py main mysite > urls.py mysite > urls.py django.contrib admin django.urls path, include urlpatterns = [
	path( , include( )), path( , admin.site.urls),
] from import from import #add include '' 'main.urls' #add path 'admin/' Stripe Integration Start by installing the official library for connecting to Stripe's API. pip install --upgrade stripe Next create a Stripe account and create products in their dashboard.  While this can be performed using Stripe CLI's we'll use the dashboard since we are already on the page from creating an account.  Make sure you are in test mode and can only view test data.  By default, you should be in test mode after creating an account.  Click products in the left-hand side navigation menu.  Create two new products: Name the product Premium Plan Add description "paid plan for advanced features" Use standard pricing Enter $15.00 and ensure "recurring" is selected Keep billing period as "monthly" Name the product Enterprise Plan Add description "enterprise plan for advanced features" Use standard pricing Enter $30.00 and ensure "recurring" is selected Keep billing period as "monthly" Now let's sync the product in the Stripe dashboard.  While we could create a model and store the relevant product information, such as as product id, as model fields, an easier solution is to simply install the and use the sync command.  We also add need to add our API keys in .  Note your live keys should always be secured and never listed in the settings.  For more information on securing environment variables, check out Python securing. dj-stripe package settings.py pip install dj-stripe mysite/settings.py STRIPE_TEST_PUBLIC_KEY = STRIPE_TEST_SECRET_KEY = STRIPE_LIVE_MODE = DJSTRIPE_WEBHOOK_SECRET = 'pk_test_E52Nh0gTCRpJ7h4JhuEX7BIO006LVew6GG' 'sk_test_L87kx7GQNbz9tajOluDts7da00mSbze3dW' False # Change to True in production "whsec_xxx" Finally migrate the database. Note: if database is sqlite, migrating make take longer than usual. py manage.py migrate Add products to database automatically with the following command: py manage.py djstripe_sync_plans_from_stripe View the admin page to see the changes we just made.  First create an admin user. Include an email such as since we'll use this as the Stripe customer name then visit .   You should see a variety of new models including our newly created products as well as plans for the products. test@example.com http://127.0.0.1:8000/admin/ py manage.py createsuperuser Checkout Page Now that we have our data synced, let's create a checkout page where users can select their plan and checkout. We'll start with the view and checkout template. Note: we have imported the Bootstrap CDN in home.html: views.py django.shortcuts render, redirect stripe json django.http JsonResponse djstripe.models Product django.contrib.auth.decorators login_required render(request, ) products = Product.objects.all() render(request, ,{ : products}) from import import import from import from import from import # Create your views here. : def homepage (request) return "home.html" @login_required : def checkout (request) return "checkout.html" "products" checkout.html {% extends "home.html" %}

{% block content %} {% for p in products %} {{p.name}} {{p.description}} {% for plan in p.plan_set.all %} {{ plan.human_readable_price }} {% endfor %} {% endfor %} Checkout Enter card details.  Your subscription will start immediately Plan: Total: Loading... Subscribe {% endblock %} < = > script src "https://js.stripe.com/v3/" </ > script < > br < > br < = > div class "container " < = > div class "row " < = > div class "col-6" < = = > div class "card mx-5 shadow" style "border-radius: 10px; border:none; " < = > div class "card-body" < = > h5 class "card-title font-weight-bold" </ > h5 < = > p class "card-text text-muted" < = = = = = = > svg class "bi bi-check" width "1em" height "1em" viewBox "0 0 16 16" fill "currentColor" xmlns "http://www.w3.org/2000/svg" < = = /> path fill-rule "evenodd" d "M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z" </ > svg </ > p < > h5 </ > h5 < = > div class "text-right" < = = = = > input type "checkbox" name "{{p.name}}" value "{{p.id}}" onclick "planSelect('{{p.name}}' ,'{{plan.human_readable_price}}', '{{plan.id}}')" </ > div </ > div </ > div </ > div </ > div < > br < > br < > hr < > br < > br < > div < = > div class "row" < = > div class "col-12" < = = > div class "card mx-5 shadow rounded" style "border-radius:50px;border:none" < = > div class "card-body" < = > h5 class "card-title font-weight-bold" </ > h5 < = > p class "text-muted " </ > p < = > div class "row" < = > div class "col-6 text-muted" < > p </ > p < > p </ > p </ > div < = > div class "col-6 text-right" < = > p id "plan" </ > p < = > p id "price" </ > p < = > p hidden id "priceId" </ > p </ > div </ > div < > br < = > form id "subscription-form" < = = > div id "card-element" class "MyCardElement"  </ > div  < = = > div id "card-errors" role "alert" </ > div < = = > button id "submit" type "submit" < = = = > div class "spinner-border  spinner-border-sm text-light hidden" id "spinner" role "status" < = > span class "sr-only" </ > span </ > div < = > span id "button-text" </ > span </ > button </ > form </ > div </ > div </ > div </ > div </ > div </ > div Now that we have a template for selecting the subscription plan. Let's add some styling and setup the credit card form by using Stripe Elements, a pre-built set of UI components. < > {


    .StripeElement { : border-box; : ; : ; : solid transparent; : ; : white; : ; : box-shadow ease; : box-shadow ease;
    } { : ;
    } { : ;
    } { : ;
    } { : none;
    } { : (120%);
    } { : ; : ; : ; : ; : ; : ; : ; : -apple-system,BlinkMacSystemFont,sans-serif; : ; : ; : normal; : break-word; : border-box; : inherit; : visible; : button; : antialiased; : ; : inherit; : transparent; : ; : ; : ; : none; : none; : none; : ; : ; : (--radius); : ; : ; : ; : ; : pointer; : all . ease; : block; : (0,0,0,.07); : ; : (--button-color);
    }

</ > style body box-sizing height 40px padding 10px 12px border 1px border-radius 4px background-color box-shadow 0 1px 3px 0 #e6ebf1 -webkit-transition 150ms transition 150ms .StripeElement--focus box-shadow 0 1px 3px 0 #cfd7df .StripeElement--invalid border-color #fa755a .StripeElement--webkit-autofill background-color #fefde5 !important .hidden display #submit :hover filter contrast #submit font-feature-settings "pnum" --body-color #f7fafc --button-color #556cd6 --accent-color #556cd6 --gray-border #e3e8ee --link-color #fff --font-color #697386 --body-font-family --radius 4px --form-width 400px -webkit-box-direction word-wrap box-sizing font overflow -webkit-appearance -webkit-font-smoothing margin 0 font-family -webkit-tap-highlight-color font-size 16px padding 0 12px line-height 32px outline text-decoration text-transform margin-right 8px height 36px border-radius var color #fff border 0 margin-top 16px font-weight 600 cursor transition 2s display box-shadow 0 4px 5.5px 0 rgba width 100% background var style .getElementById( ).disabled = ;

stripeElements(); {
  stripe = Stripe( ); ( .getElementById( )) { elements = stripe.elements(); style = { : { : , : , : , : , : { : }
    	}, : { : , : }
    };


    card = elements.create( , { : style });

    card.mount( );

    card.on( , { el = .getElementById( );
      el.classList.add( );
    });

    card.on( , { el = .getElementById( );
      el.classList.remove( );
    });

    card.on( , {
      displayError(event);
    });
  } } { displayError = .getElementById( ); (event.error) {
    displayError.textContent = event.error.message;
  } {
    displayError.textContent = ;
  }
} document "submit" true ( ) function stripeElements 'pk_test_E52Nh0gTCRpJ7h4JhuEX7BIO006LVew6GG' if document 'card-element' let // Card Element styles let base color "#32325d" fontFamily '"Helvetica Neue", Helvetica, sans-serif' fontSmoothing "antialiased" fontSize "16px" "::placeholder" color "#aab7c4" invalid color "#fa755a" iconColor "#fa755a" 'card' style '#card-element' 'focus' ( ) function let document 'card-errors' 'focused' 'blur' ( ) function let document 'card-errors' 'focused' 'change' ( ) function event //we'll add payment form handling here ( ) function displayError event let document 'card-errors' if else '' This should allow the credit card form to render.  First, we disabled the subscribe button and then called to create and then mount the credit card form.  Next, we  add a small script to update the template with the selected subscription plan and to re-enable the subscribe button if a plan is selected. stripeElements() { inputs = .getElementsByTagName( ); ( i = ; i<inputs.length; i++){
			inputs[i].checked = ; (inputs[i].name== name){

				inputs[i].checked = ;
			}
		} n = .getElementById( ); p = .getElementById( ); pid = .getElementById( );
		n.innerHTML = name;
		p.innerHTML = price;
		pid.innerHTML = priceId; .getElementById( ).disabled = ;


	} ( ) function planSelect name, price, priceId var document 'input' for var 0 false if true var document 'plan' var document 'price' var document 'priceId' document "submit" false Now we need to handle the payment form submission. We'll add the first code block to the end of the function.  First grab the form by its ID and add an event listener.  After preventing the default form submission, we change the loading state of the form in order to prevent any issues associated with double clicking the subscribe button.  Finally, with the inputted card information, we create a payment method and submit this data to our server along with the price id of the selected subscription. stripeElements() As demonstrated, we use Django's CSRF token to authorize the submission to our server. Note: Stripe's documentation includes some additional validation that you should check out if interested.  Also, unlike the documentation, we create a customer and subscription in one request to the server instead of sending separate requests. paymentForm = .getElementById( ); (paymentForm) {

		paymentForm.addEventListener( , {
			evt.preventDefault();
			changeLoadingState( ); createPaymentMethod({ card });
	  });
	}

} { billingName = ;

  stripe
    .createPaymentMethod({ : , : card, : { : billingName,
      },
    })
    .then( { (result.error) {
        displayError(result);
      } { paymentParams = { : .getElementById( ).innerHTML, : result.paymentMethod.id,
      };
      fetch( , { : , : { : , : ,
        }, : , : .stringify(paymentParams),
      }).then( { response.json(); 
      }).then( { (result.error) { result;
        } result;
      }).then( { (result && result.status === ) { .location.href = ;
      	};
      }).catch( {
          displayError(result.error.message);

      });
      }
    });
} changeLoadingState = { (isLoading) { .getElementById( ).disabled = ; .querySelector( ).classList.remove( ); .querySelector( ).classList.add( );
	} { .getElementById( ).disabled = ; .querySelector( ).classList.add( ); .querySelector( ).classList.remove( );
	}
}; //we'll add payment form handling here let document 'subscription-form' if 'submit' ( ) function evt true // create new payment method & create subscription ( ) function createPaymentMethod { card } // Set up payment method for recurring usage let '{{user.username}}' type 'card' card billing_details name ( ) => result if else const price_id document "priceId" payment_method "/create-sub" method 'POST' headers 'Content-Type' 'application/json' 'X-CSRFToken' '{{ csrf_token }}' credentials 'same-origin' body JSON ( ) => response return ( ) => result if // The card had an error when trying to attach it to a customer throw return ( ) => result if 'active' window '/complete' ( ) function error var ( ) function isLoading if document "submit" true document "#spinner" "hidden" document "#button-text" "hidden" else document "submit" false document "#spinner" "hidden" document "#button-text" "hidden" Add url paths for creating a subscription/customer and when payment is complete. main/urls.py django.urls path . views

app_name = urlpatterns = [
	path( , views.homepage, name= ),
	path( , views.checkout, name= ),
	path( , views.logout_request, name= ),
	path( , views.login_request, name= ),
	path( , views.register, name= ),
	path( , views.create_sub, name= ), path( , views.complete, name= ), ] from import from import "main" "" "homepage" "checkout" "checkout" "logout" "logout_request" "login" "logout_request" "register" "register" "create-sub" "create sub" #add "complete" "complete" #add Next, create a view to handle creating a Stripe customer and subscription.  The customer and subscription should also be stored in our local database.  Luckily, we can easily syn our data using dj-stripe. main/views.py ... stripe json django.http JsonResponse djstripe.models Product django.contrib.auth.decorators login_required djstripe django.http HttpResponse

... request.method == : data = json.loads(request.body)
	    payment_method = data[ ]
	    stripe.api_key = djstripe.settings.STRIPE_SECRET_KEY

	    payment_method_obj = stripe.PaymentMethod.retrieve(payment_method)
	    djstripe.models.PaymentMethod.sync_from_stripe_data(payment_method_obj) : customer = stripe.Customer.create(
	            payment_method=payment_method,
	            email=request.user.email,
	            invoice_settings={ : payment_method
	            }
	        )

	        djstripe_customer = djstripe.models.Customer.sync_from_stripe_data(customer)
	        request.user.customer = djstripe_customer subscription = stripe.Subscription.create(
	            customer=customer.id,
	            items=[
	                { : data[ ],
	                },
	            ],
	            expand=[ ]
	        )

	        djstripe_subscription = djstripe.models.Subscription.sync_from_stripe_data(subscription)

	        request.user.subscription = djstripe_subscription
	        request.user.save() JsonResponse(subscription) Exception e: JsonResponse({ : (e.args[ ])}, status = ) : HTTPresponse( ) import import from import from import from import import from import @login_required : def create_sub (request) if 'POST' # Reads application/json and returns a response 'payment_method' try # This creates a new Customer and attaches the PaymentMethod in one API call. 'default_payment_method' # At this point, associate the ID of the Customer object with your # own internal representation of a customer, if you have one. # print(customer) # Subscribe the user to the subscription created "price" "price_id" "latest_invoice.payment_intent" return except as return 'error' 0 403 else return 'requet method not allowed' Also add a view function for the payment complete page: render(request, ) : def complete (request) return "complete.html" Go through and test the integration.  As suggested by Stripe, use "4242 4242 4242 4242" as the test credit card and view the results upon submitting your payment.  Click on "Subscriptions" under "Customers" in your Stripe dashboard to view the newly created subscription and customer.  You should see something similar as below: Conclusion Thanks for reading about using Django and Stripe to create monthly subscriptions. Hopefully this provides a foundation for creating your own SAAS project.  We plan on writing additional pieces on Django and Stripe to cover topics such as routing payments with Stripe Connect, the underlying payment technology behind Lyft, Postmates, Kickstarter, and more. Also if you have any suggestions on other Django integrations that you'd like to read about, leave a comment below. Previously published at https://www.ordinarycoders.com/blog/article/django-stripe-monthly-subscription

Stories, News & Mentions about STRIPE

Categories

Trending Topics

Stories, News & Mentions about STRIPE

Stripe’s Stories on HackerNoon

Stripe's News & Mentions

Categories

Trending Topics