Create a food ordering app with Strapi and Next.js (6)

1

This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.

This is a companion discussion topic for the original entry at https://strapi.io/blog/nextjs-react-hooks-strapi-checkout-6
2

Thanks so much for this wonderful tutorial on strapi, nextjs, stripe and graphql.
it is very educative.
i am in part 6 now and the stripe integration works fine.
Sir, when I click the confirm order button the payment will be successful but there is no feedback on the client-side and no redirect to another page
thanks

4

I made it this far in the tutorial; however, in my Content Manager, orders post as drafts (not published) and do not include the relation (the currently logged in user placing the order). Help!

5

Can you provide the code example that handles the order action. The reason why you might not have the user relation set is that you are not passing the userID. And order show up as draft because you are most likely not passing the the publishedAt with a date.

6

Hi, this is straight from tutorial:
//& don’t change this

“use strict”;
const stripe = require(“stripe”)(“sk_test_key_goes_here”);
const { createCoreController } = require(“@strapi/strapi”).factories;

// Create the order controller
module.exports = createCoreController(“api::order.order”, ({ strapi }) => ({
async create(ctx) {
// Get the authenticated user from the context
const user = ctx.state.user;

// Check if a user is authenticated
if (!user) {
  return ctx.unauthorized("You are not authorized!");
}

// Destructure the necessary properties from the request body
const { address, amount, dishes, token, city, state } = ctx.request.body.data;

try {
  // Charge the customer using Stripe
  await stripe.charges.create({
    amount: amount,
    currency: "usd",
    description: `Order ${new Date()} by ${ctx.state.user.id}`,
    source: token
  });

  // Create the order and associate it with the authenticated user
  const order = await strapi.service("api::order.order").create({
    data: {
      amount,
      address,
      dishes,
      city,
      state,
      token,
      user: ctx.state.user.id // Set the user field to the ID of the authenticated user
    },
  });

  // Return the created order
  return order;
} catch (err) {
  // Handle errors, return a 500 error for simplicity in this example
  console.log("err", err);
  ctx.response.status = 500;
  return {
    error: { message: "There was a problem creating the charge" },
    address,
    amount,
    dishes,
    token,
    city,
    state,
  };
}

},
}));

7

Also observed that the user and the relation updated posted twice after dozens of tries after I clicked “user” in the displayed fields…

8

something is up with the code to integrate stripe payments. the transactions are successful on frontend, and they post to orders in strapi, but payments do not post to stripe. i’ve taken out the keys and it makes no difference in the code.

9 
// `source` is obtained with Stripe.js; see https://stripe.com/docs/payments/accept-a-payment-charges#web-create-token
const charge = await stripe.charges.create({
  amount: 2000,
  currency: 'usd',
  source: 'tok_amex',
  description: 'My First Test Charge (created for API docs at https://www.stripe.com/docs/api)',
});

console.log(charge)

See if you can cosple log the response and see if you get any error messages.

10

no errors on :
const charge = await stripe.charges.create, but i did create a seperate test file to test that code outside of this project.
const stripe = require(‘stripe’) keeps getting this error: “This expression is not callable.
Type ‘typeof import(“stripe”)’ has no call signatures.ts(2349)”.
I see that the stripe api gets hit with a post but no payments doesn’t update. I’ve tried every stripe import statement out there…

11

I just checked here. And it seem that Stripe recommends different work flow now. Create a charge | Stripe API Reference

Blockquote Create a charge

Use the Payment Intents API to initiate a new payment instead of using this “charge” method. Confirmation of the PaymentIntent creates the Charge object used to request payment, so this method is limited to legacy integrations.

Here is the Stripe docs going over the payment flow Accept a payment | Stripe Documentation

12

Hi, thank you for this tutorial. I have made it this far, but I’m having some issues here. When I test completing an order, in Strapi, the order is a “draft,” and there is no user connected to the order. I tried creating a publishedAtValue variable and passing it into the order create, but these problems are persisting. Help please?

const publishedAtVal = new Date();

const order = await strapi.service("api::order.order").create({
        data: {
          amount,
          address,
          dishes,
          city,
          state,
          token,
          user: ctx.state.user.id,
          publishedAt: publishedAtVal,
        },
      });
      return order;```