Adds onReady callback to ThreeDSecureAction

lib/three-d-secure-action.jsx

@@ -20,6 +20,16 @@ export default class ThreeDSecureAction extends React.PureComponent {
      */
     actionTokenId: PropTypes.string,
 
+    /**
+     * Called when the 3-D Secure flow is ready for interaction
+     * @type {ThreeDSecureAction~onReady}
+     */
+
+    /**
+     * @callback ThreeDSecureAction~onReady
+     */
+    onReady: PropTypes.func,
+
     /**
      * Called when the user has completed the 3D Secure flow
      * @type {ThreeDSecureAction~onToken}
@@ -47,6 +57,7 @@ export default class ThreeDSecureAction extends React.PureComponent {
     id: undefined,
     className: undefined,
     actionTokenId: '',
+    onReady: () => {},
     onToken: () => {},
     onError: e => { throw e }
   };
@@ -65,6 +76,7 @@ export default class ThreeDSecureAction extends React.PureComponent {
     this._container = React.createRef();
     this._risk = this.context.recurly.Risk();
     this._threeDSecure = this._risk.ThreeDSecure({ actionTokenId });
+    this._threeDSecure.on('ready', (...args) => this.props.onReady(...args));
     this._threeDSecure.on('token', (...args) => this.props.onToken(...args));
     this._threeDSecure.on('error', (...args) => this.props.onError(...args));
   }

test/three-d-secure-action.test.jsx

@@ -45,6 +45,34 @@ describe('<ThreeDSecureAction />', function () {
   describe('event handlers', function () {
     const example = { arbitrary: 'properties' };
 
+    describe('[onReady]', function () {
+      it('is called when the underlying ThreeDSecure instance is ready', function () {
+        const subject = jest.fn();
+        let fixture;
+
+        render(withRecurlyProvider(
+          <ThreeDSecureAction
+            actionTokenId="test-action-token"
+            onReady={subject}
+            ref={ref => fixture = ref}
+          />
+        ));
+
+        getThreeDSecureInstanceFrom(fixture).emit('ready', );
+        expect(subject).toHaveBeenCalled();
+      });
+
+      it('does nothing when no handler is provided', function () {
+        let fixture;
+
+        render(withRecurlyProvider(
+          <ThreeDSecureAction actionTokenId="test-action-token" ref={ref => fixture = ref} />
+        ));
+
+        expect(() => getThreeDSecureInstanceFrom(fixture).emit('ready', example)).not.toThrow();
+      });
+    });
+
     describe('[onToken]', function () {
       it('is called when the underlying ThreeDSecure instance receives a token', function () {
         const subject = jest.fn();

types/index.d.ts

@@ -117,6 +117,7 @@ export type ThreeDSecureActionProps = {
   id?: string;
   className?: string;
   actionTokenId?: string;
+  onReady?: () => void;
   onToken?: (token: TokenPayload) => void;
   onError?: (e: RecurlyError) => void;
 };