在访问变量和设置 Stripe Connect (Flask) 时遇到问题

Question

I'm building a Flask marketplace app (using Stripe Collect payments then pay out ) where users can choose how much they want to pay (think fundraiser).

I am having trouble moving necessary data around appropriately throughout the checkout process and could really use some help.

Once a user enters how much they'd like to donate, the donation amount and the owner of the campaign they'd like to donate to are sent to the below /pay route where they see a form to enter in their card details with a "Submit Payment" button.

@app.route('/pay', methods=['GET', 'POST'])
def pay():
    campaign = Campaign.query.get_or_404(request.args["campaign_id"])
    owner = User.query.get_or_404(campaign.user_id) #owner of the campaign
    donation_amount = request.args['amount_entered'] # EX: "1000"
    return render_template('payment_form.html', campaign=campaign, owner=owner, amount=donation_amount)

The file, payment_form.html , has a simple Stripe form like this:

<form method="post" id="payment-form" class="sr-payment-form">
    <div class="sr-form-row">
        <label for="card-element">Credit or debit card</label>
        <div style="width: 30em" id="card-element"></div>
    </div>
    <div>
        <span style="width: 30em; height: 2em; letter-spacing: 0em" id="card-errors" role="alert"></span>
    </div>
    <button id="card-button" style="width: 33em;">Submit Payment</button>
</form>

And whenever someone enters their card info and submits the payment, I have a JavaScript file that listens for it and processes the payment (this does not work yet).

var form = document.getElementById('payment-form');

form.addEventListener('submit', function(ev) {
  ev.preventDefault();
  fetch("/pay_now", {
    method: "GET",
    headers: {
      "Content-Type": "application/json"
    },
  })
  .then(response => response.json())
  .then(data => {
      // not sure what to do here
  });
  stripe.confirmCardPayment(clientSecret, {
    payment_method: {
      card: card,
      billing_details: {
        name: 'Jenny Rosen' //placeholder (would like to replace)
      }
    }
  }).then(function(result) {
    if (result.error) {
      console.log(result.error.message);
    } else {
      if (result.paymentIntent.status === 'succeeded') {
    }
  });
});

This script fetches the below Flask API /pay_now and should return the clientSecret variable as well as other necessary data to complete the transaction.

@app.route('/pay_now', methods=['GET','POST'])
def create_payment():
    intent = stripe.PaymentIntent.create(
        payment_method_types=['card'],
        amount="1000", #need to pass dollar amount here calculated in /pay route
        currency="usd",
        transfer_data={'destination': owner.stripe_id}, #need to pass owner from /pay route
        application_fee_amount="100")
    )
    client_secret = intent.client_secret
    return jsonify({"client_secret": client_secret})

So basically, my dilemma is that I have the amount of the donation and the campaign owner as variables in the /pay route. But I need to access them when I create the stripe.PaymentIntent object when I call the /pay_now API from my JavaScript and then I need to pass the clientSecret variable back to my JavaScript file for confirmCardPayment() to actually complete the payment.

I'm also open to different approaches if mine doesn't make sense.

I am new to Stripe & new to APIs in Flask. Any help or explanation here would be extremely helpful. Thanks in advance!

Answer 1

You'd want to only POST to your /pay_now route, in the body of that POST you should include the amount your user intends to donate. Then it's a simple case of including that amount when creating the PaymentIntent and returning the client secret to be confirmed on the client.

You might want to first do some checks on both the client and server whether the amount makes sense (eg if someone enters -1 it correctly gets rejected).

The stripe.confirmCardPayment code should go in the then resolver of your fetch request, after the response has been parsed to JSON:

fetch("/pay_now", {
    method: "POST",
    body: JSON.stringify({
      amount: amount, // get this from the form
    }),
    headers: {
      "Content-Type": "application/json"
    },
  })
  .then(response => response.json())
  .then(data => {
    stripe.confirmCardPayment(data.clientSecret, {
      payment_method: {
        card: card,
        billing_details: {
          name: name, // get this from the form, like you did with the amount
        }
      }
    })
  .then(function(result) {
    if (result.error) {
      console.log(result.error.message);
    } else {
      if (result.paymentIntent.status === 'succeeded') {
        // display success message
      }
    }
  });