recurly.js未能为Nuxt+vue.js应用程序生成令牌

Question

我的应用程序构建在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

Answer 1

发现多个问题

1. 代码
2. Vutify表单元素

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

<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>