confirmCardSetup no longer available

[PaddyLock]

We used to be able to access strip api methods like this

import { handleCardSetup } from 'vue-stripe-elements-plus'

This is no longer possible as the methods are no passed through. How should we now call handleCardSetup or other stripe methods directly?

[dr808]

I'm not entirely sure if this is the best method but I did the following:

import { initStripe  } from 'vue-stripe-elements-plus'
[...]
handleConfirm({ commit, dispatch }, stripeResponse) {
   const stripeInstance = initStripe(stripeKey)

   try {
     let response = stripeInstance.handleCardPayment(
       stripeResponse.payment_intent_client_secret
     )
     dispatch('finalizeConfirm', response)
   } catch (e) {
     commit('SET_ERROR', e.response.data.error)
  }
}
[...]

Like I said, not entirely sure if it's the best way as I literally just tried it. But it works.

[softbeehive]

Hi @PaddyLock,

the reason it was possible to call handleCardSetup (deprecated method) is because a single stripe instance was created and some of its methods were exported in 0.x.x. Along the way it proved to cause a lot of issues especially given that Stripe.js API changes quite often and those had to be remapped. The solution is to access elements instance with all its props and methods.

In this case I assume you have a <StripeElements /> which actually exposes instance (source code)

// assuming ref 'elms' is added to StripeElements
const stripeInstance = this.$refs.elms.instance
// here you go
stripeInstance.confirmCardSetup(...)

@dr808 you got it pretty close, though I think creating new stripe instance each time you call .handleConfirm() is unnecessary, you can reuse stripe instance of <StripeElements />.

The very essence of 'vue-stripe-elements' is integrating Stripe.js into Vue component lifecyle. Accessing stripe instance properties and methods is a centerpiece of working with this module. Hope it helps!