#aaroninbound
atomic gyro
pine ingot
Hi there, you need to wrap the component with the Elements provider so that you can get the reference to elements through useElements hook
pine ingot
is this element wrapped inside Elements provider ?
fringe flint
Yes. Can elements reference that component as well?
pine ingot
Yup, as long as it's wrapped inside Elements provider, you can use useElements hook to retrieve an instance of elements
fringe flint
I am not sure how it works internally. It is not referencing by id but the tag string?
{
payment_method: {
card: elements?.getElement(
CardNumberElement
) as StripeCardNumberElement,
},
}
This causes an error
pine ingot
What's the error? and show me the full code.
fringe flint
Conversion of type 'StripeAddressElement | null' to type 'StripeCardNumberElement' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Type 'StripeAddressElement' is not comparable to type 'StripeCardNumberElement'.
It thought the component is StripeAddressElement
It couldn't understand the CardNumberElement because it is rendered in a child component PaymentCheckoutForm
const { error, paymentIntent } = await stripe.confirmCardPayment(
result.order.payment.client_secret,
{
payment_method: {
card: elements?.getElement(
CardNumberElement
) as StripeCardNumberElement,
}
},
);
fringe flint
so I can just say elements.getElement('card') and it will find the correct element?
pine ingot
You are right
fringe flint
what does 'card' mean? It is a type name or a tag name?
pine ingot
That's the type of the element. https://stripe.com/docs/js/elements_object/create_element?type=card you can refer to this doc for the types that elements supports
fringe flint
Thanks. Because I am not following the pattern in the doc you mentioned to create the element, instead I just render the card element using <CardNumberElement>, <CardExpiryElement> etc. I am not sure if getting the element type would work.
pine ingot
Can you give it a try and let me know if there's any error?
fringe flint
Uncaught (in promise) IntegrationError: Invalid value for confirmCardPayment: payment_method.card should be an object or element. You specified: null.
pine ingot
So you get null from elements.getElement('card') ?
fringe flint
Yes I got null value
pine ingot
Try elements.getElement('cardNumber') ?