Merge pull request #62 from square/deanpapastrat/add-input-events

Add support for passing the 'inputEventReceived' callback.

addon/components/square-payment-form-styled.js

@@ -547,6 +547,19 @@ export default Component.extend({
    */
   shippingOptionChanged: null,
 
+  /**
+   * Callback that gets fired whenever a buyer focuses / blurs a field, enters invalid data,
+   * changes the card brand, or changes the postal code.
+   *
+   * See the [Payment Form reference](https://developer.squareup.com/docs/api/paymentform#inputeventreceived)
+   * for a full list of events.
+   *
+   * @action
+   * @argument inputEventReceived
+   * @type Action
+   */
+  inputEventReceived: null,
+
   // ADDON INTERNALS
 
   env: null,

addon/components/square-payment-form.js

@@ -600,6 +600,19 @@ export default Component.extend({
    */
   createVerificationDetails: null,
 
+  /**
+   * Callback that gets fired whenever a buyer focuses / blurs a field, enters invalid data,
+   * changes the card brand, or changes the postal code.
+   *
+   * See the [Payment Form reference](https://developer.squareup.com/docs/api/paymentform#inputeventreceived)
+   * for a full list of events.
+   *
+   * @action
+   * @argument inputEventReceived
+   * @type Action
+   */
+  inputEventReceived: null,
+
   // COMPONENT INTERNALS
 
   env: null,
@@ -750,6 +763,11 @@ export default Component.extend({
             }
           );
         },
+        inputEventReceived: (eventData) => {
+          if (this.inputEventReceived) {
+            this.inputEventReceived(eventData);
+          }
+        },
         paymentFormLoaded: () => {
           if (this.onPaymentFormLoaded) {
             this.onPaymentFormLoaded();

addon/templates/components/square-payment-form-styled.hbs

@@ -10,6 +10,7 @@
   shippingContactChanged=this.shippingContactChanged
   shippingOptionChanged=this.shippingOptionChanged
   createVerificationDetails=this.createVerificationDetails
+  inputEventReceived=this.inputEventReceived
   as |PaymentForm|
 }}
   {{PaymentForm.ApplePayButton

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-square-payment-form",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Take payments with Square securely and easily in your Ember app",
   "keywords": [
     "ember-addon"

tests/browser/basic.test.js

@@ -19,6 +19,18 @@ describe('Card-Only Payment Form', () => {
     await page.waitFor(1000);
 
     await ccInputFrame.focus('input');
+
+    // Ensure input events are bubbled properly
+    const eventTypeHandle = await page.$('.event-data__event-type');
+    await expect(
+      await eventTypeHandle.evaluate(node => node.innerText)
+    ).toMatch('focusClassAdded');
+
+    const fieldHandle = await page.$('.event-data__field');
+    await expect(
+      await fieldHandle.evaluate(node => node.innerText)
+    ).toMatch('cardNumber');
+
     await page.keyboard.type('4111 1111 1111 1111');
 
     await expDateInputFrame.focus('input');

tests/dummy/app/controllers/testing/card-only.js

@@ -14,6 +14,9 @@ export default Controller.extend({
         shippingOption: JSON.stringify(shippingOption, null, '  '),
         verificationToken
       });
+    },
+    handleInputEventReceived(eventData) {
+      this.set('eventData', eventData);
     }
   }
 });

tests/dummy/app/templates/testing/card-only.hbs

@@ -4,6 +4,7 @@
   @locationId="TC4Z3ZEBKRXRH"
   @style="light"
   @onCardNonceResponseReceived={{action "handleCardNonceResponse"}}
+  @inputEventReceived={{action "handleInputEventReceived"}}
 />
 
 {{#if nonceResponse}}
@@ -17,4 +18,12 @@
     <pre class="nonce-response__shipping-option">{{nonceResponse.shippingOption}}</pre>
     <pre class="nonce-response__verification-token">{{nonceResponse.verificationToken}}</pre>
   </div>
-{{/if}}
+{{/if}}
+
+{{#if eventData}}
+  <div class="event-data">
+    <h3>Events</h3>
+    <pre class="event-data__event-type">{{eventData.eventType}}</pre>
+    <pre class="event-data__field">{{eventData.field}}</pre>
+  </div>
+{{/if}}