Preflight response is not successful. Status code: 403. React, Flask and Stripe?

Viewed 43

I feel like I've looked everywhere for this and can't find my answer!

I've got a React app working with a Node server, but I need to get it to work with a Flask server instead.

This is my React code:

function buy() {
    window.scroll(0, 0);
    fetch(`${IP}/init_checkout`, {
      method: "POST",
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        price_id: 'my_stripe_product_price',
      }),
    })
      .then(res => {
        if (res.ok)
          return res.json();
        return res.json().then(json => Promise.reject(json));
      })
      .then(({ url }) => {
        window.location = url;
      })
      .catch(e => {
        console.error(e.error);
      });
  }

And, my route in Flask:

@app.route('/init_checkout', methods=['POST'])
    @cross_origin(origin="*")
    def init_checkout():
        data = json.loads(request.data)

        price_id = data['price_id']

        try:
            checkout_session = stripe.checkout.Session.create(
                success_url='http://localhost:3000',  # noqa
                cancel_url='http://localhost:3000/form',
                payment_method_types=[
                    'card', 'sepa_debit', 'sofort', 'ideal'
                ],
                mode='subscription',
                line_items=[{
                    'price': price_id,
                    'quantity': 1
                }],
            )
            return redirect(checkout_session.url, code=303)
        except Exception as e:
            print(str(e))
            return jsonify({'error': {'message': str(e)}}), 400

In the console, I get the url I'd like to get too, but the app won't automatically direct me there?

1 Answers

Just for reference in case anyone else comes across this or similar ... thanks to hmunoz:

function buy() {
    window.scroll(0, 0);
    fetch(`${IP}/init_checkout`, {
      method: "POST",
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        price_id: 'my_stripe_product_price',
      }),
    })
      .then(res => {
        if (res.ok)
          return res.json();
        return res.json().then(json => Promise.reject(json));
      })
      .then(({ url }) => {
        window.location = url;
      })
      .catch(e => {
        console.error(e.error);
      });
  }

And, my route in Flask:

@app.route('/init_checkout', methods=['POST'])
    @cross_origin(origin="*")
    def init_checkout():
        data = json.loads(request.data)

        price_id = data['price_id']

        try:
            checkout_session = stripe.checkout.Session.create(
                success_url='http://localhost:3000',  # noqa
                cancel_url='http://localhost:3000/form',
                payment_method_types=[
                    'card', 'sepa_debit', 'sofort', 'ideal'
                ],
                mode='subscription',
                line_items=[{
                    'price': price_id,
                    'quantity': 1
                }],
            )
            return checkout_session
        except Exception as e:
            print(str(e))
            return jsonify({'error': {'message': str(e)}}), 400
Related