Styling individual elements example missing.

[noctivityinc]

In the last version of recurly.js, we could create individual card elements and style them. This doesn't seem possible in the latest version, and if it is there are no examples here on how to style a form with custom elements. Please advise.

[noctivityinc]

btw - here is the HTML code that I'm trying along with the js:

<form data-action="subscriptions#paymentFormSubmit" action="/user/subscriptions" accept-charset="UTF-8" method="post">
<input data-recurly="token" name="recurly-token" type="hidden">
<input data-recurly="month" id="cardMonth" name="cardMonth" type="hidden">
<input data-recurly="year" id="cardYear" name="cardYear" type="hidden">
<div class="form-group mt-2">
<div class="row">
<div class="col-6">
<label>First Name</label>
<input class="form-control" data-recurly="first_name" type="text" value="Ebony" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII=&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
</div>
<div class="col-6">
<label>Last Name</label>
<input class="form-control" data-recurly="last_name" type="text" value="Scott">
</div>
</div>
</div>
<div class="form-group mt-2">
<label>Card Number</label>
<input class="form-control" data-recurly="number" id="cardNumber" type="text">
</div>
<div class="form-group mt-2">
<div class="row">
<div class="col">
<label>Expiration</label>
<input class="form-control" data-subscriptions-target="cardExpiry" id="cardExpiry" placeholder="MM/YY" type="text">
</div>
<div class="col">
<label>CVC</label>
<input class="form-control" id="cardCVV">
</div>
<div class="col">
<label>Zipcode</label>
<input class="form-control" data-recurly="postal_code" type="text">
</div>
</div>
</div>
<div class="form-actions mt-4">
<button class="btn btn-primary mt-3 w-100">Complete Your Membership</button>
</div>
<div class="text-danger mt-3" id="cardErrors"></div>
</form>

const elements = recurly.Elements();
const cardNumberElement = elements.CardNumberElement();
const cardMonthElement = elements.CardMonthElement();
const cardYearElement = elements.CardYearElement();
const cardCvvElement = elements.CardCvvElement();

// form submit
        let expParts = this.cardExpiryTarget.value.split('/')
        console.log('expParts', expParts, this.cardExpiryTarget.value);
        $('#cardMonth').val(expParts[0]);
        $('#cardYear').val(expParts[1]);

        cardNumberElement.attach('#cardNumber');
        cardMonthElement.attach('#cardMonth');
        cardYearElement.attach('#cardYear');
        cardCvvElement.attach('#cardCVV');

[gilv93]

Hello!

Looking at your html code I'm making a quick assumption that you're upgrading from using the v3 version of our library. First I'd like to point you to https://developers.recurly.com/reference/recurly-js/index.html#upgrading-from-v3 which will go over how you can rewrite your integration and get you properly setup to work with our latest version.

Once that is setup you can refer to: https://developers.recurly.com/reference/recurly-js/index.html#styling-elements for documentation on stylizing the elements as you instantiate them.

[noctivityinc]

@gilv93 not at all. Everything you see there was built in the last week directly from your existing docs - the exact ones you point to in your response - which DO NOT provide ANY guidance on how to attach to individual form elements like the above.

[noctivityinc]

@gilv93 as a point of reference, if you look at the docs for 4.10.3 (https://developers.recurly.com/reference/recurly-js/v4.10.3/index.html) there is a section called "Individual card fields" that goes into detail about how to set them up, bind them and style them. This is MISSING from the latest docs and needs to be added to provide us with some guidance, or at least include an example in this repo that demonstrates this.

[gilv93]

Sorry about my assumption from before!

You're right that the docs aren't clear enough and we'll be updating them to add more clarity where we can.

Starting with v4.11.0 we introduced Elements and steered away from Hosted Fields. In previous versions such as 4.10.3 we could configure these Hosted Fields using syntax such as recurly.configure, but since we're using elements we can now configure the style when instantiating them:

<div id="card-month"></div>

const cardMonthElement = elements.cardMonthElement({
   style: {
      fontSize: '1em'
   }
});

cardMonthElement.attach('#card-month');

The attach method itself should be called on a container HTMLElement such as an HTMLDivElement, calling it on an input tag may prevent the element from rendering. We have just updated the docs to be more clear on this.

If you're still having trouble, if you could show us a demo or put your code on https://codesandbox.io/ (or another similar tool), then we can inspect to see what’s going on.

[noctivityinc]

@gilv93 I really think you are way to close to this to understand the issue.

This isn't about STYLING. This is about ATTACHING and BINDING to the fields. This was clearly spelled out in the previous docs.

I've already had to use your standard recurlyElement, which is in the docs, since nothing else worked, so I don't have code. I do have that form above, which clearly shows individual card elements. I am STRONGLY recommending you create a new example in this repo called individual_card_elements and create a form that has a credit card number, card expiration (with mm and yy TOGETHER), CVV and zipcode form fields and then the JS code showing how to bind and style them.

[gilv93]

That's a great idea, thank you. We appreciate your suggestion and are working on creating a multi-element card form example now to help clear things up.