SimonHoiberg

const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_KEY || '');

const Upgrade = () => {
  return (
    <div>
      <h1>Upgrade now</h1>
      <Elements stripe={stripePromise}>
        <CheckoutForm />
      </Elements>
    </div>

SimonHoiberg

import { loadStripe } from '@stripe/stripe-js';
import {
  CardNumberElement,
  CardExpiryElement,
  CardCvcElement,
  Elements,
  useStripe,
  useElements,
} from '@stripe/react-stripe-js';

SimonHoiberg

class StripeManager {
  ...

  public static async retryInvoice(customerID: string, paymentMethodID: string, invoiceID: string) {
    const request = await fetch('https://your-endpoint/stripe/retry-invoice', {
      method: 'POST',
      body: JSON.stringify({
        customerID,
        paymentMethodID,
        invoiceID,

SimonHoiberg

class StripeManager {
  ...

  public static async retreivePaymentInfo(paymentMethodID: string) {
    try {
      const request = await fetch(
        'https://your-endpoint/stripe/retrieve-payment-method',
        {
          method: 'POST',
          body: JSON.stringify({

SimonHoiberg

class StripeManager {
  ...

  public static async updatePaymentMethod(customerID: string, paymentMethodID: string) {
    await fetch('https://your-endpoint/stripe/update-payment-method', {
      method: 'POST',
      body: JSON.stringify({
        customerID,
        paymentMethodID,
      }),

SimonHoiberg

class StripeManager {
  ...

  public static async retrieveSubscription(subscriptionID: string) {
    const request = await fetch('https://your-endpoint/stripe/retrieve-subscription', {
      method: 'POST',
      body: JSON.stringify({
        subscriptionID,
      }),
    });

SimonHoiberg

class StripeManager {
  ...

  public static async handleSubscription(subscriptionID: string, end: boolean) {

    const request = await fetch('https://your-endpoint/stripe/handle-subscription', {
      method: 'POST',
      body: JSON.stringify({
        subscriptionID,
        end,

SimonHoiberg

class StripeManager {
  ...

  public static async createSubscription(customerID: string, paymentMethodID: string) {
    const request = await fetch('https://your-endpoint/stripe/create-subscription', {
      method: 'POST',
      body: JSON.stringify({
        customerID,
        paymentMethodID,
      }),

SimonHoiberg

export interface IStripeSubscription {
  id: string;
  object: string;
  application_fee_percent?: any;
  billing_cycle_anchor: number;
  billing_thresholds?: any;
  cancel_at?: any;
  cancel_at_period_end: boolean;
  canceled_at?: any;
  collection_method: string;

SimonHoiberg

class StripeManager {
  ...

  public static async getStripeCustomerID() {
    // Retrieve the current customerID from the currently logged in user
    // getUserFromDB() is *your* implemention of getting user info from the DB
    const { customerID } = getUserFromDB();

    if (!customerID) {
      const customer = await this.createCustomer();