Merge pull request #23 from snewcomer/fix-error

rearrange error setter close #22

README.md

@@ -98,7 +98,7 @@ Every component will:
 The components bubble up all of [the JavaScript events that can be handled by the Stripe Element in `element.on()`](https://stripe.com/docs/elements/reference#element-on) from the Ember component using the following actions:
 
 - `blur`
-- `change` (also sets/unsets the `error` property on the component, which can be yielded with the block)
+- `change` (also sets/unsets the `stripeError` property on the component, which can be yielded with the block)
 - `focus`
 
 You could handle these actions yourself, for example:
@@ -119,14 +119,14 @@ This addon gives you components that match the different [Element types](https:/
 
 ### Block usage with `options`
 
-In addition to the simple usage above, like `{{stripe-card}}`, you can also yield to a block, which will yield both an `error` object and [the `stripeElement` itself](https://stripe.com/docs/elements/reference#the-element).
+In addition to the simple usage above, like `{{stripe-card}}`, you can also yield to a block, which will yield both an `stripeError` object and [the `stripeElement` itself](https://stripe.com/docs/elements/reference#the-element).
 
-For example, you can choose to render out the `error`, as below (runnable in our dummy app).
+For example, you can choose to render out the `stripeError`, as below (runnable in our dummy app).
 
 ```hbs
-{{#stripe-card options=options as |stripeElement error|}}
-  {{#if error}}
-    <p class="error">{{error.message}}</p>
+{{#stripe-card options=options as |stripeElement stripeError|}}
+  {{#if stripeError}}
+    <p class="error">{{stripeError.message}}</p>
   {{/if}}
   <button {{action "submit" stripeElement}}>Submit</button>
   {{#if token}}

addon/components/stripe-element.js

@@ -6,9 +6,9 @@ export default Component.extend({
   classNames: ['ember-stripe-element'],
 
   autofocus: false,
-  error: null,
   options: {},
   stripeElement: null,
+  stripeError: null,
   type: null, // Set in components that extend from `stripe-element`
 
   stripev3: service(),
@@ -68,15 +68,16 @@ export default Component.extend({
     stripeElement.on('blur',    (event) => this.sendAction('blur', stripeElement, event));
     stripeElement.on('focus',   (event) => this.sendAction('focus', stripeElement, event));
     stripeElement.on('change',  (...args) => {
-      let { error, complete } = args[0];
-      set(this, 'error', error);
+      let [{ complete, error: stripeError }] = args;
       this.sendAction('change', stripeElement, ...args);
 
       if (complete) {
         this.sendAction('complete', stripeElement);
-      } else if (error) {
-        this.sendAction('error', error);
+      } else if (stripeError) {
+        this.sendAction('error', stripeError);
       }
+
+      set(this, 'stripeError', stripeError);
     });
   }
 });

addon/templates/components/stripe-card-cvc.hbs

@@ -1,4 +1,4 @@
 <div role="mount-point"></div>
 {{#if hasBlock}}
-  {{yield stripeElement error}}
+  {{yield stripeElement stripeError}}
 {{/if}}

addon/templates/components/stripe-card-expiry.hbs

@@ -1,4 +1,4 @@
 <div role="mount-point"></div>
 {{#if hasBlock}}
-  {{yield stripeElement error}}
+  {{yield stripeElement stripeError}}
 {{/if}}

addon/templates/components/stripe-card-number.hbs

@@ -1,4 +1,4 @@
 <div role="mount-point"></div>
 {{#if hasBlock}}
-  {{yield stripeElement error}}
+  {{yield stripeElement stripeError}}
 {{/if}}

addon/templates/components/stripe-card.hbs

@@ -1,4 +1,4 @@
 <div role="mount-point"></div>
 {{#if hasBlock}}
-  {{yield stripeElement error}}
+  {{yield stripeElement stripeError}}
 {{/if}}

addon/templates/components/stripe-postal-code.hbs

@@ -1,4 +1,4 @@
 <div role="mount-point"></div>
 {{#if hasBlock}}
-  {{yield stripeElement error}}
+  {{yield stripeElement stripeError}}
 {{/if}}

tests/dummy/app/templates/application.hbs

@@ -3,9 +3,9 @@
 </p>
 
 <div class="input-group">
-  {{#stripe-card autofocus=true options=cardOptions as |stripeElement error|}}
-    {{#if error}}
-      <p class="error">{{error.message}}</p>
+  {{#stripe-card autofocus=true options=cardOptions as |stripeElement stripeError|}}
+    {{#if stripeError}}
+      <p class="error">{{stripeError.message}}</p>
     {{/if}}
     <button {{action "submit" stripeElement}}>Submit</button>
     {{#if token}}

tests/integration/components/stripe-card-test.js

@@ -28,3 +28,14 @@ test('it renders', function(assert) {
 
   assert.equal(this.$().text().trim(), 'template block text');
 });
+
+test('yields out error message', function(assert) {
+  this.stripeError = { message: 'oops' };
+  this.render(hbs`
+    {{#stripe-card stripeError=stripeError as |stripeElement stripeError|}}
+      {{stripeError.message}}
+    {{/stripe-card}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'oops');
+});