Hosted Fields - card number + expiry date to use form fields

[Kontrolit]

I'm using the JavaScript SDK to display my own hosted fields for the payment by card form. It works fine if I specify the following for the fields:

fields: {
  number: {
    selector: '#card-number',
    placeholder: '4111 1111 1111 1111'
  },
  expirationDate: {
    selector: '#expiration-date',
    placeholder: 'MM/YY'
  },
  cvv: {
    selector: '#cvv',
  }
}

With the following HTML:

<div>
  <label for="card-number">Card Number</label>
  <div id="card-number" class="card_field"></div>
</div>
<div>
  <label for="expiration-date">Expiration Date</label>
  <div id="expiration-date" class="card_field"></div>
</div>
<div>
  <label for="cvv">Security Code</label>
  <input id="cvv" type="text" />
</div>

Notice how the "cvv" field is a form input element. If I try changing the card number to a form input element then it doesn't work. Also I have the same problem changing the expiry date to month/year select elements and then changing the fields as mentioned here.

I'd really appreciate it if somone could help as I've been trying many different combinations without success. Thanks

[Kontrolit · Accepted solution]

I managed to fix this by changing the fields via JavaScript. For example:

const cardNumber = document.createElement('div');
cardNumber.setAttribute('id', 'card-number');
cardNumber.setAttribute('class', 'card-field');
document.getElementById('card-number').replaceWith(cardNumber);

Then all I had to do was style the fields to look like mine.