recurly.js 无法为 Nuxt+vue.js 应用程序生成令牌答案

【问题标题】：recurly.js failed to generate token for Nuxt+vue.js applicaitonrecurly.js 无法为 Nuxt+vue.js 应用程序生成令牌
【发布时间】：2020-10-22 19:10:07
【问题描述】：

我的应用程序是基于 Vue.js 和 Nuxt 构建的。我正在尝试获取用于处理购买的令牌。但是，当我尝试获取令牌时，总是会出现以下错误。最糟糕的是官方https://developers.recurly.com/reference/recurly-js/#errors上没有错误代码。

我已经创建了示例纯 html 页面，我能够获取令牌，但不能使用 Nuxt (Vue) 应用程序。

在生成令牌时，我总是收到以下错误。

{
   "err": {
      "name": "elements-tokenization-not-possible",
      "code": "elements-tokenization-not-possible",
      "message": "No Element capable of tokenization was found in the given Elements group (). Please review documentation for a list of tokenizing Elements.",
      "found": []
   }
}

我创建了codesandbox.io作为参考，可以在https://rdh6t.sse.codesandbox.io/浏览

有人可以指导我在这里做错了什么吗？

文档： https://developers.recurly.com/reference/recurly-js/#getting-a-token

【问题讨论】：

标签： vue.js nuxt.js recurly

【解决方案1】：

发现多个问题

代码
验证表单元素

所呈现代码的主要问题是，创建了第二个元素用于提交，这与卡片元素附加的元素不同。

<template>
  <form ref="form" class="container" @submit.prevent="onSubmit">
    <v-container>
      <v-row>
        <v-col cols="12" md="4">
          <v-text-field
            v-model="firstname"
            data-recurly="first_name"
            :rules="nameRules"
            :counter="10"
            label="First name"
            required
          ></v-text-field>
        </v-col>

        <v-col cols="12" md="4">
          <v-text-field
            v-model="lastname"
            data-recurly="last_name"
            :rules="nameRules"
            :counter="10"
            label="Last name"
            required
          ></v-text-field>
        </v-col>

        <v-col cols="12" md="4">
          <div ref="recurly-card" class="recurly-card" data-recurly="card" />
        </v-col>
      </v-row>

      <!-- Recurly.js will update this field automatically -->
      <input type="hidden" name="recurly-token" data-recurly="token" />
      <input
        type="hidden"
        data-recurly="address1"
        name="address1"
        value="Opp GEB Office,"
      />
      <input type="hidden" data-recurly="city" name="city" value="Porbandar" />
      <input
        type="hidden"
        data-recurly="country"
        name="country"
        value="India"
      />
      <input
        type="hidden"
        data-recurly="postal_code"
        name="postal_code"
        value="360575"
      />
    </v-container>
    <v-btn color="success" class="mr-4" type="submit">Submit</v-btn>
    <section id="errors" class="errors"></section>
  </form>
  <!-- <v-form ref="form" v-model="valid" lazy-validation @submit.prevent="onSubmit">

  </v-form> -->
</template>

<script>
/* eslint-disable no-undef */

export default {
  data: () => ({
    valid: false,
    firstname: 'Kaushik',
    lastname: 'Thanki',
    nameRules: [
      (v) => !!v || 'Name is required',
      (v) => v.length <= 10 || 'Name must be less than 10 characters'
    ]
  }),
  mounted() {
    recurly.configure(process.env.VUE_APP_RECURLY_KEY)
    const elements = recurly.Elements()
    // eslint-disable-next-line no-unused-vars
    const card = elements.CardElement(this.$refs['recurly-card'])
  },
  methods: {
    onSubmit(e) {
      try {
        recurly.token(this.$refs.form, (err, token) => {
          if (err) {
            alert(`Token: ${err}`)
          }

          alert(`Token: ${token.id}`)
        })
      } catch (error) {
        alert(error)
      }
    }
  },
  head() {
    return {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://js.recurly.com/v4/recurly.css'
        }
      ],
      script: [
        {
          src: 'https://js.recurly.com/v4/recurly.js'
        }
      ]
    }
  }
}
</script>

【讨论】：