Automatically select an ApplePay version

src/components/ApplePay/ApplePay.test.ts

@@ -1,6 +1,10 @@
 import ApplePay from '.';
 import defaultProps from './defaultProps';
 
+(global as any).ApplePaySession = {
+    supportsVersion: jest.fn(version => true)
+};
+
 describe('ApplePay', () => {
     describe('formatProps', () => {
         test('normalizes an amount in a legacy format', () => {

src/components/ApplePay/ApplePay.tsx

@@ -3,9 +3,10 @@ import UIElement from '../UIElement';
 import ApplePayButton from './components/ApplePayButton';
 import ApplePayService from './ApplePayService';
 import { preparePaymentRequest } from './payment-request';
-import { normalizeAmount } from './utils';
+import { normalizeAmount, resolveSupportedVersion } from './utils';
 import defaultProps from './defaultProps';
 import { ApplePayElementProps, ApplePayElementData } from './types';
+const latestSupportedVersion = 10;
 
 class ApplePayElement extends UIElement<ApplePayElementProps> {
     protected static type = 'applepay';
@@ -22,11 +23,12 @@ class ApplePayElement extends UIElement<ApplePayElementProps> {
      */
     protected formatProps(props) {
         const amount = normalizeAmount(props);
-
+        const version = props.version || resolveSupportedVersion(latestSupportedVersion);
         return {
             onAuthorized: resolve => resolve(),
             onValidateMerchant: (resolve, reject) => reject('onValidateMerchant event not implemented'),
             ...props,
+            version,
             totalPriceLabel: props.totalPriceLabel || props.configuration?.merchantName,
             amount,
             onCancel: event => props.onError(event)

src/components/ApplePay/defaultProps.ts

@@ -1,6 +1,4 @@
 const defaultProps = {
-    version: 3,
-
     // Transaction Information
     amount: { currency: 'USD', value: 0 },
 

src/components/ApplePay/utils.ts

@@ -14,3 +14,12 @@ export function normalizeAmount(props: ApplePayElementProps): PaymentAmount {
 
     return null;
 }
+
+export function resolveSupportedVersion(latestVersion) {
+    const versions = [];
+    for (let i = latestVersion; i > 0; i--) {
+        versions.push(i);
+    }
+
+    return versions.find(v => v && ApplePaySession.supportsVersion(v));
+}