riya-p_api | Stripe Developers | Page 1

dreamy pewterBOT Sep 24, 2024, 12:08 PM

#

👋 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/1288109898428579942

📝 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.

riya-p_api, 6 days ago, 7 messages

#

stark mason Sep 24, 2024, 12:09 PM

#

hi there!

compact dawn Sep 24, 2024, 12:09 PM

#

Hello @stark mason , I have the confusion about what to do further in the requirements as I have described above.

stark mason Sep 24, 2024, 12:10 PM

#

if you just want a buy button, have you looked into the Express Checkout Elemet? https://docs.stripe.com/elements/express-checkout-element

compact dawn Sep 24, 2024, 12:11 PM

#

No, I have added the Payment Element as per my project requirement, and have added the pay button below it. What I want to do is pay via that button press.

stark mason Sep 24, 2024, 12:12 PM

#

got it. have you read this doc that explains how to use the Payment Element in React? https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=elements&client=react#web-submit-payment

compact dawn Sep 24, 2024, 12:15 PM

#

Yes, I have added that code as explained.

#

and handleSubmit function too, but what are the backend requirements for the whole payment flow?

stark mason Sep 24, 2024, 12:18 PM

#

what do you mean?

create the PaymentIntent on the backend and send the client_secret to the frontend
mount the Payment Element on the frontend
confirm the PaymentIntent on the frontend
and... that's it. then you can use webhook event to be notified when the payment is successful. all of this is explained in the link I shared above.

compact dawn Sep 24, 2024, 12:23 PM

#

I have only done the,
Collect Payment Details Part on front-end side

stark mason Sep 24, 2024, 12:25 PM

#

next you need to confirm the PaymentIntent on the frontend

compact dawn Sep 24, 2024, 12:25 PM

#

and CheckoutForm part of Submit the payment to Stripe

#

Here is my code:

📎 message.txt

#

Is this correct?

stark mason Sep 24, 2024, 12:26 PM

#

we are not able to review code here. is it working? if not, what's the error message?

compact dawn Sep 24, 2024, 12:28 PM

#

okay, Sorry..😬

#

Um, like I have added the front-end side code of Collect Payment Details Part and CheckoutForm part of Submit the payment to Stripe on the front-end side from the above link you sent.

#

I don't know about the backend side

compact dawn Sep 24, 2024, 12:30 PM

#

stark mason next you need to confirm the PaymentIntent on the frontend

How can i do so?

#

Where I have to add this code?

stark mason Sep 24, 2024, 12:33 PM

#

once you confirm the PaymentIntent, the user will be redirected to the return_url you set. that code you shared should be on the return_url page to retrieve the information about the PaymentIntent, if needed.

#

but to test your integration you don't really need this code. you could just display "hello world" on your return_url for now.

compact dawn Sep 24, 2024, 12:35 PM

#

okay, it means that the code displayed in the image I have shared is optional, right?

stark mason Sep 24, 2024, 12:37 PM

#

correct

compact dawn Sep 24, 2024, 12:38 PM

#

Okaie, understood.

#

only, I have to add the client_secret to confirm the PaymentIntent or inside the stripe.confirmPayment on the frontend side, right?

stark mason Sep 24, 2024, 12:41 PM

#

I don't understand. when the user submit the payment form, you need to call stripe.confirmPayment like this:

compact dawn Sep 24, 2024, 12:42 PM

#

yes, I have added the code for handleSubmit.

#

and , I have to ask that i have to add client_secret too inside the stripe.confirmPayment method?

#

and after that, It will give the paymentIntent Status.

stark mason Sep 24, 2024, 12:46 PM

#

and , I have to ask that i have to add client_secret too inside the stripe.confirmPayment method?
why don't you use the code in the link I shared? you can see it in the image above, and there's no client_secret there.

compact dawn Sep 24, 2024, 12:48 PM

#

I have used that code from the link you have shared.

#

and as fill the Payment Element fields, and submit the form, I'm getting this error:
You must pass in a clientSecret when calling stripe.confirmPayment().IntegrationError: You must pass in a clientSecret when calling stripe.confirmPayment().

stark mason Sep 24, 2024, 12:51 PM

#

can you share your confirmPayment() code?

