and initialize with recurly.configure({ publicKey: 'YOUR_PUBLIC_KEY' })"},{"@type":"HowToStep","position":2,"text":"Mount the card element: recurly.Elements() to create a CardElement and call cardElement.attach('#card-element') to render a hosted card input iframe"},{"@type":"HowToStep","position":3,"text":"On form submit, call recurly.token(form, (err, token) => {}) passing the form element; Recurly returns a single-use token string"},{"@type":"HowToStep","position":4,"text":"Submit the token to your server and create the billing info with PUT /sites/SITE_ID/accounts/ACCOUNT_CODE/billing_info using token_id: TOKEN_VALUE in the request body"},{"@type":"HowToStep","position":5,"text":"Create the subscription server-side with POST /sites/SITE_ID/subscriptions providing account.code and plan_code — Recurly retrieves the stored billing info automatically"},{"@type":"HowToStep","position":6,"text":"Handle tokenization errors in the client-side callback; error.fields array lists which card fields failed validation (number, month, year, cvv)"}],"about":"recurly.com","dateCreated":"2026-06-12T14:24:27.564Z"}
Implement Recurly.js to tokenize card data client-side and use the token to create a Recurly subscription without handling raw card data server-side
Include Recurly.js on the page: <script src='https://js.recurly.com/v4/recurly.js'></script> and initialize with recurly.configure({ publicKey: 'YOUR_PUBLIC_KEY' })
Mount the card element: recurly.Elements() to create a CardElement and call cardElement.attach('#card-element') to render a hosted card input iframe
On form submit, call recurly.token(form, (err, token) => {}) passing the form element; Recurly returns a single-use token string
Submit the token to your server and create the billing info with PUT /sites/SITE_ID/accounts/ACCOUNT_CODE/billing_info using token_id: TOKEN_VALUE in the request body
Create the subscription server-side with POST /sites/SITE_ID/subscriptions providing account.code and plan_code — Recurly retrieves the stored billing info automatically
Handle tokenization errors in the client-side callback; error.fields array lists which card fields failed validation (number, month, year, cvv)
Known gotchas
Recurly.js tokens are single-use and expire after a short period (typically 20 minutes); do not cache tokens between page loads or form submissions
The CardElement hosted fields are rendered in iFrames on Recurly's domain — custom CSS from your page does not apply inside the iFrames; use the style option in recurly.Elements() configuration to pass allowed style properties
recurly.token() requires a reference to the entire form element containing hidden fields for first_name, last_name, address1, postal_code, and country — missing these fields causes tokenization to succeed but billing info creation to fail with missing address data
Give your agent this knowledge — and 200+ more routes
One MCP install gives any agent live access to the full route map, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp