#rezamirzad
steep nebula
near whale
if it might be of any help, there is also this error:
naive coral
Hi there 👋 my teammate isn't around at the moment, so would you mind sharing what it is you're looking for help with?
near whale
hello,i am a developer, looking to use Stripe payments in order to integrate it on my employer's website.i have been testing different ways of code, and I just do not seem to be able to make it work.
also, i can not find the settings for Checkout, in order to enable the Checkout client-only integration.
i have looked everywhere on the docs.my concern is that, our website uses React on the frontend, and graphql on the backend.I have set up the resolvers, types, and they 'seem' to be ok. but i still can not get any response back from stripe
let me explain what I am looking to do:we have some products, that are available to be purchased, either one-time payment or as a subscription.i gather the information through out a funnel, and at the last step, i need to show the checkout "integrated in my react component".then i get the response and navigate to the rest of the funnel from there
naive coral
You mentioned that you're not getting a response from Stripe, but the failed requests you shared seem to indicate that your frontend can't reach your backend, I'm not seeing any requests to Stripe so far in the provided screenshots.
near whale
shall i share my front a back code?
calm minnow
That wouldn't necessarily help right now
near whale
this is my front
import React, { useState, useEffect } from "react";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import CheckoutForm from "../Checkout/CheckoutForm";
import "./App.css";
const stripePromise = loadStripe("pk_test_xxxxx");
export default function App() {
const [clientSecret, setClientSecret] = useState("");
useEffect(() => {
// Create PaymentIntent as soon as the page loads
fetch("/create-payment-intent", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }), })
.then((res) => res.json())
.then((data) => setClientSecret(data.clientSecret)); }, []);
const options = { clientSecret, };
return ( <div className="App"> {clientSecret && ( <Elements options={options} stripe={stripePromise}> <CheckoutForm /> </Elements> )} </div> );}
calm minnow
All we know is that the error is on your backend, you will need to debug to find what line(s) of code on your backend are running in to this error
If it is a line of Stripe code, let me know the exact error you are getting and we can look further. Unfortunately until then I can't tell what line it is just by looking at your backend code
near whale
as far as i understood, the front can not reach /created-payment-intent on my backend
calm minnow
Unfortunately I can't help diagnose that, this is your front end and backend and a networking problem between them. You are in the best position to debug your network config
Are your front end and backend on the same machine? localhost only works if they are on the same machine
near whale
so, i managed to call the controller on the backend.
but it shows this error:
err: {
"type": "StripeInvalidRequestError",
"message": "Missing required param: amount.",
but i am passing it as:
async calculateOrderAmount(items) {
return 1400; }
// @Post("/create-payment-intent")
async createPaymentIntent(ctx: Context): Promise<void> {
try {
if (ctx.invalid?.body) {
throw HttpError.from(HttpErrorKind.BAD_REQUEST);
}
const stripe = require('stripe')( 'sk_test_XXXXXXXX' ); const {items} = ctx.request.body; // Create a PaymentIntent with the order amount and currency const paymentIntent = await stripe.paymentIntents.create({ amount: this.calculateOrderAmount(items), currency: 'eur', automatic_payment_methods: { enabled: true, }, }); ctx.status = 200; ctx.body = {clientSecret: paymentIntent.client_secret}; } catch (error) { this.handleError(error, ctx); } }
calm minnow
Ah so that error says that you aren't passing amount to your stripe.paymentIntents.create call
You should add that parameter so that we know how much to charge https://stripe.com/docs/api/payment_intents/create#create_payment_intent-amount
near whale
it is like this
const paymentIntent = await stripe.paymentIntents.create({
amount: 1400,
currency: 'eur',
automatic_payment_methods: { enabled: true, }, });
but now i have
calm minnow
Can you check the server logs again for errors?
near whale
no errors on the server side
i actually get the paymentIntent.client_secret at my server side.
but the checkout form does not show up
and the same error mentioned is still in the console of my browser
i am sorry, i am disconencted?
calm minnow
I am a bit confused, that console error still says it can't reach you backend
Are you making some other call to your backend that does work?
And what line of code on your front end is failing then?
near whale
no, just the one through the frontend
this is the response ON the server
according to the console,
it's the fetech that can not reach the back, but then why do i get the response customer_secret?
calm minnow
Unfortunately I can't really tell, again you are in the best position to debug how that happens. If you step through your front end code that should show when that is getting set
As well as the line that is erroring out currently on your front end. We can help with errors from Stripe API calls but we still need you to identify which lines of code are erroring here
near whale
ok, i will try to continue from here.
i will reach again to you guys if I get stuck
by the way, is there any way to just integrate a pre-built checkout page in a react component?
like with the payment links
calm minnow
Yes, you can create a checkout session on your backend and redirect your user to its URL https://stripe.com/docs/api/checkout/sessions/create