compact dawn Sep 24, 2024, 12:51 PM

#

yes

#

dreamy pewterBOT Sep 24, 2024, 12:57 PM

#

stark mason Sep 24, 2024, 12:58 PM

#

can you console.log the elements object?

compact dawn Sep 24, 2024, 12:59 PM

#

yes

#

could not copy the log from the console.

#

here is the screenshot

#

Hi, @wide citrus

#

can you catch up with me here for help, please?

#

hello...

wide citrus Sep 24, 2024, 1:12 PM

#

Yep, just catching up on everyone now

compact dawn Sep 24, 2024, 1:12 PM

#

sorry

wide citrus Sep 24, 2024, 1:16 PM

#

It looks like you code is mixing two patterns: intent-first and deferred intent

#

The confirmPayment pattern your showed matches the intent-first pattern, because it assume elements already has a clientSecret to use.

#

However, your initialization pattern looks like deferred intent:

const options: StripeElementsOptions = {
    // passing the stripe elements options
    mode: 'payment',
    amount: 1099,
    currency: 'eur',
    // Fully customizable with appearance API.
    appearance: {
      theme: 'flat',
      labels: 'floating',
      variables: {
        colorPrimary: '#0A74DA',
        colorBackground: '#F4F4F5',
        colorText: '#333',
      },
    },
  };

this sets up elements to collect details but leaves payment intent creation for later, during the "pay" handler

compact dawn Sep 24, 2024, 1:18 PM

#

could not understand

wide citrus Sep 24, 2024, 1:19 PM

#

It seems like you put pieces together from two different guides, and the pieces don't match. That's why you get the error: You must pass in a clientSecret when calling stripe.confirmPayment().IntegrationError: You must pass in a clientSecret when calling stripe.confirmPayment().
because you initialized elements without a client secret, and you're also not providing one at confirm time.

#

Which pattern do you want to use? There are at least two possible corrections here.

#

Do you want to create the payment intent up front, or only when you customer hits the pay button?

compact dawn Sep 24, 2024, 1:20 PM

#

which one is recommended to use?

wide citrus Sep 24, 2024, 1:20 PM

#

I suggest the latter (defer intent creation) but its up to you

compact dawn Sep 24, 2024, 1:20 PM

#

yes, i'll do that one you said

wide citrus Sep 24, 2024, 1:22 PM

#

Ok, then you need to review your handlePayment method to match the pattern here:
https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=payment&client=react#submit-the-payment

You need to:
1/ Use elements.submit()
2/ Call your server back end to get a payment intent ( the client secret)
3/ Adjust your confirmPayment call to add that clientSecret

Collect payment details before creating an Intent

Build an integration where you can render the Payment Element prior to creating a PaymentIntent or SetupIntent.

compact dawn Sep 24, 2024, 1:23 PM

#

okaie, Thank you very much for help.

#

Added the code, but having issue as the code is in .ts file

wide citrus Sep 24, 2024, 1:30 PM

#

You can ingore any type issue temporarily to get things running

compact dawn Sep 24, 2024, 1:30 PM

#

okay

#

    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    if (!stripe) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    setLoading(true);

    // Trigger form validation and wallet collection
    const {error: submitError} = await elements.submit();
    if (submitError) {
      handleError(submitError);
      return;
    }

    // Create the PaymentIntent and obtain clientSecret
    const res = await fetch("/create-intent", {
      method: "POST",
    });

    const {client_secret: clientSecret} = await res.json();

    // Confirm the PaymentIntent using the details collected by the Payment Element
    const {error} = await stripe.confirmPayment({
      elements,
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point is only reached if there's an immediate error when
      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
      handleError(error);
    } else {
      // Your customer is redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer is redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };```
I have added this function, and which API do I have to call here?

wide citrus Sep 24, 2024, 1:49 PM

#

What do you mean?

#

 const res = await fetch("/create-intent", {
      method: "POST",
    });

#

this part is a call to your own back end

wide citrus Sep 24, 2024, 1:50 PM

#

wide citrus Ok, then you need to review your `handlePayment` method to match the pattern her...

in this doc, take a look at the preivous step 4

#

you need to implement your back end to create a payment intent and return the client secret to your front end

#riya-p_api