Support for Payment Methods API

[1hakr]

Any plans on supporting Payment Methods API which is now the recommended way and also support 3D Secure option?

https://stripe.com/docs/payments/payment-intents/migration/automatic-confirmation

[Wazabiii]

Hi!
In fact you can use the payment API with 3D Secure:

1. Charge a customer with a payment intent
   => you receive an object with 'client_secret'

2. Use v-stripe-card:

    <v-stripe-card
      v-model="token"
      :api-key="apiKey"
      create="token"
    ></v-stripe-card>

3. You receive a token and use confirmCardPayment to attach your customer payment intent and the card. You can save the card for future payment with save_payment_method: true

stripe.confirmCardPayment(
  '**client_secret**',
  {
    payment_method: {
      card: {
        token: this.token.id
      }
    },
    save_payment_method: false
  }
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

I hope this will help ;)

[1hakr]

Thanks @Wazabiii , i dont want to use tokens as they will be deprecated soon. I ended up cloning it and adding the functionality.

[Wazabiii]

Yes you're right!
As an other workaround if you don't wan't to use token (even if a token is created behind during the process):

1. Use a ref

    <v-stripe-card
      v-model="token"
      :api-key="apiKey"
      ref="stripeCard"
    ></v-stripe-card>

2. Use the Stripe instance of the component to securely accept the payment (according to the Stripe documentation: https://stripe.com/docs/payments/accept-a-payment#web-submit-payment)

      this.$refs.stripeCard.stripe
        .confirmCardPayment('**client_secret**', {
          payment_method: {
            card: this.$refs.stripeCard.card
          },
          save_payment_method: false
        })
        .then(function(result) {
          if (result.error) {
            console.error(result.error.message);
          }
        });

@morphatic do you have specific rules for PR to implement this features in the prop "create"?

Maybe it could be the value create="card" ?
And I think this option should only return the card object and the Stripe instance (without using confirmCardPayment inside the processCard() function)
Maybe like this?:

    if (this.create === 'card') {
        this.$emit('input', {
            card: this.card,
            stripe: this.stripe
        });
    }