refactor(apple pay session): add prop for merchant identifier to config

applepay-demo/src/main.ts

@@ -36,10 +36,11 @@ const init = async () => {
     ],
     validateMerchantURL: import.meta.env.VITE_APPLE_PAY_VALIDATE_MERCHANT_URL,
     processPaymentURL: import.meta.env.VITE_APPLE_PAY_PROCESS_PAYMENT_URL,
-    merchantValidationData: {
-      merchantIdentifier: import.meta.env.VITE_APPLE_PAY_MERCHANT_IDENTIFIER,
+    merchantIdentifier: import.meta.env.VITE_APPLE_PAY_MERCHANT_IDENTIFIER,
+    // This data is completely custom and needs to be sent to your server for merchant validation and must be used as a base64 encoded string here for the apple pay server
+    applicationData: JSON.stringify({
       foo: 'bar',
-    },
+    }),
     paymentMethodSelectedCallback: async (paymentMethod) => {
       console.log('paymentMethodSelectedCallback', paymentMethod);
       return {

src/interfaces/PCPApplePay.interfaces.ts

@@ -66,6 +66,10 @@ export interface PCPApplePaySessionConfig
    * The URL your server must use to process the payment.
    */
   processPaymentURL: string;
+  /**
+   * The Apply Pay merchant identifier. e.g. 'merchant.de.your.project'
+   */
+  merchantIdentifier: string;
   /**
    * Callback function that is called when the user selects a new payment method
    * @param {ApplePayJS.ApplePayPaymentMethod} paymentMethod
@@ -102,10 +106,6 @@ export interface PCPApplePaySessionConfig
    * Callback function that is called when the payment UI is dismissed.
    */
   cancelCallback?: () => void;
-  /**
-   * Any additional data that you need to pass to the server for your validation.
-   */
-  merchantValidationData: Record<string, string>;
   /**
    * Error callback function that is called when an error occurs.
    * @param {ErrorType} type

src/lib/PCPApplePaySession.ts

@@ -203,7 +203,7 @@ export class PCPApplePaySession {
       },
       body: JSON.stringify({
         validationURL,
-        ...this.config!.merchantValidationData,
+        merchantIdentifier: this.config!.merchantIdentifier,
       }),
     });
 

src/tests/PCPApplePaySession.spec.ts

@@ -54,10 +54,10 @@ describe('PCPApplePaySession', () => {
     },
     validateMerchantURL: 'https://your-merchant-domain.de/validate-merchant',
     processPaymentURL: 'https://your-merchant-domain.de/process-payment',
-    merchantValidationData: {
-      merchantIdentifier: 'merchant.de.your.project',
+    merchantIdentifier: 'merchant.de.your.project',
+    applicationData: JSON.stringify({
       foo: 'bar',
-    },
+    }),
     paymentMethodSelectedCallback: paymentMethodSelectedCallbackMockFn,
     couponCodeChangedCallback: couponCodeChangedCallbackMockFn,
     shippingMethodSelectedCallback: shippingMethodSelectedCallbackMockFn,
@@ -182,7 +182,8 @@ describe('PCPApplePaySession', () => {
               },
               body: JSON.stringify({
                 validationURL: 'mock-url',
-                ...mockApplePaySessionConfig.merchantValidationData,
+                merchantIdentifier:
+                  mockApplePaySessionConfig.merchantIdentifier,
               }),
             },
           );

src/tests/crypto.spec.ts

@@ -1,6 +1,7 @@
-import { describe, expect, it, beforeAll } from 'vitest';
-import { Request, createHash } from '../lib/crypto.js';
 import nodeCrypto from 'node:crypto';
+import { beforeAll, describe, expect, it } from 'vitest';
+import { Request } from '../interfaces/index.js';
+import { createHash } from '../lib/crypto.js';
 
 describe('crypto', () => {
   beforeAll(() => {