如何延迟来自用户表单的 POST 请求，直到收到来自 Stripe 的 webhook POST 之后？

Question

I want users to pay a fee before a POST request from a front end form is processed. I have a Stripe webhook that works fine on the backend, but I'm not sure how to delay the front end posting of the form until after the payment confirmation is received.

In the code below, right now, createTour and createTourPay run at the same time. I would like for createTourPay to execute first, and the createTour only triggers after Stripe posts to my application from the webhook. How can I achieve this?

Controller File (webhook):

exports.webhookCheckout = (req, res, next) => {
  const signature = req.headers['stripe-signature'];
  let event;
  try {
    event = stripe.webhooks.constructEvent(
      req.body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET
    );
  } catch (err) {
    return res.status(400).send(`Webhook error: ${err.message}`);
  }
  if (
    event.type === 'checkout.session.completed' &&
    event.line_items.name === 'New Job Purchase'
  ) {
    res.status(200).json({ recieved: true });
    // Somehow, I want this to trigger the execution of the POST request in my front end JS file.
  } else {
    if (event.type === 'checkout.session.completed')
      createBookingCheckout(event.data.object);
    res.status(200).json({ recieved: true });
  }
};

Front end JS file:

export const createTourPay = async myForm => {
  try {
    // 1) Get the checkout session from API response
    const session = await axios(`/api/v1/tours/tour-pay`);
    const complete = 1;
    // console.log(session);
    // 2) Create checkout form + charge the credit card
    await stripe.redirectToCheckout({
      sessionId: session.data.session.id
    });
  } catch (err) {
    // console.log(err);
    showAlert('error', err);
  }
};

export const createTour = async myForm => {
  try {
    const startLocation = {
      type: 'Point',
      coordinates: [-10.185942, 95.774772],
      address: '123 Main Street',
      description: 'Candy Land'
    };

    const res = await axios({
      method: 'POST',
      headers: {
        'Content-Type': `multipart/form-data; boundary=${myForm._boundary}`
      },
      url: '/api/v1/tours',
      data: myForm
    });

    if (res.data.status === 'success') {
      showAlert('success', 'NEW TOUR CREATED!');
      window.setTimeout(() => {
        location.assign('/');
      }, 1500);
    }
  } catch (err) {
    showAlert('error', err.response.data.message);
  }
};

Answer 1

Broadly: don't do this. Instead, you in fact should create some pending/unpaid version of the "tour" (or any other product/service) in your system, then attach the unique id (eg: tour_123 ) to the Checkout session when you create it, either using the client_reference_id ( doc ) or metadata ( doc ):

const session = await stripe.checkout.sessions.create({
  // ... other params
  client_reference_id: 'tour_123',
  metadata: { tour_id: 'tour_123' },
});

Then you'd use the webhook to inspect those values, and update your own database to indicate the payment has been made and that you can fulfill the order to the customer (ship product, send codes, allow access to service etc).

If you really want to proceed with a more synchronous flow, you can use separate auth and capture to sequence your customer experience and capture the funds later after authorizing and creating your tour entity.

Edit: a note about security

You should never trust client-side logic for restricted operations like creating a "paid" tour. A motivated user could, for example, simply call your /api/v1/tours create endpoint without ever going through your payment flow. Unless you validate a payment and track that state on your server you won't be able to know which of these had actually paid you.