#Eyepatch_128 - Update Payment Intent

1 messages · Page 1 of 1 (latest)

lilac loom
#

Hi 👋

wind dawn
#

Hi, thanks for helping

lilac loom
#

I'm not familiar with commerce.js integrations. How do you instantiate Stripe.js?

wind dawn
#

First of all I have this: const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY); outside the parent react component

#

then I create the paymentintent

useEffect(() => {

    if(stepPayment){
      fetch("/api/create-payment-intent", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ live }),
      })
        .then((res) => res.json())
        .then((data) => {
          if(data.error){
            setError(data.error);
          }else{
            setClientSecret(data.clientSecret)
            setError("");
          }
        });
    }

  }, [token, live, stepPayment]);
#

Note: live is commerce result object and stepPayment is a variable to track which form to show (customer info, or payment)

# 
const appearance = {
    theme: 'stripe',
  };
  const options = {
    clientSecret,
    appearance,
  };
lilac loom
#

Okay hold on here a sec

#

I think the error message is correct in this case

wind dawn
#

Okay

#

and i forgot one thing

lilac loom
#

Because updatePaymentIntent is not a function in the Stripe.js public docs

wind dawn
#

Oh

lilac loom
#

The first value (before the ;) is the API version. The text after the ; is the beta flag

#

Also there is an array passed in as the betas argument. I suspect both are needed

wind dawn
#

Ohhhhh

#

I didn't see that

#

my bad

#

but what are those?

lilac loom
#

Those are pretty easy to skip in all fairness

#

This flow is in publc Beta.

#

It is intended for testing and building out potential future developments.

#

These flags are required to expose Beta features

wind dawn
#

I see

#

I'm only practicing now but is this safe in production?

#

I'm quite new to stripe and ecomm dev

lilac loom
#

If you want access to this feature you'll need to contact Stripe using the link near the top of the page with this text:
This feature is in beta. For early access, contact us.

#

That way you can get all the information regarding this specific beta feature

wind dawn
#

Alright thanks.

#

Can I ask another question without opening another thread?

lilac loom
#

Sure

wind dawn
#

Thanks

#

So in commerce.js stripe guide :
they have this:

// When mounting the Stripe elements form to your page, you should have a line like this which provides a card element
const card = elements.create('card')

// ... Integrate Elements onto your page, and other fields required for capturing a checkout with Commerce.js.

// Create a function that can be called when a "complete order" button is clicked
async function captureOrder() {
// Create a payment method using the card element on the page
  const paymentMethodResponse = await stripe.createPaymentMethod({ type: 'card', card });
....

Then they carried on with commerce.js methods

#

Now I would like to know if there is a way to get paymentMethodResponse from paymentElement

lilac loom
#

paymentMethodResponse in this case is the response from the Stripe API that creates PaymentMethod objects.

wind dawn
#

okay

#

can I use it with paymentElement?

#

I just got this idea now, but if I pass paymentElement as card. would it work?

lilac loom
#

But what are you trying to accomplish?

#

I know it's a lot of docs but I want to make sure you get the right references.

wind dawn
#

Thanks,
Yes it's really a lot. but gotta read them lol
However I don't think it is a setup intent because I'm at a checkout, so I am not sure.

lilac loom
wind dawn
#

Yes thank you