Hosted fields throws an error when passing container in React 16

General information

• SDK version: 3.57
• Environment: Sandbox
• Browser and OS: Chrome 79 Windows 10

Issue description

When trying to use container instead of selector during hosted fields configuration, it gives an error:

Could not stringify event: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLDivElement'
    |     property '__reactInternalInstance$ahvo3qp93tt' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle

I’m using React 16.12 and here’s my configuration:

const cardNumberRef = useRef(null);
...
braintree.hostedFields.create(
    {
        client: clientInstance,
        fields: {
            number: {
                container: cardNumberRef.current,
                placeholder: "4111 1111 1111 1111"
            },
    ...
...
<div 
    ref={cardNumberRef}
    id="card-number"
    className="hosted-field"
></div>

It’s trying to JSON.stringify options during following call (hosted-fields.js:613) reply(self._merchantConfigurationOptions); and fails because some of them are HTMLDivElement instances (see screenshot)

From the changelog I see that container param for field is supported since 3.47.0. What am I missing here?

Thanks.

[crookedneighbor]

👍 I’ve got a fix started that drops the container field before sending it to the hosted fields iframes. Will update here when it’s released.

[wiranoid]

Yes, it’s working now. Thank you!