update Apple Pay init to receive payment form

This will allow RJS to also pull out info from address and name fields to add to token.

CHANGELOG.md

@@ -1,5 +1,10 @@
 ## Recurly.js CHANGELOG
 
+### Version 4.4.1 (Feb 9, 2017)
+
+* Also send name, address, etc fields for apple pay token creation [#320]
+* Update Apple Pay init to receive payment form [#322]
+
 ### Version 4.4.0 (Jan 25, 2017)
 
 * Adds Apple Pay support [#313][313]

lib/recurly/apple-pay.js

@@ -1,7 +1,5 @@
-import Promise from 'promise';
 import Emitter from 'component-emitter';
 import errors from '../errors';
-import dom from '../util/dom';
 import {Pricing} from './pricing';
 import {normalize} from '../util/normalize';
 
@@ -141,6 +139,9 @@ class ApplePay extends Emitter {
    * @private
    */
   configure (options) {
+    if ('form' in options) this.config.form = options.form;
+    else return this.initError = this.error('apple-pay-config-missing', { opt: 'form' });
+
     if ('label' in options) this.config.label = options.label;
     else return this.initError = this.error('apple-pay-config-missing', { opt: 'label' });
 
@@ -262,11 +263,7 @@ class ApplePay extends Emitter {
   onPaymentAuthorized (event) {
     debug('Payment authorization received', event);
 
-    // TODO: can we be sure an apple pay form will always have the number field?
-    // var selector = this.recurlyconfig.fields.number.selector;
-    var selector = '[data-recurly=first_name]'
-    var form = dom.findNodeInParents(window.document.querySelector(selector), 'form');
-    var data = normalize(fields, form);
+    var data = normalize(fields, this.config.form, { parseCard: false });
     var inputs = data.values || {};
 
     inputs['paymentData'] = event.payment.token['paymentData']

lib/version.js

@@ -3,4 +3,4 @@
  * Current package/component version.
  */
 
-module.exports = '4.4.0';
+module.exports = '4.4.1';

package.json

@@ -1,7 +1,7 @@
 {
   "name": "recurly.js",
   "description": "Zen subscription billing in the browser",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "license": "MIT",
   "main": "recurly.js",
   "repository": {

test/apple-pay.test.js

@@ -4,6 +4,7 @@ import merge from 'lodash.merge';
 import omit from 'lodash.omit';
 import Emitter from 'component-emitter';
 import {Recurly} from '../lib/recurly';
+import {applyFixtures} from './support/fixtures';
 import {initRecurly, apiTest, nextTick} from './support/helpers';
 
 import infoFixture from './server/fixtures/apple_pay/info';
@@ -34,11 +35,16 @@ ApplePaySessionStub.canMakePayments = () => true;
 
 apiTest(function (requestMethod) {
   describe(`Recurly.ApplePay (${requestMethod})`, function () {
+    applyFixtures();
+    this.ctx.fixture = 'minimal';
+    this.timeout(5000);
+
     let validOpts = {
       country: 'US',
       currency: 'USD',
       label: 'Apple Pay test',
-      total: '3.49'
+      total: '3.49',
+      form: global.document.querySelector('#fixture_container')
     };
 
     beforeEach(function () {
@@ -91,6 +97,11 @@ apiTest(function (requestMethod) {
         });
       });
 
+      it('requires options.form', function () {
+        let applePay = this.recurly.ApplePay(omit(validOpts, 'form'));
+        assertInitError(applePay, 'apple-pay-config-missing', {opt: 'form' });
+      });
+
       it('requires options.label', function () {
         let applePay = this.recurly.ApplePay(omit(validOpts, 'label'));
         assertInitError(applePay, 'apple-pay-config-missing', {opt: 'label' });
@@ -220,7 +231,8 @@ apiTest(function (requestMethod) {
 
     describe('internal event handlers', function () {
       beforeEach(function (done) {
-        this.applePay = this.recurly.ApplePay(validOpts);
+        let form = global.document.querySelector('#test-form');
+        this.applePay = this.recurly.ApplePay(merge({}, validOpts, {form: form}));
         this.applePay.ready(() => {
           this.applePay.begin();
           done();