#jose-cardelement-react

1 messages · Page 1 of 1 (latest)

worn bridgeBOT
#

Hello! We'll be with you shortly. Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

dense prairie
#

Hi 👋

Do you have other elements loaded on the page?

sand wren
# 
      <Flex direction="col" space="sm" className="p-2 bg-blue-200 rounded-xl">
          <Flex
            direction="col"
            space="sm"
            className={clsx('p-2 border rounded-xl bg-white', {
              'border-borders-selected border': isCardNumberFocused,
            })}
          >
            <H4 variant={isCardNumberFocused ? 'primary' : 'disabled'}>Número de tarjeta</H4>
            <Flex className="box-border w-full " align="center">
              <CardNumberElement
                onFocus={() => setIsCardNumberFocused(true)}
                onBlur={() => setIsCardNumberFocused(false)}
                className={`w-full  `}
                options={cardElementOptions}
              />
            </Flex>
          </Flex>

          <Flex justify="between" space="sm">
            <Flex
              direction="col"
              space="sm"
              className={clsx('p-2 border rounded-xl w-full bg-white', {
                'border-borders-selected border': isCardExpiryFocused,
              })}
            >
              <H4 variant={isCardExpiryFocused ? 'primary' : 'disabled'}>Fecha de caducidad</H4>
              <CardExpiryElement
                onFocus={() => setIsCardExpiryFocused(true)}
                onBlur={() => setIsCardExpiryFocused(false)}
                options={cardCvcAndExpireElementOptions}
              />
            </Flex>
            <Flex
              direction="col"
              space="sm"
              className={clsx('p-2 border rounded-xl w-full bg-white', {
                'bo border': isCardCvcFocused,
              })}
            >
              <H4 variant={isCardCvcFocused ? 'primary' : 'disabled'}>CVC</H4>
              <CardCvcElement
                onFocus={() => setIsCardCvcFocused(true)}
                onBlur={() => setIsCardCvcFocused(false)}
                options={cardCvcAndExpireElementOptions}
              />
            </Flex>
          </Flex>
        </Flex>
#

CardNumberElement,CardExpiryElement,CardCvcElement

dense prairie
#

Okay so you are using the split card element?

sand wren
#

Yes, im not using PaymentElement

dense prairie
#

In that case you want to use confirmCardPayment()

#

IF you scroll to the bottom you can see all the JS they are using

sand wren
#

Sorry im not very experienced with javascript, thats why im struggling, i am a react developer

dense prairie
#

No worries

#

But in this case you are using a method that only accepts the Payment Element ( .confirmPayment) . Because you are using the Card Element you need to change how you are confirming the Payment Intent

sand wren
#

But there is not guide?

dense prairie
#

The Card Element is quite old and outdated so our current docs do not show how to use it. But the site I shared with you has the javascript and clearly shows you what methods you need to call and how.

sand wren
#

or the paymentElement can be fully customizable?

dense prairie
#

In your case you just need to change your confirm function to this

const {error, paymentIntent} = await stripe.confirmCardPayment(clientSecret, {
    payment_method: {
      card: cardNumberElement,
    }
  });
sand wren
#

one question

#

why each time i load the paymentElement, i get a incomplete payment on my stripe dashboard

dense prairie
#

Likely it is because you built your integration to create a new Payment Intent every time someone visits your Payment Element page. It remains incomplete unless you confirm it with the Payment Element

worn bridgeBOT
sand wren
#

is a way to prevent this?

dense prairie
sand wren
#

What i need to do, is to specify a tip, so the total is going to change

dense prairie
#

That would avoid this

fallen marlin
#

jose-cardelement-react

sand wren
#

this guide is wrong

#

Says i need to pass on confirmPayment the clientSecret, but it doesnt accept that

fallen marlin
#

that is about using PaymentElement though which you are not using right?

sand wren
#

I am using that

# 
    const { error } = await stripe.confirmPayment({
      elements,
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    })
fallen marlin
#

Sorry, that doesn't change anything. You can not call confirmPayment() if you are not using PaymentElement.
The guide you shared uses PaymentElement. If you don't, you can't use that guide.
That's what my colleague explained earlier

sand wren
#

Im using paymentelement

fallen marlin
# 
[9:47 AM]Snufkin_stripe: Okay so you are using the split card element?
[9:48 AM]JAC[Dev]: Yes, im not using PaymentElement```
#

you literally said the opposite earlier, did you change your mind or are you just trying a brand new integration? Just want to make sure I understand what's going on

sand wren
#

i change to paymentelement

fallen marlin
#

Okay, so what's the real issue? For now you said "the guide is wrong" with no real info.

sand wren
fallen marlin
#

yes