ectoflow/vue-stripe-elements

Stripe PaymentIntent

karimhossenbux opened this issue ยท 6 comments

First of all, thank you for this plugin!

Do you guys have any plan to implement or accept PR for the new PaymentIntent flow?
The repo looks not really maintained, and PR are just sitting there :/

Starting in September 2019, a new regulation called Strong Customer Authentication (SCA) will require businesses in Europe to request additional authentication for online payments. We recommend that all European businesses start building their Stripe integrations with either our PaymentIntents API or our new Checkout to be ready for these rule changes.

graux commented

+1
We need the mappings for createPaymentMethod and handleCardAction methods:
https://stripe.com/docs/payments/payment-intents/migration#api-version

Thanks!

I have a very hacky workaround when using the card element.

You need to put a ref on the card element:

<card :stripe="stripe.key"
:options="stripe.options" 
@change="complete = $event.complete"
ref="stripeCard />

And also import the instance object from the library

import { Card, instance } from "vue-stripe-elements-plus";

Then in the pay event you can do this:

let se = this.$refs.stripeCard.$refs.element;

const {paymentMethod, error} = await instance.createPaymentMethod('card', se._element);
if (error) {
  console.error("Stripe Payment Method Error", error);
} else {
  console.log(paymentMethod);
}

Then do what you need with the payment method

It does seem like it wouldn't be too difficult to add this in though

Thx for the share @eperegrine , it works great!

I had to change it to this for it to work for me.

let se = this.$refs.stripeCard.$refs.element; instance.createPaymentMethod('card', se._element).then((paymentMethod, error) => { if (error) { console.error("Stripe Payment Method Error", error); } else { console.log(paymentMethod); } });

Seems that one should be merged: #82

Folks, if you're willing to upgrade, it got much easier in new major version. Check readme for details