refactor(apple pay session): update demo application data to use base…

…64 encoding

applepay-demo/.env.example

@@ -1,4 +1,6 @@
+# client demo environment variables
 VITE_APPLE_PAY_VALIDATE_MERCHANT_URL=https://your-merchant-domain.de/validate-merchant
 VITE_APPLE_PAY_PROCESS_PAYMENT_URL=https://your-merchant-domain.de/process-payment
+# server demo environment variables
 APPLE_PAY_MERCHANT_IDENTIFIER=merchant.de.your.project
 MERCHANT_DOMAIN_WITHOUT_PROTOCOL_OR_WWW=your-merchant-domain.de

applepay-demo/src/main.ts

@@ -1,5 +1,6 @@
 import {
   ApplePayButton,
+  encodeToBase64,
   PCPApplePaySession,
   PCPApplePaySessionConfig,
 } from 'pcp-client-javascript-sdk';
@@ -37,15 +38,7 @@ const init = async () => {
     validateMerchantURL: import.meta.env.VITE_APPLE_PAY_VALIDATE_MERCHANT_URL,
     processPaymentURL: import.meta.env.VITE_APPLE_PAY_PROCESS_PAYMENT_URL,
     // 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: btoa(
-      unescape(
-        encodeURIComponent(
-          JSON.stringify({
-            foo: 'bar',
-          }),
-        ),
-      ),
-    ),
+    applicationData: encodeToBase64(JSON.stringify({ foo: 'bar' })),
     paymentMethodSelectedCallback: async (paymentMethod) => {
       console.log('paymentMethodSelectedCallback', paymentMethod);
       return {