feat(apple pay): add support for recurringPaymentRequest, move to options.paymentRequest

lib/recurly/apple-pay/apple-pay.js

@@ -29,8 +29,10 @@ const I18N = {
  * @param {Recurly} options.recurly
  * @param {String} options.country
  * @param {String} options.currency
- * @param {String|Object} [options.total] either in dollar format, '1.00', or an ApplePayLineItem object that represents the total for the payment. Optional and discarded if 'pricing' is supplied
- * @param {String} [options.label] The short, localized description of the total charge. Deprecated, use 'i18n.totalLineItemLabel' if not using an ApplePayLineItem as the total
+ * @param {String|Object} [options.total] total for the payment in dollar format, eg: '1.00'. Optional and discarded if 'pricing' is supplied
+ * @param {String} [options.label] The short, localized description of the total charge. Deprecated, use 'i18n.totalLineItemLabel'
+ * @param {Boolean} [options.recurring] whether or not the total line item is recurring
+ * @param {Object} [options.paymentRequest] an ApplePayPaymentRequest
  * @param {HTMLElement} [options.form] to provide additional customer data
  * @param {Pricing} [options.pricing] to provide line items and total from Pricing
  * @param {Boolean} [options.enforceVersion] to ensure that the client supports the minimum version to support required fields
@@ -79,25 +81,29 @@ export class ApplePay extends Emitter {
     return this._session = session;
   }
 
+  /**
+   * @return {Object} recurring payment request for display on payment sheet
+   * @private
+   */
+  get recurringPaymentRequest () {
+    return this._paymentRequest?.recurringPaymentRequest;
+  }
+
   /**
    * @return {Array} subtotal line items for display on payment sheet
    * @private
    */
   get lineItems () {
-    if (!this._ready) return [];
-
     // Clone configured line items
-    return [].concat(this._paymentRequest.lineItems);
+    return this._paymentRequest?.lineItems ? [].concat(this._paymentRequest.lineItems) : [];
   }
 
   /**
    * @return {Object} total cost line item
    * @private
    */
   get totalLineItem () {
-    if (!this._ready) return {};
-
-    return this._paymentRequest.total;
+    return this._paymentRequest?.total ? this._paymentRequest.total : {};
   }
 
   /**
@@ -127,30 +133,23 @@ export class ApplePay extends Emitter {
    * @private
    */
   configure (options) {
-    if (options.recurly) {
-      this.recurly = options.recurly;
-      delete options.recurly;
-    } else return this.initError = this.error('apple-pay-factory-only');
-
-    if (options.form) {
-      this.config.form = options.form;
-      delete options.form;
-    }
+    if (options.recurly) this.recurly = options.recurly;
+    else return this.initError = this.error('apple-pay-factory-only');
+
+    if (options.form) this.config.form = options.form;
+    if (options.recurring) this.config.recurring = options.recurring;
 
     this.config.i18n = {
       ...I18N,
       ...(options.label && { totalLineItemLabel: options.label }),
       ...options.i18n,
     };
-    delete options.label;
-    delete options.i18n;
 
     if (options.pricing instanceof PricingPromise) {
       this.config.pricing = options.pricing.pricing;
     } else if (options.pricing instanceof Pricing) {
       this.config.pricing = options.pricing;
     }
-    delete options.pricing;
 
     buildApplePayPaymentRequest(this, options, (err, paymentRequest) => {
       if (err) return this.initError = this.error(err);
@@ -190,9 +189,9 @@ export class ApplePay extends Emitter {
    * @private
    */
   onPricingChange () {
-    const { pricing } = this.config;
+    const { pricing, recurring } = this.config;
 
-    this._paymentRequest.total = lineItem(this.config.i18n.totalLineItemLabel, pricing.totalNow);
+    this._paymentRequest.total = lineItem(this.config.i18n.totalLineItemLabel, pricing.totalNow, { recurring });
     this._paymentRequest.lineItems = [];
 
     if (!pricing.hasPrice) return;
@@ -259,6 +258,7 @@ export class ApplePay extends Emitter {
       this.session.completePaymentMethodSelection({
         newTotal: this.finalTotalLineItem,
         newLineItems: this.lineItems,
+        ...(this.recurringPaymentRequest && { newRecurringPaymentRequest: this.recurringPaymentRequest }),
       });
     });
   }
@@ -277,6 +277,7 @@ export class ApplePay extends Emitter {
         newTotal: this.finalTotalLineItem,
         newLineItems: this.lineItems,
         newShippingMethods: [],
+        ...(this.recurringPaymentRequest && { newRecurringPaymentRequest: this.recurringPaymentRequest }),
       });
     });
   }
