#sajid_checkout-redirect
fathom grottoBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1286409797025009684
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- sajid_subscription-customprice, 20 hours ago, 19 messages
arctic dirgeBOT
digital carbon
waiting for response
hexed vortex
Hi there! Thanks for waiting
Here's where we discuss what to do at this stage: https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=embedded-form&lang=node#return-page
have you tried following the guide? If yes, what is going wrong? What specific issue are you facing?
digital carbon
I am facing issue like i dont know what to send in return url so i can know wether my payment succeed or failded. as embeded ui mode doesn't suuport success url
can i show you my code?
hexed vortex
Yes, please!
digital carbon
Checkout page:
import React, { useState } from "react";
import { EmbeddedCheckoutProvider, EmbeddedCheckout } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import PaymentSuccessModal from "Modals/PaymentSuccessModal/PaymentSuccessModal";
const stripePromise = loadStripe("pk_test_51Oh0tgF6Gkk6c638flTLOJlT79V1F0aPz3d89neY9x54VqcrOPj4OOqX98dFIlvAabt2wkxFsFkrouAYWVoa4XsW00A9skuqLe");
const Checkout = ({ options }) => {
const [paymentSuccess, setPaymentSuccess] = useState(false);
const [message, setMessage] = useState("");
// Simulate a function that handles the checkout completion
const handleCheckoutCompletion = async (event) => {
// Check for payment status after session completion (e.g., from webhook or client confirmation)
const paymentStatus = "success"; // You can replace this with real payment status logic.
if (paymentStatus === "success") {
console.log("Payment successful")
setPaymentSuccess(true);
setMessage("Your payment has been successfully processed.");
}
};
return (
<div id="checkout">
<EmbeddedCheckoutProvider stripe={stripePromise} options={options}>
<EmbeddedCheckout onComplete={handleCheckoutCompletion} /> {/* Listen for completion */}
</EmbeddedCheckoutProvider>
{/* Conditionally render the PaymentSuccessModal */}
{paymentSuccess && (
<PaymentSuccessModal
paymentSuccess={paymentSuccess}
success="Continue"
onClose={() => setPaymentSuccess(false)} // Close the modal
message={message}
route="/your-next-route" // Pass the route if needed
/>
)}
</div>
);
};
export default Checkout;
backend creating session:
const session = await stripe.checkout.sessions.create({
payment_method_types: ["card", "us_bank_account"], // tenant will pay from the card or us_bank_account
mode: "payment",
ui_mode: "embedded",
customer, // customer id
line_items: lineItems,
discounts: couponId ? [{ coupon: couponId }] : undefined, // Replace couponId with your variable
payment_intent_data: {
application_fee_amount: 123, // charge to transfer the amount this will be paid to spade
transfer_data: {
destination: stripeConnectedAccountId, // landlord stripe connected account_id
},
},
// description: `Paying for Invoice ID: ${invoiceNo}`, // Custom description that appears in the payment details
return_url: `${process.env.LOCAL_SERVER_URL}/api/stripe/checkoutAndTransferSuccess?invoiceId=${invoiceNo}&returnUrl=${returnUrl}`,
// success: `${process.env.LOCAL_FRONTEND_URL}/checkout?invoiceId=${invoiceNo}&returnUrl=${returnUrl}`, // Redirect URL on success
});
looking at what you've provided for your url, it looks like you may be pointing to an endpoint on your server. The return url is meant to be the url of a frontend page that your customer is sent to after the payment attempt.
Can you help me understand whether you're trying to figure out how to send a customer to a page on the frontend after payment or if you're trying to trigger order fulfillment or some backend process?
digital carbon
If i will redirect to frontend how can i know the status of payment?
wether it is complete, cancelled , failed or pending etc. so i can show my user information accordingly.
hexed vortex
Okay, so you want to include the Checkout Session ID as a template variable in the return url (Step 1 in the guide), and then when you render the return page, you'll use the id in the URL to retrieve the Checkout Session and look at its status property to understand whether payment was successful or not
here's the guide I mentioned: https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=embedded-form&lang=node#create-checkout-session
and here's the API reference for the Checkout Session object:
https://docs.stripe.com/api/checkout/sessions/object#checkout_session_object-status
and then you can proceed according to the status
fathom grottoBOT
severe vessel
sajid_checkout-redirect
severe vessel
👋 taking over! I'm a bit confused by the advice you got. It's totally normal to redirect to your server and do whatever you need there
yes you can use webhooks for this if you want. It's important to do this in case your customer closes their browser after paying but before being redirected.
But if someone is redirected, you can then check the status of their Checkout Session in the API and then handle success
digital carbon
so webhook is robust solution, right?
severe vessel
yes