#Himanshu-CardElement
wet robin
@slate badge Here is the URL for the Staging environment
"https://registration.staging-env.shoptalkeurope.com/form?token=fJacF%2FY8p2YJiWfX4SYWTKQtZgtAoCxzr46jHYFC9zNQxTUjTFbjm0L9KPzRdm9jpppjp0wij0bOf5jRmxuRGw%3D%3D" just click Continue button you will able to see the payment screen.
slate badge
Thanks, in paymentCard.js. I don't see an enclosing <Elements> outside the CardElement, is the <Elements> in another file?
wet robin
@jade matrix Yes, It is in the Index.js file, PFA file path below if you are using chrome debugger
Src>AppBox>reg>pages>payment>index.js
{staticData &&
staticData.activeGateway &&
staticData.activeGateway.includes("STRIPE") && (
<Elements stripe={stripePromise} options={options}>
<PaymentCard
getConfrimationDetails={getConfrimationDetails}
getCientSecret={getCientSecret}
clientSecret={clientSecret}
/>
</Elements>
)}
slate badge
Thanks, do you happen to have more than one <CardElement> in your application?
wet robin
@slate badge No, There is single <CardElement id="payment-element" options={{ hidePostalCode: true }} />
which is in PaymentCard.js and The same was working on PRODUCTION ENV and Staging ENV as well, but suddenly not working.
slate badge
That's very strange. Did you rotate the key recently?
wet robin
@slate badge Earlier Public Key was Hardcoded and Now are getting it dynamically in the index.js file based on Environment.
Here is the code snippet for the same
const paymentkeys = getPaymentKey()
const stripePromise = loadStripe(paymentkeys);
slate badge
can you check if getPaymentKey() returns the correct publishable key?
wet robin
Yes, we are getting the correct PublickKey. @slate badge
slate badge
I noticed that the elements array is empty, can you run your app in debug mode and use the React DevTools (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) to inspect the Components and make sure the <CardElement> is wrapped inside the <Elements> ?
wet robin
Okay, But we haven't changed anything and it was working fine before? How this can happen?
ivory pumice
Just catching up here as @slate badge has stepped away for the day
Do you manage to debug this any further?
wet robin
Yes, we are getting the same, but I am not able to figure out why this happening for the Staging and Prod environment. It is working as expected on Local Environment.
@ivory pumice @slate badge Let me know if you need anything more from my side
ivory pumice
Thanks, I imagine this will require some more investigation from our team. It's a little in-depth for Discord
Taking a quick look
One thing that stands out to me is: card: elements.getElement(CardElement)
With React, you generally only need: card: cardElement
ivory pumice
Let me know if that helps. Otherwise I'd recommend writing in to our team so we can spend some more time investigating this for you: https://support.stripe.com/contact