vue-stripe-elements-plusで複数の<card>を使うとエラーになる問題の解決方法

背景

1. vueでstripeのカード入力UIを表示するために、vue-stripe-elements-plus を使っていた。
2. 一つの画面で複数のカード入力UIを表示するとエラーになるので治したい

結論

https://github.com/fromatob/vue-stripe-elements
の代わりに
https://github.com/Cl3MM/vue-stripe-better-elements
を使うと良い。

注意

<card>タグの代わりに<stripe-element type="card">タグを使う必要がある。

オリジナルでは以下のように<card>タグが定義されている。vue-stripe-better-elementsではこれが無いので、<stripe-element type="card">と書く必要がある。

createTokenの代わりに(stripe-elementのvueインスタンス).elements.createTokenを使う必要がある

stripe-elementのvueインスタンスは以下のようになっている。
elements配下にcreateToken関数があるらしい。

Each component looks like this:
{
type: 'card', // element type (card, iban...)
key: 'pk_test_xxxx', // the stripe key used for this component,
element: {/../}, // the stripe element created by the Stripe library,
elements: {/../}, // the stripe elements created by the Stripe library,
createToken: fn, // the element's createToken function
createSource: fn, // the element's createSource function
retrieveSource: fn // the element's retrieveSource function
}
https://github.com/Cl3MM/vue-stripe-better-elements#what-you-get-for-free

解説

Moreover vue-stripe-elements, prevents you from using multiple components on the same page, as there is only one instance of the createToken and createSource methods needed to further process payment.
https://github.com/Cl3MM/vue-stripe-better-elements#why