How do I build a Recurly.js form with div elements?

Question

My team is using Recurly.js to build a payments page into our website. We've been following the docs from https://docs.recurly.com/js. According to the docs,

Build a form however you like. Use the data-recurly attribute to identify input field targets to Recurly.js. To identify where Recurly.js will inject card data fields, we recommend using simple div elements.

The problem is that the div elements don't actually show in the form. Here's a short reproducible example based off of the docs:

<!doctype html>
<html lang="en">
<head>
  <!-- Recurly.js script and API key config -->
  <script src="https://js.recurly.com/v4/recurly.js"></script>
  <script>recurly.configure('... API Key here...');</script>
</head>
<body>

  <form>
    <input type="text" data-recurly="first_name">
    <input type="text" data-recurly="last_name">
    <div data-recurly="number"></div>
    <div data-recurly="month"></div>
    <div data-recurly="year"></div>
    <div data-recurly="cvv"></div>
    <input type="hidden" name="recurly-token" data-recurly="token">
    <button>submit</button>
  </form>
</body>
</html>

This is what it looks like:

As you can see, the two inputs show fine, but none of the divs show correctly.

What are we doing wrong and how do we build a Recurly.js form with div elements?

PHPDave · Accepted Answer · 2016-02-05T21:38:42.157

The javascript code that calls configure cannot be in the head tag and should be located in the body tag

<script>recurly.configure('... API Key here...');</script>

This example should show you how to set it up properly. Notice where they put the javascript in the body: https://github.com/recurly/recurly-js-examples/blob/master/public/minimal/index.html

<!doctype html>
<html lang="en">
<head>
  <!-- Recurly.js script and API key config -->
  <script src="https://js.recurly.com/v4/recurly.js"></script>
</head>
<body>
  <form>
    <input type="text" data-recurly="first_name">
    <input type="text" data-recurly="last_name">
    <div data-recurly="number"></div>
    <div data-recurly="month"></div>
    <div data-recurly="year"></div>
    <div data-recurly="cvv"></div>
    <input type="hidden" name="recurly-token" data-recurly="token">
    <button>submit</button>
  </form>
  <script>recurly.configure('... API Key here...');</script>
</body>
</html>

The browser loads javascript in the head, which loads up recurly, and then in the body you can use recurly.

How do I build a Recurly.js form with div elements?

1 Answers1