如何返回Stripe.createToken生成的tokenId并在vuex的action中使用

• Stripe.card.createToken 原生为回调风格API，不返回Promise对象，直接使用await无法获取返回结果，解构得到的data自然为undefined。
• 命名冲突：Vuex的action命名和导入的API方法stripeToken完全重名，函数作用域内会优先访问当前action本身，相当于递归调用了无返回值的函数，最终拿到undefined。
• 传参结构错误：调用Stripe.card.createToken时不需要把卡片信息再套一层{cardInfo}，Stripe要求直接传入包含卡号、有效期、cvc的卡片信息对象。
• 取值字段错误：Stripe返回的token标识字段为id，不存在tokenId字段。

改造api.js #

// api.js
export const stripeToken = ({ cardInfo }) => {
  // 手动将回调API包装为Promise
  return new Promise((resolve, reject) => {
    Stripe.card.createToken(cardInfo, (status, response) => {
      if (response.error) {
        reject(response.error)
      } else {
        resolve(response)
      }
    })
  })
}

修正Vuex action #

// vuex
import { stripeToken } from '@src/store/api';
// 重命名action避免和导入的API方法冲突
async getStripeToken({ dispatch }, { cardInfo }) {
  try {
    // 直接获取返回结果，无需再次解构data
    const tokenRes = await stripeToken({ cardInfo });
    console.log('tokenId: ', tokenRes.id);
    // 可按需commit mutation将token存入state
  } catch (err) {
    // 处理卡片校验、接口报错等异常
    console.error('获取Stripe token失败', err)
  }
},

内容的提问来源于stack exchange，提问作者seyet