How can I make browser focus on the long credit card number field when loading a form using Braintree's Hosted Fields

Question

I'm using BrainTree Hosted Fields

https://developers.braintreepayments.com/guides/hosted-fields/overview/javascript/v3

For a payment gateway.

When the Credit Card form is loaded, the user has to click into the input to begin.

My Client wants the Input box for the long card number to already be in focus. I can't work out how to do this as the form is in an iFrame for security reasons, and the number of options in the documentation don't seem to cover setting a textarea as in focus.

Am I missing something here, or is this simply not possible?

Answer 1

What you're asking for isn't possible for arbitrary 3rd-party iframes, but Braintree's API does appear to allow it by using the focus() method on the hostedFieldInstance:

hostedFieldsInstance.focus('fieldname', function (focusErr) {
  if (focusErr) {
    console.error(focusErr);
  }
});

Answer 2

When dealing with iFrames that is the problem. You can focus the iFrame manually, even with or without delay but if the iFrame provider didn't developed the form to get focus on that element and does not provide a postMessage API, then you are basically out of options because it is outside your sec sandbox. If this was possible basically browser security will be compromised.

Answer 3

Closing Question as this isn't possible.

All "solutions" err on the side of trying to undermine the security of the customer's card details.