All geek questions in one place

How to create a Recurly.js form with div elements?

My team uses Recurly.js to create a payment page on our website. We follow documents from https://docs.recurly.com/js . According to the docs,

Create the shape as you like. Use the data-recurly attribute to determine the target input fields for Recurly.js. To determine where Recurly.js will enter the map data fields, we recommend using simple div elements.

The problem is that div elements are not actually displayed on the form. Here's a short, reproducible, document-based example:

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

It looks like this:

Example form recurly.js

As you can see, two input show a penalty, but none of the div display correctly.

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

+5
source share
1 answer

The javascript code that configure calls cannot be in the main tag and must be in the body tag

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

This example shows how to configure it correctly. Notice where they put 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 into the head, which is loaded back, and then in the body you can use recurly.

+5
source

Source: https://habr.com/ru/post/1242388/

More articles:


All Articles