createPaymentMethod is not working.

[smarttvdev]

I am using multiple elements. When i create createToken, it is working well. But if i try with createPaymentMethod like as createToken, it is giving error.

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

onSubmit(){ createPaymentMethod() .then( data=>{ console.log(data) }, error=>{ console.log(error); } ) }

it is giving error:

vendor.js:112680 [Vue warn]: Error in v-on handler: "TypeError: Object(...) is not a function"

[PabloGBarcelo]

Invalid value for createPaymentMethod: value should be object. Need to attach object like: createPaymentMethod({ type: 'card', card: cardElement, (obtained from createToken()) billing_details: { name: 'Jenny Rosen', }, })

[mastashake08]

I also have the same issue

[smarttvdev]

I could fix that. You can use token in createPaymentMethod. So, first get token, and create payment method by using that token.

[corbin88]

@BaiMaoLi, how?

[MarceauKa]

@corbin88

First:

createToken({
    name: this.name
}).then(data => {
    this.card = data.token.card
})

Then:

// where this.card.id is the token
createPaymentMethod('card', this.card.id).then(data => {
    // data is your paymentMethod object
})

[LeCoupa]

Does it work when you set the name of the card like this? It does not seem to be saved by Stripe with the 424242**** test card on my side. Can you confirm it is working for you?

[MarceauKa]

@LeCoupa You're right, this works:

createPaymentMethod('card', {
    card: this.card.id, // token from createToken (without any params)
    billing_details: {
        name: this.name, // cardholder name
        address: { // address fetched from algolia places
            line1: this.address.name,
            country: this.address.country,
            city: this.address.city,
            postal_code: this.address.post,
        },
    }
)

[LeCoupa]

@MarceauKa Thank you it is now working.

        const { token } = await createToken()

          const { paymentMethod } = await createPaymentMethod('card', {
            card: token.card.id,
            billing_details: {
              name: this.form.fullName,
              email: this.user.email
            }
          })

[jahid56]

I could not find it working, Here is my code `createToken({

name : this.name,

street_line1 : this.street,

street_country : this.selectedCountry,

street_zip : this.postalCode

}).then((data) => {

createPaymentMethod('card', {

    card: data.token.card.id, // token from createToken (without any params)

    billing_details: {
        name: this.name, // cardholder name
        email: this.email,
        address: { // address fetched from algolia places
            line1: this.street,
            country: this.selectedCountry,
            city: this.city,
            postal_code: this.postalCode,
        },
    }
}) 

})
` But it throws error

TypeError: Object(...) is not a function

I don't get where the problem. If you find any Please Help, Thanks in advance.

[LeCoupa]

@BaiMaoLi you should create a thread on StackOverflow for this kind of issue. :)

You are trying to call an object which is not a function. Check if your import is correct for createPaymentMethod.

[jahid56]

I am using

import { Card, createToken, createPaymentMethod } from 'vue-stripe-elements-plus';

I am getting this according to documentation. What did I miss?

[shaunthambyah]

For anyone struggling with this, this example might be helpful (this is vue based but you get the idea). Passing those params to createPaymentMethod is a little different to how I interpreted the documentation.

pay() {
  createToken().then(data => {
    if ("error" in data) {
      // handle any errors
      this.stripeErr = data.error.message;
    }
    if ("token" in data) {
      // we've received a token, use the card id to create a payment intent
      createPaymentMethod('card', {
        card: data.token.card.id,
        billing_details: {
          email: this.email
          // you could add more here according to the stripe docs
        }
      }).then(data => {
        if ("error" in data) {
          // handle any create payment intent errors
          this.stripeErr = data.error.message;
        }
        if ("paymentMethod" in data) {
          // we've received a payment intent in data
          // continue with the rest of your charge
        }
      });
    }
  });
}

[pokerclubtools]

@jahid56 I ran into the same problem and realized that it was because I was on an old version of the vue-stripe-elements-plus package. Try yarn upgrade vue-stripe-elements-plus.