recurly.js failed to generate token for Nuxt+vue.js applicaiton

Question

My application is built upon Vue.js & Nuxt. I am trying to get token for processing purchase. However I am always getting following error when I try to get token. The worst part is the error code is not available on Official https://developers.recurly.com/reference/recurly-js/#errors.

I have created sample pure html page & I am able to get the token but not using the Nuxt (Vue) application.

On token generation I always receive below error.

{
   "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": []
   }
}

For reference I have created codesandbox.io & can be browse at https://rdh6t.sse.codesandbox.io/

Can someone guide me what's I am doing wrong here ?

Doc: https://developers.recurly.com/reference/recurly-js/#getting-a-token

Answer 1

Found multiple issue

1. Code
2. Vutify form element

The main issue with the code presented was, there is a second Elements being created that's used for the submit, which is different than the one that the card element is attaching too.

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