Hosted field error: `INSTANTIATION_OPTION_REQUIRED`

[primedev22]

General information

• SDK version: 3.77.0
• Environment: Both local and production
• Browser and OS Chrome 106.0.5249.103 (64-bit) on MacOS 11.6.1

Issue description

This issue is hard to reproduce since it barely happens, and works well in most cases. But sometimes, the Braintree hosted fields never load properly and prevent the user from inputting anything. The screenshot below show the error in the console.

This is the code to create hosted fields on our side.

import hostedFields from 'braintree-web/hosted-fields';

...

    hostedFields.create(
      {
        client: window.braintreeClientInstance,
        styles: {
          input: {
            'font-size': '16px',
            'font-family': typography.primaryFontFamily,
            color: '#ffffff',
          },
        },
        fields: {
          number: {
            selector: '#card-number',
            placeholder: 'Card Number',
            maxCardLength: 16,
            supportedCardBrands: {
              visa: true,
              mastercard: true,
              'american-express': true,
              discover: true,
              jcb: false,
            },
          },
          cvv: {
            selector: '#cvv',
            placeholder: 'CVV',
          },
          expirationDate: {
            selector: '#expiration-date',
            placeholder: 'MM/YY',
          },
        },
      },
      (err, clientInstance) => {
        if (err) {
          console.error(err);
          return;
        }
        setHostedFieldsInstance(clientInstance);
      }
    );

[SancSalix]

How is window.braintreeClientInstance being created? The error message is showing that the client is missing/not what was expected so something is causing it to not be ready for the rare times you see this issue, maybe some sort of race condition?

One suggestion is that you can switch to passing in authorization rather than client (docs here) which could circumvent any async problems

[hollabaq86]

Closing this issue since we haven't heard back from OP.