#nickagain - elements not mounted

1 messages · Page 1 of 1 (latest)

halcyon nimbus
# 
    this.payment = this.elements?.create('card');
    this.payment?.mount(this.cardInfo.nativeElement);
    this.stripe.confirmPayment({
      elements: this.elements!,
      confirmParams: undefined,
      redirect: 'if_required'
})```
night sequoia
#

This is what I have currently, correct. What do I have wrong or am missing? Thanks!

halcyon nimbus
#

Sorry just making sure I had it all in one place. Looking in to it and am not immediately seeing what is wrong

#

Looking further in to what this may be.

#

Ah confirmPayment is for the payment element but you are using the card element

#

The card element should use confirmCardPayment which takes in the card element itself

#

Can you try this if you want to use the payment element

    this.payment = this.elements?.create('payment');
    this.payment?.mount(this.cardInfo.nativeElement);
    this.stripe.confirmPayment({
      elements: this.elements!,
      confirmParams: undefined,
      redirect: 'if_required'
})```
Or this if you want to use the card element
```this.elements = stripe?.elements();
    this.payment = this.elements?.create('card');
    this.payment?.mount(this.cardInfo.nativeElement);
    this.stripe.confirmCardPayment({
      payment_method: {
        card: payment,
      }
})```
night sequoia
#

Thanks! I actually do want to use the payment method not the card method. But that leads me to my next question. Both the .create('payment') method and the .confirmCardPayment method require the clientSecret. And it is unclear where I obtain that. I thought that this was contained within the element? But can't seem to access it to pass it along.

halcyon nimbus
#

You create a payment intent on the server, that has the client secret, you send that to your client side and use that to mount the element

night sequoia
#

Ah, the flow works a little different than I thought it did. Thanks!