javascript - How do I build a Recurly.js form with div elements? -
my team using recurly.js build payments page our website. we've been following docs https://docs.recurly.com/js. according docs,
build form like. use data-recurly attribute identify input field targets recurly.js. identify recurly.js inject card data fields, recommend using simple div elements.
the problem div elements don't show in form. here's short reproducible example based off of docs:
<!doctype html> <html lang="en"> <head> <!-- recurly.js script , 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 looks like:
as can see, 2 inputs show fine, none of divs show correctly.
what doing wrong , how build recurly.js form div elements?
the javascript code calls configure cannot in head tag , should located in body tag
<script>recurly.configure('... api key here...');</script> this example should show how set properly. notice put javascript in body: https://github.com/recurly/recurly-js-examples/blob/master/public/minimal/index.html
<!doctype html> <html lang="en"> <head> <!-- recurly.js script , 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 head, loads recurly, , in body can use recurly.
Comments
Post a Comment