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?
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();
this.cardInstance.attach('#card-container');
},
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. 