backend.py

@api_view(['POST'])
def stripe_session(request):
    meeting_id = request.data.get('meetingId')
    meeting = Meeting.objects.get(zoom_meeting__zoom_id=meeting_id)
    stripe_account_id = meeting.creator.stripe_account_id
    print(settings.STRIPE_API_KEY)

    stripe.api_key = settings.STRIPE_API_KEY
    session = stripe.checkout.Session.create(
      payment_method_types=['card'],
      line_items=[{
          'name': 'Drive Club transportation',
          'amount': 1000,
          'currency': 'usd',
          'quantity': 1,
        }],
      payment_intent_data={
          'application_fee_amount': 123,
          'transfer_data': {
                'destination': stripe_account_id,
              },
        },
      success_url=settings.CLIENT_ROOT_URI,
      cancel_url=settings.CLIENT_ROOT_URI,
    )

    return Response({'sessionId': session.id})

frontend.tsx

import React from 'react';
import { Button } from 'antd';
import { fetchWithAuth } from '@src/helpers/fetch';
import {
  API_SERVER_URL, STRIPE_API_PUBLISHABLE_KEY,
} from '@src/constants/env';
import { Meeting } from '@src/types';
import { loadStripe } from '@stripe/stripe-js';
import useSWR from 'swr';

interface CheckoutButtonProps {
  meetingId: Meeting['id'];
}

export const CheckoutButton: React.FC<CheckoutButtonProps> = (
  { meetingId },
) => {
  // Fetch a meeting representation from our end
  const meetingsSWR = useSWR<Meeting>(
    `${API_SERVER_URL}rest/meetings/${meetingId}`,
  );

  const meetingData = meetingsSWR.data;

  // Click handler to redirect to to stripe checkout
  const checkout = async () => {
    // Create a stripe checkout session on backend
    const response = await fetchWithAuth(
      `${API_SERVER_URL}rest/stripe/checkouts/sessions`,
      {
        method: 'POST',
        body: JSON.stringify({ meetingId }),
      },
    );

    // Get session id from one that was created
    const { sessionId } = await response.json();
    const stripeAccount = meetingData.creator.stripe_account_id;

    // Logging here to double check things look right
    console.log('STRIPE_API_PUBLISHABLE_KEY: ', STRIPE_API_PUBLISHABLE_KEY);
    console.log('stripeAccount: ', stripeAccount);
    console.log('sessionId: ', sessionId);

    const stripe = await loadStripe(STRIPE_API_PUBLISHABLE_KEY, {
      stripeAccount,
    });

    // Redirect to proper stripe checkout
    const { error } = await stripe.redirectToCheckout({
      sessionId,
    });
  };

  return (
    <Button onClick={() => checkout(meetingId)}>Checkout</Button>
  );
};