Need Help! Trying to implement Square web sdk on a Vue.js app!

Hello, I am Zakir from Bangladesh. I am working on a vue.js application where I am trying to implement sqare web sdk. I am having difficulties calling card.tokenize() method.

I initialized the card by calling a method from mounted hook. I want to tokenized the card when submitting the form but I don’t have a clue how to call the card.tokenize() method since I don’t have card property.

Can anybody help here? Who has a similar experience?

:wave: You can put the card instance you’ve create in the mounted hook into the component’s local state.

data() {
    return {
        cardInstance: undefined
async mounted() {
    const payments = await Square.payments(...);
    this.cardInstance = await payments.card();
methods() {
    async payNowClick() {
        const token = await this.cardInstance.tokenize();

If you have the payment button in a separate component, you could have the button emit an event that this component listens to. Or you could use a state management library like VueX to house the cardInstance and model all the interactions with it via actions. :slightly_smiling_face: