如何使用 Django 和 JavaScript 为多个产品创建 Stripe Checkout 会话？

Question

I'm building a site with a few products for purchase using Django and Stripe Checkout. I can get the checkout page for one product without a problem. But what I would like to do is create a checkout page with multiple products. This is my function in my Django views.py. Note that it takes product name as a parameter. If I hard code my stripe products into the line_items I can get a checkout session with multiple products.

def create_stripe_checkout_session(request, product_name):
    domain_url = 'http://localhost:5000/'
    try:
        checkout_session = stripe.checkout.Session.create(
            payment_method_types=['card'],
            shipping_rates=[''],
            shipping_address_collection={'allowed_countries': ['US', 'CA']},
            metadata={'product_name': product_name, },
            line_items=[{'price': PRODUCTS_STRIPE_PRICING_ID[product_name],
                         'quantity': 1, 'adjustable_quantity': {'enabled': True, 'minimum': 1, 'maximum': 10, }, }],
            mode='payment',
            success_url=domain_url + 'success?session_id={CHECKOUT_SESSION_ID}',
            cancel_url=domain_url + 'cancelled.html',)

        return JsonResponse({'id': checkout_session.id})

    except Exception as e:
        print(e)
        raise SuspiciousOperation(e)

Where I'm struggling is with my JavaScript fetch. My .html page has a bunch of product buttons with class 'buy-button' as well as unique button values and add/subtract to cart buttons. I'm able to keep track of how many and which products I need to create a checkout session for. I just can't figure out how to replace the JS productName variable with an object literal/dictionary or other data structure that I can pass to my create_stripe_checkout_session() function so that I am able to receive payment for multiple products instead of just one.

  
<script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe('pk_test_6O........................4u00tQlwvoa9');


    // Gets all buy buttons
    var buttons = document.getElementsByClassName('buy-button');
    for (i = 0; i < buttons.length; i++) {

    // for every button we will add a Stripe POST request action
    buttons[i].addEventListener('click', function(event) {
    var targetElement = event.target || event.srcElement;
    var productName =  targetElement.value;
    console.log('Buying: ' + productName);

    // Our endpoint with the chosen product name
    var url = '/create-checkout-session/' + productName
    console.log(url);
    // Create a new Checkout Session
    fetch(url, {
      method: 'POST',
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(session) {
      return stripe.redirectToCheckout({ sessionId: session.id });

    })
    .then(function(result) {
      // If `redirectToCheckout` fails due to a browser or network
      // error, you should display the localized error message to your
      // customer using `error.message`.
      if (result.error) {
        alert(result.error.message);
      }
    })
    .catch(function(error) {
      console.error('Error:', error);
    });

  });

}
</script>

Answer 1

So I finally figured out how to complete this using the fetch body parameter. Hopefully, others will find this useful because it took me a while and I couldn't find any documentation about how to do it after a pretty extensive search. I'm using an event listener to grab item_1 and item_2 values which I'm tracking with cart button click counters. This information is passed with fetch via the data variable.

<script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe('pk_test_51IuUC4K.........voa9');

    // Gets all buy buttons
    var buttons = document.getElementsByClassName('buy-button');
    for (i = 0; i < buttons.length; i++) {

   // for every button we will add a Stripe POST request action
    buttons[i].addEventListener('click', function(event) {
    var targetElement = event.target || event.srcElement;
    var productName =  targetElement.value;
    console.log('Buying: ' + productName);

    var data = JSON.stringify({
    item: ["item_1", "item_2"],
    item_quantity: [1, 3]
    })

    // Our endpoint with the chosen product name
    var url = '/create-checkout-session/' + productName
    console.log(url);
    // Create a new Checkout Session
    fetch(url, {
      method: 'POST',
      body: data,
      headers: { 'Accept': 'application/json, text/plain, */*','Content-Type': 'application/json'
        }
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(session) {
      return stripe.redirectToCheckout({ sessionId: session.id });

    })
    .then(function(result) {
      // If `redirectToCheckout` fails due to a browser or network
      // error, you should display the localized error message to your
      // customer using `error.message`.
      if (result.error) {
        alert(result.error.message);
      }
    })
    .catch(function(error) {
      console.error('Error:', error);
    });

    });

    }

Back in my views.py file I can now access the data as a dictionary and pass it into the line_items parameter within the create_stripe_checkout_session() function. This overrides the productName variable that is used to make the original checkout session request.

def create_stripe_checkout_session(request, product_name):
    domain_url = 'http://localhost:5000/'

    data = json.loads(request.body.decode("utf-8"))
    item = data['item']
    item_quantity = data['item_quantity']

    line_items_list = []
    for i, q in zip(item, item_quantity):
        line_items_list.append({'price': PRODUCTS_STRIPE_PRICING_ID[i],
                         'quantity': q, 'adjustable_quantity': {'enabled': True, 'minimum': 1, 'maximum': 10, }, })
    try:
        checkout_session = stripe.checkout.Session.create(
            payment_method_types=['card'],
            shipping_rates=['shr_1J9fRXKMrN2iY6OwFXjmnVQP'],
            shipping_address_collection={'allowed_countries': ['US', 'CA']},
            line_items=line_items_list,
            mode='payment',
            success_url=domain_url + 'success?session_id={CHECKOUT_SESSION_ID}',
            cancel_url=domain_url + 'cancelled.html',)

        return JsonResponse({'id': checkout_session.id})