Merge pull request #91 from mediaopt/feature/36076-apple-pay

#36076 Added applePayDisplayName to ApplePay component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paypal-commercetools-client",
-  "version": "0.1.18-alpha",
+  "version": "0.1.19-alpha",
   "private": false,
   "type": "module",
   "license": "MIT",

src/App.tsx

@@ -200,6 +200,7 @@ function App() {
           components: "applepay,buttons",
           buyerCountry: "US",
         }}
+        applePayDisplayName="My Store"
       />
     ),
     Venmo: (

src/components/ApplePay/ApplePay.tsx

@@ -3,9 +3,9 @@ import React from "react";
 import { RenderTemplate } from "../RenderTemplate";
 import { ApplePayButton } from "./ApplePayButton";
 
-import { SmartComponentsProps } from "../../types";
+import { ApplePayComponentsProps } from "../../types";
 
-export const ApplePay: React.FC<SmartComponentsProps> = ({
+export const ApplePay: React.FC<ApplePayComponentsProps> = ({
   options,
 
   createPaymentUrl,

src/components/ApplePay/ApplePayButton.tsx

@@ -6,9 +6,12 @@ import { useHandleCreatePayment } from "../../app/useHandleCreatePayment";
 
 import { ApplePayMask } from "./ApplePayMask";
 
-type CustomPayPalButtonsComponentProps = PayPalButtonsComponentProps & {
-  enableVaulting?: boolean;
-};
+import { ApplePayProps } from "../../types";
+
+type CustomPayPalButtonsComponentProps = ApplePayProps &
+  PayPalButtonsComponentProps & {
+    enableVaulting?: boolean;
+  };
 
 export const ApplePayButton: React.FC<CustomPayPalButtonsComponentProps> = (
   props

src/components/ApplePay/ApplePayMask.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 
 import loadScript from "../../app/loadScript";
 import { usePayment } from "../../app/usePayment";
-import { CustomPayPalButtonsComponentProps } from "../../types";
+import { CustomPayPalButtonsComponentProps, ApplePayProps } from "../../types";
 import { ERROR_TEXT_STYLE } from "../../styles";
 
 declare const window: any;
@@ -40,9 +40,10 @@ type Applepay = {
   validateMerchant: ({}: ApplepayValidateMerchant) => Promise<ApplepayValidateMerchantResult>;
 };
 
-export const ApplePayMask: React.FC<CustomPayPalButtonsComponentProps> = (
-  props
-) => {
+type ApplePayMaskComponentProps = ApplePayProps &
+  CustomPayPalButtonsComponentProps;
+
+export const ApplePayMask: React.FC<ApplePayMaskComponentProps> = (props) => {
   const [logs, setLogs] = useState<string>();
   const [paymentId, setPaymentId] = useState<string>();
 
@@ -53,6 +54,8 @@ export const ApplePayMask: React.FC<CustomPayPalButtonsComponentProps> = (
 
   const { paymentInfo, handleCreateOrder, handleOnApprove } = usePayment();
 
+  const { applePayDisplayName } = props;
+
   useEffect(() => {
     loadScript("https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js").then(
       async () => {
@@ -105,7 +108,7 @@ export const ApplePayMask: React.FC<CustomPayPalButtonsComponentProps> = (
       currencyCode: paymentInfo.currency,
       requiredBillingContactFields: ["postalAddress"],
       total: {
-        label: "Demo",
+        label: applePayDisplayName,
         type: "final",
         amount: paymentInfo.amount,
       },
@@ -119,7 +122,7 @@ export const ApplePayMask: React.FC<CustomPayPalButtonsComponentProps> = (
       try {
         const validateResult = await pay.validateMerchant({
           validationUrl: event.validationURL,
-          displayName: "My Store",
+          displayName: applePayDisplayName,
         });
 
         console.log("onvalidatemerchant validateResult", validateResult);

src/types/index.ts

@@ -173,6 +173,12 @@ export type CustomPayPalButtonsComponentProps = Omit<
 export type SmartComponentsProps = CustomPayPalButtonsComponentProps &
   GeneralComponentsProps;
 
+export type ApplePayProps = {
+  applePayDisplayName: string;
+};
+
+export type ApplePayComponentsProps = ApplePayProps & SmartComponentsProps;
+
 export type CartInformation = {
   account: {
     email: string;