#jacko - payment element

1 messages · Page 1 of 1 (latest)

manic marlin
#

It should be the Elements instance from useElements which it does look like your code is doing

#

Trying to think of what this might be

#

Can you actually see the Payment Element on the page properly?

grim thunder
#

yes

#

when i use the test card token it throws this error

manic marlin
#

Have you tried printing out the elements variable that you are passing in to make sure that it is populated ? I'm wondering if you are setting it one place but for some reason the confirmSetup code is in a different context

grim thunder
#

Just did and here is what it looks like

#

is there anything i should be looking for to see if the elements is properly mounted

#

?

#

Are there any required params?

manic marlin
#

Thanks for checking, not immediately sure if there is some way that that object needs to look for this to work. I will see if I can recreate this error and get back to you

#

Can you send me the text of your elements code on this page?

#

I'll try to run it myself

grim thunder
#

yes i can

#

one second

manic marlin
#

Thank you

grim thunder
#

let me know if I can send anything else

merry flint
#

I suspect the issue here is that you're initialising your Stripe.js client and Elements provider in the same component that you're mounting the Payment Element

#

Generally you'd do that in a parent component

grim thunder
#

I am confused in this example they load both the stripe client and the elements provider in the same document

#

import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const SetupForm = () => {
const stripe = useStripe();
const elements = useElements();

const [errorMessage, setErrorMessage] = useState(null);

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

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

const {error} = await stripe.confirmSetup({
  //`Elements` instance that was used to create the Payment Element
  elements,
  confirmParams: {
    return_url: 'https://example.com/account/payments/setup-complete',
  };
});

if (error) {
  // This point will only be reached if there is an immediate error when
  // confirming the payment. Show error to your customer (for example, payment
  // details incomplete)
  setErrorMessage(error.message);
} else {
  // Your customer will be redirected to your `return_url`. For some payment
  // methods like iDEAL, your customer will be redirected to an intermediate
  // site first to authorize the payment, then redirected to the `return_url`.
}

};

return (
<form onSubmit={handleSubmit}>
<PaymentElement />
<button disabled={!stripe}>Submit</button>
{/* Show error message to your customers */}
{errorMessage && <div>{errorMessage}</div>}
</form>
)
};

export default SetupForm;

#

Am I misunderstanding the what the stripe client and elements provider are?

merry flint
#

I am confused in this example they load both the stripe client and the elements provider in the same document
That's fine and not the issue.
The issue is the useStripe and useElements hook in the same component

#

On the doc you linked, they're called in SetupForm.js component

#

Which the <Elements provider wraps:

 <Elements stripe={stripePromise} options={options}>
      <SetupForm />
    </Elements>
#

The code you originally shared contained everything in a single PaymentForm

dapper sparrow
#

@grim thunder did you figure it out?

grim thunder
#

thank you for asking @dapper sparrow but i cannot select the payment element now when I put it in a separate react.js file component

#

do you have any idea why this is happening?

dapper sparrow
#

not sure what that could mean unfortunately

#

Can you try and give a simple way to reproduce exactly what you're seeing? That would make things easier at this point

grim thunder
#

sure

#

here is my client code for the paymentform where I import the checkoutForm

#

the checkout form contains the payment element

#

trying to link the checkout form

dapper sparrow
#

you're just giving me code

#

I need a live page to see what's happening

grim thunder
#

ok

#

do you want a live hosted site?

#

i can send you a video of what's happing?

dapper sparrow
#

I can not do anything with a video

#

I'm a developer, I need to look at both your code and what's happening live to help you debug this

grim thunder
#

ok thank you

#

Ok it may take some time to deploy

#

is that ok?

viscid tusk
#

👋 I'm stepping in here as koopa needs to step away.

#

We'll be around all day so just let us know when you have a live site we can look at!

grim thunder
#

perfect thank you so much!

viscid tusk
#

Sure thing!