#Daniel M - stripe checkout

1 messages · Page 1 of 1 (latest)

zealous pendant
#

Hi there. What are you ultimately trying to do with the id? Also, is the checkout session in subscription mode or payment mode?

opal quartz
#

I need to store the ID on our database

#

what do oyu mean by subsrciption mode or payment mode?

#

at the beginning when the page loads I´m creating the intent, and after that when you want to buy the product you get to this payment modal where you can pay.
The order than needs to be saved on the backend along with the name, the product and the payment ID

#

thats why i need the ID

zealous pendant
#

That's what I thought you were using

opal quartz
#

ooh naah, I integrated it manually into the page

zealous pendant
opal quartz
#

using node

zealous pendant
#

Above links still apply for node

opal quartz
#

I see, so the payment ID lives within the payment intent?

zealous pendant
#

Well what do you mean by "payment ID"?

#

I assumed you were referring to the payment intent

opal quartz
#

the last support I was writing to told me I should use the "payment id" instead of the client secret to identify a payment.
So payment intent and ID is the same?

zealous pendant
#

They meant to say payment intent id

#

So you would use the id of that payment intent to identify it

opal quartz
#

I see! So when you hit that Pay Now button you get redirected to the pending page fetching the payment status by using the payment intent id in the URL

#

is there a way to get the payment intent id once more before redirecting in the checkout component?

zealous pendant
#

The user could exit their browser

#

There's a number of ways they could disconnect, so webhooks is the best way to store payment data async

opal quartz
#

I see

#

so you shoueldnt fully rely on the intent ID in the URL

zealous pendant
#

Not fully. The customer's browser could crash and miss the redirect, etc

opal quartz
#

Makes sense... and what´s the difference between the id and client secret?

zealous pendant
#

Client secret is just used by the front end to communicate with stripe and initalize the Payment Element

#

The id uniquely identifies the payment intent

opal quartz
#

I see, sorry for the flooding of questions, I´m not really used to backend development, but when I want to use those webhooks, do I have to put in my localhost:port in the endpoint URL? 😅

#

nvm, that´s not even possible whoops

zealous pendant
opal quartz
#

does it matter in which directory (frontend backend) im using that command?

zealous pendant
#

Which one

#

Stripe listen?

#

That doesn't matter

opal quartz
#

thanks!

zealous pendant
#

Np

opal quartz
#

is it a bad idea to store the client secret in redux store? Security wise or so?

zealous pendant
#

I'm not familiar with Redux

#

But we recommend storing client secret in environment variables

#

Never in the code

#

But beyond that, we can't recommend too much

#

I don't know how you secure your server, etc.

#

That's on you guys

opal quartz
#

okay, but there still must be an easier way, something like a react hook or use the stripe object inside your elements provider, which you can use to get the current payment intent object isnt there?

zealous pendant
#

Oh which client secret are you referring to

#

Oh you're talking about the PI client secret

#

That's fine to store anywhere

#

isn't sensitive

#

My bad

opal quartz
# 
/**--------------------Stripe Imports---------------------**/
import { useState, useContext } from 'react';
import {
  PaymentElement,
  useStripe,
  useElements
} from '@stripe/react-stripe-js';
import './StripeCheckout.css';
/**--------------------Stripe Imports end---------------------**/

....


const StripeCheckout = ({ auditInfo, personalInfos }: CheckoutFormProps) => {
  const stripe = useStripe();
  const elements = useElements();


  ....

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js has not yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    setIsLoading(true);

    await createPdfAudit(
      detectedIssues,
      editorRef,
      auditInfo,
      changeLoadingStatus
    ).then(async (data) => {
      const formData = createBlobData(data);
      for (const key in personalInfos) {
        formData.append(key, personalInfos[key as keyof PersonalInfosType]);
      }

      // send data to the choosen payment gateway
      await axios
        .post(process.env.REACT_APP_SERVER_API + '/payment/cash', formData, <<<<PAYMENT_INTENT GOES HERE>>>>>)
        .then(async (res) => {
          const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: {
              // Make sure to change this to your payment completion page
              return_url: `${process.env.REACT_APP_WEBSITE_DOMAIN}/createAudit/${res.data.filename}`
            }
          });
          ......
  };

  return (
    jsx goes here......
  );
};

export default StripeCheckout;
#

see the axios post?

#

there I need to send the payment_intent (pi_42oiug234o...)

#

and I dont think I actually need a webhook for that or?

#

I mean I created that payment intent at the root level of my page

# 
 <>
      <StripeProvider>. <----- in there is the client secret 
        <Routes>
          <Route element={<AnimationLayout />}>
            <Route path="/audit" element={<Audit />} /> <------ which i need way down in that route, or to be more specific, i need the "payment_intent=pi_3L2cHQLkVu8CqnKe3K7fGXdR" or so, which also is send on redirect in the url but i need it one step earlier BEFORE the redirect... 
            <Route
              path="/createAudit/:filename"
              element={<CheckingPayment />}
            />
            <Route path="/smartx" element={<TokenSelection />} />
            <Route path="/faq" element={<FAQ />} />
            <Route path="/support" element={<Support />} />
            <Route path="/terms" element={<Terms />} />
            <Route path="/policy" element={<Policy />} />
            <Route path="/about" element={<About />} />
            <Route path="/" element={<Navigate to="/audit" replace />} />
          </Route>
        </Routes>
      </StripeProvider>
      <LoadingSpinner loading={isLoading} status={loadingMessage} />
    </>```
zealous pendant
#

What are you trying to do in this code

#

Like what step is this

#

Sorry juggling many threads it's a bit hard to dig and infer context

opal quartz
#

all good, greatful for any help!

  1. Create the payment intend at the root level of my react app -> see the code above with my routes, which are wrapped with the StripeProvider component (In there is the <Elements> provider.
  2. In the audit rout, the visitor can buy a product
  3. The second he clicks on Submit in my integrated checkout component (this one: https://stripe.com/docs/payments/accept-a-payment?ui=elements&html-or-react=react) before the page redirect, I need to get the id from the payment intent object to send it to the backend.
    Before the redirect, not after
#

and I´m looking for something like ```js
{ id } = await stripe.getPaymentIntent()

#

all i need

zealous pendant
#

Gotcha yeah I would avoid relying on redirects like I mentioned before

#

Too many things could happen

#

Browser crashes, network connectivity issues, etc.

#

Webhooks are the route we strongly recommend

opal quartz
#

but I really have to create a webhook, only to get the payment intent?

zealous pendant
#

Fulfillment should be handled in a webhook

#

You don't have to

opal quartz
#

what is the alternative route?

zealous pendant
#

I'm just saying relying on the redirect isn't safe

#

You can do what you're trying to do but you may face issues

opal quartz
#

a way beneath after redirect and webhooks

#

await stripe.getPaymentIntent()

#

so that method exists?

zealous pendant
#

Up to you what you want to do ultimately. I'm just saying that relying on redirects to store data on the backend isn't a robust practice

opal quartz
opal quartz