@@ -294,6 +295,7 @@ export class ApplePay extends Emitter {
       newTotal: this.finalTotalLineItem,
       newLineItems: this.lineItems,
       newShippingMethods: [],
+      ...(this.recurringPaymentRequest && { newRecurringPaymentRequest: this.recurringPaymentRequest }),
     });
   }
 

lib/recurly/apple-pay/util/apple-pay-line-item.js

@@ -6,15 +6,10 @@ import decimalize from '../../../util/decimalize';
  * @param  {Number} amount
  * @return {object}
  */
-export function lineItem (label = '', amount = 0) {
-  return { label, amount: decimalize(amount) };
-}
-
-/**
- * Determine if the val is a valid ApplePayLineItem
- * @param {object} val
- * @return {boolean}
- */
-export function isLineItem (val) {
-  return typeof val === 'object' && val.label !== undefined && val.amount !== undefined;
+export function lineItem (label = '', amount = 0, { recurring = false } = {}) {
+  return {
+    label,
+    amount: decimalize(amount),
+    ...(recurring && { paymentTiming: 'recurring' }),
+  };
 }

lib/recurly/apple-pay/util/build-apple-pay-payment-request.js

@@ -1,26 +1,25 @@
 import intersection from 'intersect';
 import errors from '../../errors';
 import filterSupportedNetworks from './filter-supported-networks';
-import { lineItem, isLineItem } from './apple-pay-line-item';
+import { lineItem } from './apple-pay-line-item';
 
 const REQUIRED_SHIPPING_FIELDS_VERSION = 6;
 
 function buildOrder (config, options, paymentRequest) {
-  if (!options.total) return errors('apple-pay-config-missing', { opt: 'total' });
-
-  const { total, lineItems = [] } = options;
-  ['total', 'lineItems'].forEach(k => delete options[k]);
-
-  if (isLineItem(total)) {
-    paymentRequest.total = total;
-  } else if (typeof total === 'object') {
-    const missing = (total.label === undefined) ? 'label' : 'amount';
-    return errors('apple-pay-config-missing', { opt: `total.${missing}` });
-  } else {
-    paymentRequest.total = lineItem(config.i18n.totalLineItemLabel, total);
+  if (!paymentRequest.total && !options.total) return errors('apple-pay-config-missing', { opt: 'total' });
+
+  let { total: totalLineItem } = paymentRequest;
+  if (!totalLineItem) {
+    const { recurring, total } = options;
+    paymentRequest.total = totalLineItem = lineItem(config.i18n.totalLineItemLabel, total, { recurring });
   }
 
-  paymentRequest.lineItems = lineItems;
+  if (!paymentRequest.recurringPaymentRequest && totalLineItem.paymentTiming === 'recurring') {
+    paymentRequest.recurringPaymentRequest = {
+      paymentDescription: totalLineItem.label,
+      regularBilling: totalLineItem,
+    };
+  }
 }
 
 /**
@@ -38,33 +37,26 @@ function buildOrder (config, options, paymentRequest) {
  */
 export default function buildApplePayPaymentRequest (applePay, options, cb) {
   const { recurly, config } = applePay;
-
-  const { currency: currencyCode, country: countryCode } = options;
-  if (!currencyCode) return cb(errors('apple-pay-config-missing', { opt: 'currency' }));
-  if (!countryCode) return cb(errors('apple-pay-config-missing', { opt: 'country' }));
-  ['currency', 'country'].forEach(k => delete options[k]);
-
-  let paymentRequest = {
-    currencyCode,
-    countryCode,
+  const paymentRequest = {
+    currencyCode: options.currency,
+    countryCode: options.country,
+    requiredShippingContactFields: options.requiredShippingContactFields, // deprecated
+    ...options.paymentRequest,
     requiredBillingContactFields: ['postalAddress'],
   };
 
+  if (!paymentRequest.currencyCode) return cb(errors('apple-pay-config-missing', { opt: 'currency' }));
+  if (!paymentRequest.countryCode) return cb(errors('apple-pay-config-missing', { opt: 'country' }));
+
   // The order is handled by pricing if set
   if (!config.pricing) {
     const error = buildOrder(config, options, paymentRequest);
     if (error) return cb(error);
   }
 
   if (options.enforceVersion &&
-      options.requiredShippingContactFields &&
+      paymentRequest.requiredShippingContactFields &&
       !window.ApplePaySession.supportsVersion(REQUIRED_SHIPPING_FIELDS_VERSION)) return cb(errors('apple-pay-not-supported'));
-  delete options.enforceVersion;
-
-  paymentRequest = {
-    ...options,
-    ...paymentRequest,
-  };
 
   recurly.request.get({
     route: '/apple_pay/info',
@@ -103,6 +95,15 @@ function applyRemoteConfig (paymentRequest, cb) {
       : info.supportedNetworks;
     paymentRequest.supportedNetworks = filterSupportedNetworks(supportedNetworks);
 
+    const { recurringPaymentRequest } = paymentRequest;
+    if (recurringPaymentRequest) {
+      if (!recurringPaymentRequest.managementURL && !info.managementURL) {
+        return cb(errors('apple-pay-config-invalid', { opt: 'recurringPaymentRequest.managementURL' }));
+      } else if (!recurringPaymentRequest.managementURL) {
+        recurringPaymentRequest.managementURL = info.managementURL;
+      }
+    }
+
     cb(null, paymentRequest);
   };
 }

test/server/fixtures/apple_pay/info.json

@@ -3,5 +3,6 @@
   "countries": ["US", "CA"],
   "currencies": ["USD", "CAD"],
   "merchantCapabilities": ["supportsCredit", "supports3DS", "supportsDebit"],
-  "supportedNetworks": ["visa", "amex"]
+  "supportedNetworks": ["visa", "amex"],
+  "managementURL": "https://example.com/account"
 }

test/types/apple-pay.ts

@@ -1,16 +1,25 @@
+import { ApplePayPaymentRequest, ApplePayLineItem } from 'lib/apple-pay/native';
+
 export default function applePay() {
-  const applePayDeprecated = recurly.ApplePay({
+  const applePaySimple = recurly.ApplePay({
     country: 'US',
     currency: 'USD',
     label: 'My Subscription',
     total: '29.00',
     pricing: window.recurly.Pricing.Checkout()
   });
 
-  const applePay = recurly.ApplePay({
-    country: 'US',
-    currency: 'USD',
-    total: { label: 'My Subscription', amount: '29.00' },
+  const total: ApplePayLineItem = {
+    label: 'My Subscription',
+    paymentTiming: 'recurring',
+    amount: '29.00',
+    recurringPaymentIntervalUnit: 'month',
+    recurringPaymentIntervalCount: 1,
+    recurringPaymentStartDate: new Date(),
+  };
+
+  const paymentRequest: ApplePayPaymentRequest = {
+    total,
     lineItems: [{ label: 'Subtotal', amount: '1.00' }],
     requiredShippingContactFields: ['email', 'phone'],
     billingContact: {
@@ -26,7 +35,17 @@ export default function applePay() {
       phoneNumber: '1231231234',
       emailAddress: 'ebrown@example.com'
     },
-    pricing: window.recurly.Pricing.Checkout()
+    recurringPaymentRequest: {
+      paymentDescription: 'A recurring subscription',
+      regularBilling: total,
+      billingAgreement: 'Will recur forever',
+    },
+  };
+
+  const applePay = recurly.ApplePay({
+    country: 'US',
+    currency: 'USD',
+    paymentRequest,
   });
 
   applePay.ready(() => {});