#Ninjaftwxx
rigid kestrel
Any specific errors you can share? What specific part of the integration isn't working?
sudden tangle
redirect url not working
to load resource: the server responded with a status of 500 ()
_app-ccd7bc957d73683c.js:42 Uncaught (in promise) er {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}
o
rigid kestrel
Redirect URL for what kind of Stripe integration?
sudden tangle
ecommerce app when i click on checkout so its not redirect to checout page of stripe in live but working fine in localhost
??
rigid kestrel
What is 'checkout' in the Stripe context? Hosted solution (https://stripe.com/docs/payments/checkout), or Payment Element (or something else)?
Can you share the code that throws that error? You're going to need to provide me with more details
sudden tangle
const handleCheckout = async () => {
const lineItems = cartItems.map((item) => {
return {
price_data: {
currency: 'INR',
product_data: {
name: item.title
},
unit_amount: item.price // because stripe interprets price in cents
},
quantity: item.quantity
}
})
const { data } = await axios.post('http://localhost:3000/api/stripe', { lineItems })
console.log(data)
const stripe = await stripePromise
console.log("id", id)
await stripe.redirectToCheckout({ sessionId: data?.id })
}
frontend part onclick btn calling this function
nextjs api route
import Stripe from "stripe";
const stripe = new Stripe('sk_test_51N1sTXSGLzKrHE9vxrtXbM6r4MLCcDkGJUgzHbwdfG9Kq9XDSmaoquhfnmxzAEkUqMXzLhMGnojUBqcePGagIZBq00VxAq6BPV')
export default async function handler(req, res) {
if (req.method === 'POST') {
try {
const session = await stripe.checkout.sessions.create({
line_items: req.body.lineItems,
mode: 'payment',
payment_method_types: ['card'],
success_url: ${process.env.CLIENT_URL}/checkout-success,
cancel_url: ${process.env.CLIENT_URL}/cart
})
return res.status(201).json(session)
} catch (error) {
return res.status(500).json(error)
}
}
} next js api
live url https://shopkart-app.vercel.app/
rigid kestrel
Let me see
sudden tangle
ok
rigid kestrel
Looks like your success_url & cancel_url values are invalid: https://dashboard.stripe.com/test/logs/req_63OyF4c5vhTWeP
Seems like there's an additional / – must be in your process.env.CLIENT_URL variable too
sudden tangle
but it not redirect to axios.post('http://localhost:3000/api/stripe', { lineItems })
console.log(data)
const stripe = await stripePromise
console.log("id", id)
await stripe.redirectToCheckout({ sessionId: data?.id })
}
frontend part onclick btn calling this function
nextjs api route
import Stripe from "stripe";
const stripe = new Stripe('sk_test_51N1sTXSGLzKrHE9vxrtXbM6r4MLCcDkGJUgzHbwdfG9Kq9XDSmaoquhfnmxzAEkUqMXzLhMGnojUBqcePGagIZBq00VxAq6BPV')
why its working on local host
i have to verify live domain??
rigid kestrel
I suspect your CLIENT_URL variable is different in production than it is locally
https://shopkart-app.vercel.app//cart is the cancel_url your API call is passing. That's invalid, and based on the code you've shared implies that process.env.CLIENT_URL is https://shopkart-app.vercel.app/
You need to remove the trailing slash from that, or remove it in the cancel_url parameter (i.e. ${process.env.CLIENT_URL}cart
sudden tangle
checking
Frotend code is import axios from 'axios'
import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { API_BASE_URL_AUTH } from '../constants/APIConstants'
import { cartSliceAction } from "../redux/cartSlice"
import { loadStripe } from '@stripe/stripe-js';
const PayButton = () => {
const items = useSelector((state) => state?.cart)
const [id, setId] = useState("")
const profileData = useSelector((state) => state?.profile?.profile)
const cartItems = items ? items : []
const stripePromise = loadStripe('pk_test_51N1sTXSGLzKrHE9v83gHnBgs5oc1W4971x5cUeLhtBV9vgsP4fNtKxftlksJAOnlueIm28R2kab0mBAM7UfTG59M00rckxiEET')
const dispatch = useDispatch()
const handleCheckout = async () => {
const lineItems = cartItems.map((item) => {
return {
price_data: {
currency: 'INR',
product_data: {
name: item.title
},
unit_amount: item.price // because stripe interprets price in cents
},
quantity: item.quantity
}
})
const { data } = await axios.post('https://shopkart-app.vercel.app/api/stripe', { lineItems })
console.log(data)
const stripe = await stripePromise
console.log("id", id)
await stripe.redirectToCheckout({ sessionId: data?.id })
}
return (
<button className="mt-6 w-full hidden lg:block md:block bg-indigo-700 py-3 font-medium text-blue-50" onClick={() => handleCheckout()}>Check Out</button>
)
}
export default PayButton
checkput button code
Next js api code
import Stripe from "stripe";
const stripe = new Stripe('sk_test_51N1sTXSGLzKrHE9vxrtXbM6r4MLCcDkGJUgzHbwdfG9Kq9XDSmaoquhfnmxzAEkUqMXzLhMGnojUBqcePGagIZBq00VxAq6BPV')
export default async function handler(req, res) {
if (req.method === 'POST') {
try {
const session = await stripe.checkout.sessions.create({
line_items: req.body.lineItems,
mode: 'payment',
payment_method_types: ['card'],
success_url: https://shopkart-app.vercel.app/cart/checkout-success,
cancel_url: https://shopkart-app.vercel.app/cart
})
return res.status(201).json(session)
} catch (error) {
return res.status(500).json(error)
}
}
}
rigid kestrel
Ok, and now what's the issue?
sand torrentBOT
sudden tangle
return {
price_data: {
currency: 'INR',
product_data: {
name: item.title,
images: [item?.thumbnail],
description: item?.description,
metadata: {
id: item?._id
}
},
unit_amount: item.price // because stripe interprets price in cents
},
quantity: item.quantity
}
})
there is one issue i am not getting right price so i tried to do item.price*80
but it doesnt work
celest estuary
the price should be an integer in cents
let's say you want to charge 10$ you need to pass in 1000
sudden tangle
show i like i want to show the corrrect price like item price is 1000 INr
so i am getting 10 so how i change this to 1000
celest estuary
you need to multiply by 100
sudden tangle
unit_amount: item.price * 100 doing this getting error
celest estuary
what's the error?
sudden tangle
axios error
celest estuary
would you mind sharing it
sudden tangle
AxiosError: Request failed with status code 500
celest estuary
yes what's the error message?
sudden tangle
code
:
"amount_too_large"
celest estuary
do you have the request ID?
sudden tangle
req_ADPMC0enni85vb
celest estuary
ok basically you are passing 30042900 as the unit_amount
and you're saying that there are 5 quantities of that price
that's why you're getting the error
sudden tangle
so any way to pass that amount
celest estuary
here you can look at the minimum and maximum charge amounts per currency https://stripe.com/docs/currencies#minimum-and-maximum-charge-amounts
sudden tangle
and one issue i am facing when domain changes like frontend domain is different than the api hosted domain showing cors
sudden tangle
ok
sand torrentBOT