only initialize api after fields have rendered

Hopefully will fix #21

Author: nathanstitt

specs/__snapshots__/braintree.spec.jsx.snap

@@ -144,21 +144,27 @@ exports[`Braintree hosted fields renders and matches snapshot 1`] = `
 >
   <div
     className="braintree-hosted-field"
+    id="braintree-field-wrapper-1"
   />
   <div
     className="braintree-hosted-field"
+    id="braintree-field-wrapper-2"
   />
   <div
     className="braintree-hosted-field"
+    id="braintree-field-wrapper-3"
   />
   <div
     className="braintree-hosted-field"
+    id="braintree-field-wrapper-4"
   />
   <div
     className="braintree-hosted-field"
+    id="braintree-field-wrapper-5"
   />
   <div
     className="braintree-hosted-field"
+    id="braintree-field-wrapper-6"
   />
 </div>
 `;

specs/braintree.spec.jsx

@@ -7,6 +7,7 @@ import { Braintree, HostedField } from '../src/index.js';
 
 jest.mock('braintree-web/client');
 jest.mock('braintree-web/hosted-fields');
+jest.useFakeTimers();
 
 let getToken;
 
@@ -43,6 +44,7 @@ describe('Braintree hosted fields', () => {
 
     it('registers when mounted', () => {
         mount(buildTree());
+        jest.runAllTimers();
         expect(BraintreeClient.create).toHaveBeenCalledWith(expect.objectContaining({
             authorization: 'sandbox_g42y39zw_348pk9cgf3bgyw2b',
         }), expect.anything());
@@ -55,6 +57,7 @@ describe('Braintree hosted fields', () => {
         }));
         const onAuthorizationSuccess = jest.fn();
         mount(buildTree({ onAuthorizationSuccess }));
+        jest.runAllTimers();
         expect(onAuthorizationSuccess.mock.calls.length).toEqual(1);
     });
 
@@ -76,6 +79,7 @@ describe('Braintree hosted fields', () => {
         const clientInstance = jest.fn();
         BraintreeClient.create = jest.fn((args, cb) => cb(null, clientInstance));
         mount(buildTree({ authorization: 'onetwothree' }));
+        jest.runAllTimers();
         expect(BraintreeClient.create).toHaveBeenCalledWith(
             { authorization: 'onetwothree' }, expect.any(Function),
         );
@@ -85,6 +89,7 @@ describe('Braintree hosted fields', () => {
     it('can set token ref after render', () => {
         const styles = { foo: 'bar' };
         const fields = mount(buildTree({ styles, authorization: '' }));
+        jest.runAllTimers();
         const clientInstance = jest.fn();
         BraintreeClient.create = jest.fn((args, cb) => cb(null, clientInstance));
         expect(BraintreeClient.create).not.toHaveBeenCalled();

src/api.js

@@ -8,11 +8,11 @@ function cap(string) {
 
 export default class BraintreeClientApi {
 
-    fields = {};
+    fields = Object.create(null);
 
     _nextFieldId = 0;
 
-    fieldHandlers = {};
+    fieldHandlers = Object.create(null);
 
     constructor({
         authorization, styles, onAuthorizationSuccess, ...callbacks
@@ -26,6 +26,15 @@ export default class BraintreeClientApi {
         if (!authorization && this.authorization) {
             this.teardown();
         } else if (authorization && authorization !== this.authorization) {
+            // fields have not yet checked in, delay setting so they can register
+            if (0 === Object.keys(this.fields).length && !this.pendingAuthTimer) {
+                this.pendingAuthTimer = setTimeout(() => {
+                    this.pendingAuthTimer = null;
+                    this.setAuthorization(authorization, onAuthorizationSuccess);
+                }, 5);
+                return;
+            }
+
             if (this.authorization) { this.teardown(); }
             this.authorization = authorization;
             Braintree.create({ authorization }, (err, clientInstance) => {
@@ -83,6 +92,10 @@ export default class BraintreeClientApi {
 
     teardown() {
         if (this.hostedFields) { this.hostedFields.teardown(); }
+        if (this.pendingAuthTimer) {
+            clearTimeout(this.pendingAuthTimer);
+            this.pendingAuthTimer = null;
+        }
     }
 
     checkInField({
@@ -97,20 +110,22 @@ export default class BraintreeClientApi {
         rejectUnsupportedCards,
         ...handlers
     }) {
-        this.fieldHandlers[type] = handlers;
-        this.fields[type] = {
-            formatInput,
-            maxlength,
-            minlength,
-            placeholder,
-            select,
-            prefill,
-            selector: `#${id}`,
+        const onRenderComplete = () => {
+            this.fieldHandlers[type] = handlers;
+            this.fields[type] = {
+                formatInput,
+                maxlength,
+                minlength,
+                placeholder,
+                select,
+                prefill,
+                selector: `#${id}`,
+            };
+            if (('number' === type) && rejectUnsupportedCards) {
+                this.fields.number.rejectUnsupportedCards = true;
+            }
         };
-        if (('number' === type) && rejectUnsupportedCards) {
-            this.fields.number.rejectUnsupportedCards = true;
-        }
-        return id;
+        return [id, onRenderComplete];
     }
 
     focusField(fieldType, cb) {

src/field.jsx

@@ -24,6 +24,8 @@ export default class BraintreeHostedField extends React.Component {
         braintreeApi: PropTypes.instanceOf(Api),
     }
 
+    state = {}
+
     focus() {
         this.context.braintreeApi.focusField(this.props.type);
     }
@@ -37,7 +39,8 @@ export default class BraintreeHostedField extends React.Component {
     }
 
     componentDidMount() {
-        this.fieldId = this.context.braintreeApi.checkInField(this.props);
+        const [ fieldId,  onRenderComplete ] = this.context.braintreeApi.checkInField(this.props);
+        this.setState({ fieldId }, onRenderComplete);
     }
 
     get className() {
@@ -47,6 +50,9 @@ export default class BraintreeHostedField extends React.Component {
     }
 
     render() {
-        return <div id={this.fieldId} className={this.className} />;
+        const { fieldId } = this.state;
+        if (!fieldId) { return null; }
+
+        return <div id={fieldId} className={this.className} />;
     }
 }