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

#36076 added apple_pay as paymentSource
mediaopt · Apr 19, 2024 · cbe46d3 · cbe46d3
2 parents 7d835d0 + 7a2d778
commit cbe46d3
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "paypal-commercetools-client",
-  "version": "0.1.22-alpha",
+  "version": "0.1.23-alpha",
   "private": false,
   "type": "module",
   "license": "MIT",

diff --git a/src/App.tsx b/src/App.tsx
@@ -21,7 +21,7 @@ import { GooglePay } from "./components/GooglePay";
 
 const CC_FRONTEND_EXTENSION_VERSION: string = "devmajidabbasi";
 const FRONTASTIC_SESSION: string =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiIxNWQzODg1MS0wNmU2LTQxZjktYTVjZC0wODE3ODZjNzA2NDkiLCJ3aXNobGlzdElkIjoiNGI4MzA2ZGEtZDU0OS00YTM1LWFlOTUtMWZlZTY2OWQzNDlhIiwiYWNjb3VudCI6eyJhY2NvdW50SWQiOiJmMjJhNGZlMy1jMmI4LTQ4MDEtODIwOC00MTRkMjA2MjBlMGIiLCJlbWFpbCI6Im1hamlkLmFiYmFzaUBtZWRpYW9wdC5kZSIsInNhbHV0YXRpb24iOiIiLCJmaXJzdE5hbWUiOiJNYWppZCIsImxhc3ROYW1lIjoiQWJiYXNpIiwiYmlydGhkYXkiOiIxOTg5LTAzLTA1VDAwOjAwOjAwLjAwMFoiLCJjb25maXJtZWQiOnRydWUsImFkZHJlc3NlcyI6W3siYWRkcmVzc0lkIjoiamJUSlhtM00iLCJmaXJzdE5hbWUiOiJNYWppZCIsImxhc3ROYW1lIjoiQWJiYXNpIiwic3RyZWV0TmFtZSI6IkhvY2hzdHJhXHUwMGRmZSAzNyIsInN0cmVldE51bWJlciI6IkhvY2hzdHJhXHUwMGRmZSAzNyIsInBvc3RhbENvZGUiOiIxMzM1NyIsImNpdHkiOiJERSIsImNvdW50cnkiOiJERSIsInBob25lIjoiNTk5MzU3NTYyIiwiaXNEZWZhdWx0QmlsbGluZ0FkZHJlc3MiOmZhbHNlLCJpc0RlZmF1bHRTaGlwcGluZ0FkZHJlc3MiOmZhbHNlfSx7ImFkZHJlc3NJZCI6ImtyelI3bTBRIiwiZmlyc3ROYW1lIjoiTWFqaWQiLCJsYXN0TmFtZSI6IkFiYmFzaSIsInN0cmVldE5hbWUiOiJDb3VudHkgU3QuIE1pYW1pIiwic3RyZWV0TnVtYmVyIjoiNDMyIiwicG9zdGFsQ29kZSI6IjMzMDE4IiwiY2l0eSI6IlVTIiwiY291bnRyeSI6IkRFIiwicGhvbmUiOiI1OTkzNTc1NjIiLCJpc0RlZmF1bHRCaWxsaW5nQWRkcmVzcyI6dHJ1ZSwiaXNEZWZhdWx0U2hpcHBpbmdBZGRyZXNzIjp0cnVlfV19fQ.e9nZgPcmdNO30jMIMMtWme3AJHZTy8H0ZzZphSjtKT4";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiI3NTlhZDdkMS1jZTNhLTRmZmUtYjc1MC1lODFmNWRiMTZiYTMiLCJhY2NvdW50Ijp7ImFjY291bnRJZCI6ImYyMmE0ZmUzLWMyYjgtNDgwMS04MjA4LTQxNGQyMDYyMGUwYiIsImVtYWlsIjoibWFqaWQuYWJiYXNpQG1lZGlhb3B0LmRlIiwic2FsdXRhdGlvbiI6IiIsImZpcnN0TmFtZSI6Ik1hamlkIiwibGFzdE5hbWUiOiJBYmJhc2kiLCJiaXJ0aGRheSI6IjE5ODktMDMtMDVUMDA6MDA6MDAuMDAwWiIsImNvbmZpcm1lZCI6dHJ1ZSwiYWRkcmVzc2VzIjpbeyJhZGRyZXNzSWQiOiJqYlRKWG0zTSIsImZpcnN0TmFtZSI6Ik1hamlkIiwibGFzdE5hbWUiOiJBYmJhc2kiLCJzdHJlZXROYW1lIjoiSG9jaHN0cmFcdTAwZGZlIDM3Iiwic3RyZWV0TnVtYmVyIjoiSG9jaHN0cmFcdTAwZGZlIDM3IiwicG9zdGFsQ29kZSI6IjEzMzU3IiwiY2l0eSI6IkRFIiwiY291bnRyeSI6IkRFIiwicGhvbmUiOiI1OTkzNTc1NjIiLCJpc0RlZmF1bHRCaWxsaW5nQWRkcmVzcyI6ZmFsc2UsImlzRGVmYXVsdFNoaXBwaW5nQWRkcmVzcyI6ZmFsc2V9LHsiYWRkcmVzc0lkIjoia3J6UjdtMFEiLCJmaXJzdE5hbWUiOiJNYWppZCIsImxhc3ROYW1lIjoiQWJiYXNpIiwic3RyZWV0TmFtZSI6IkNvdW50eSBTdC4gTWlhbWkiLCJzdHJlZXROdW1iZXIiOiI0MzIiLCJwb3N0YWxDb2RlIjoiMzMwMTgiLCJjaXR5IjoiVVMiLCJjb3VudHJ5IjoiREUiLCJwaG9uZSI6IjU5OTM1NzU2MiIsImlzRGVmYXVsdEJpbGxpbmdBZGRyZXNzIjp0cnVlLCJpc0RlZmF1bHRTaGlwcGluZ0FkZHJlc3MiOnRydWV9XX0sIndpc2hsaXN0SWQiOiJjZTM4MzVkMC02OWM0LTRlZWUtYTBjZC1hM2I4NjgyYTU2OTUifQ.iixjVD4AkF2io8SJZ-AS8-cVE8v-Xou_2EKV6YaptXE";
 
 function App() {
   const [choosenPaymentMethod, setChoosenPaymentMethod] = useState("");

diff --git a/src/components/ApplePay/ApplePayMask.tsx b/src/components/ApplePay/ApplePayMask.tsx
@@ -23,8 +23,8 @@ type ApplePayMaskComponentProps = ApplePayProps &
   CustomPayPalButtonsComponentProps;
 
 export const ApplePayMask: React.FC<ApplePayMaskComponentProps> = (props) => {
-  //const [logs, setLogs] = useState<string>();
-  //const [paymentId, setPaymentId] = useState<string>();
+  const [logs, setLogs] = useState<string>();
+  const [paymentId, setPaymentId] = useState<string>();
   const [error, setError] = useState<string>();
   const [isEligible, setIsEligible] = useState<boolean>(false);
   const [payConfig, setPayConfig] = useState<ApplepayConfig>();
@@ -135,24 +135,24 @@ export const ApplePayMask: React.FC<ApplePayMaskComponentProps> = (props) => {
     };
 
     session.onpaymentauthorized = async (event: any) => {
-      //setPaymentId("payment id: " + paymentInfo.id);
+      setPaymentId("payment id: " + paymentInfo.id);
 
       try {
         const orderId = await handleCreateOrder({
-          paymentSource: "paypal",
+          paymentSource: "apple_pay",
           storeInVault: save.current?.checked,
         });
-        //setLogs("orderId: " + orderId);
+        setLogs("orderId: " + orderId);
 
         const confirmResult = await pay.confirmOrder({
           orderId: orderId,
           token: event.payment.token,
           billingContact: event.payment.billingContact,
         });
-        //setLogs("confirmResult: " + confirmResult);
+        setLogs("confirmResult: " + confirmResult);
 
         const captureResult = await handleOnApprove({ orderID: orderId });
-        //setLogs("captureResult: " + captureResult);
+        setLogs("captureResult: " + captureResult);
 
         session.completePayment(applePaySession.STATUS_SUCCESS);
       } catch (error) {
@@ -196,12 +196,16 @@ export const ApplePayMask: React.FC<ApplePayMaskComponentProps> = (props) => {
               <div className="h-9">
                 <button
                   className={`${hostedFieldClasses.hostedFieldsPayButtonClasses} float-left`}
-                  onClick={() =>
-                    handleCreateOrder({
-                      paymentSource: "paypal",
+                  onClick={() => {
+                    setPaymentId("payment id: " + paymentInfo.id);
+
+                    const orderId = handleCreateOrder({
+                      paymentSource: "apple_pay",
                       vaultId: vaultId,
-                    })
-                  }
+                    });
+
+                    setLogs("orderId: " + orderId);
+                  }}
                 >
                   Pay
                 </button>

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -27,7 +27,7 @@ export type CreateOrderRequest = {
 };
 
 export type CreateOrderData = {
-  paymentSource?: FUNDING_SOURCE | "google_pay";
+  paymentSource?: FUNDING_SOURCE | "google_pay" | "apple_pay";
   storeInVault?: boolean;
   vaultId?: string;
   verificationMethod?: ThreeDSVerification;