feat(types): add types for onCancel callback (#793)

Author: gregjopa

.changeset/nine-tables-tell.md

@@ -0,0 +1,5 @@
+---
+"@paypal/paypal-js": minor
+---
+
+Add v6 types for onCancel() callback

packages/paypal-js/types/v6/components/base-component.d.ts

@@ -11,6 +11,10 @@ export type OnApproveDataOneTimePayments = {
     billingToken?: string;
 };
 
+export type OnCancelDataOneTimePayments = {
+    orderId?: string;
+};
+
 export type OnCompleteData = {
     paymentSessionState: "approved" | "canceled" | "error";
 };
@@ -34,7 +38,7 @@ export type OnErrorData = PayPalError;
  */
 export type BasePaymentSessionOptions = {
     onApprove: (data: OnApproveDataOneTimePayments) => Promise<void>;
-    onCancel?: () => void;
+    onCancel?: (data: OnCancelDataOneTimePayments) => void;
     onComplete?: (data: OnCompleteData) => void;
     onError?: (data: OnErrorData) => void;
     testBuyerCountry?: string;

packages/paypal-js/types/v6/components/paypal-legacy-billing-agreements.d.ts

@@ -15,12 +15,17 @@ export type OnApproveDataBillingAgreements = {
     payerId?: string;
 };
 
+export type OnCancelDataBillingAgreements = {
+    billingToken?: string;
+};
+
 export type PayPalLegacyBillingAgreementsSessionOptions = Omit<
     BasePaymentSessionOptions,
-    "onApprove"
+    "onApprove" | "onCancel"
 > & {
     billingToken?: string;
     onApprove: (data: OnApproveDataBillingAgreements) => Promise<void>;
+    onCancel?: (data: OnCancelDataBillingAgreements) => void;
 };
 
 export type PayPalLegacyBillingPresentationModeOptions =

packages/paypal-js/types/v6/components/paypal-payments.d.ts

@@ -74,6 +74,10 @@ export type OnApproveDataSavePayments = {
     payerId?: string;
 };
 
+export type OnCancelDataSavePayments = {
+    vaultSetupToken?: string;
+};
+
 export type PayPalOneTimePaymentSessionOptions = BasePaymentSessionOptions & {
     orderId?: string;
     onApprove?: (data: OnApproveDataOneTimePayments) => Promise<void>;
@@ -87,12 +91,13 @@ export type PayPalOneTimePaymentSessionOptions = BasePaymentSessionOptions & {
 
 export type SavePaymentSessionOptions = Omit<
     BasePaymentSessionOptions,
-    "onApprove"
+    "onApprove" | "onCancel"
 > & {
     clientMetadataId?: string;
     orderId?: never;
     vaultSetupToken?: string;
-    onApprove?: (data?: OnApproveDataSavePayments) => void;
+    onApprove?: (data: OnApproveDataSavePayments) => Promise<void>;
+    onCancel?: (data: OnCancelDataSavePayments) => void;
 };
 
 export type PayPalPresentationModeOptions =

packages/paypal-js/types/v6/index.d.ts

@@ -214,6 +214,7 @@ export {
     CreateOrderCallback,
     CreateOrderPromise,
     OnApproveDataOneTimePayments,
+    OnCancelDataOneTimePayments,
     OnCompleteData,
     OnErrorData,
 } from "./components/base-component";

packages/paypal-js/types/v6/tests/paypal-legacy-billing-agreements.test.ts

@@ -1,6 +1,7 @@
 import { loadCoreSdkScript } from "../../../src/v6";
 import type {
     OnApproveDataBillingAgreements,
+    OnCancelDataBillingAgreements,
     PayPalV6Namespace,
 } from "../index";
 
@@ -49,9 +50,16 @@ async function main() {
         return Promise.resolve();
     }
 
+    function onCancelCallback({ billingToken }: OnCancelDataBillingAgreements) {
+        console.log({
+            billingToken,
+        });
+    }
+
     const paypalPaymentSession =
         sdkInstance.createPayPalBillingAgreementWithoutPurchase({
             onApprove: onApproveCallback,
+            onCancel: onCancelCallback,
         });
 
     const createBillingToken = () =>

packages/paypal-js/types/v6/tests/paypal-payments.test.ts

@@ -1,5 +1,9 @@
 import { loadCoreSdkScript } from "../../../src/v6";
-import type { OnApproveDataOneTimePayments, PayPalV6Namespace } from "../index";
+import type {
+    OnApproveDataOneTimePayments,
+    OnCancelDataOneTimePayments,
+    PayPalV6Namespace,
+} from "../index";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 async function main() {
@@ -46,8 +50,15 @@ async function main() {
         return Promise.resolve();
     }
 
+    function onCancelCallback({ orderId }: OnCancelDataOneTimePayments) {
+        console.log({
+            orderId,
+        });
+    }
+
     const paypalPaymentSession = sdkInstance.createPayPalOneTimePaymentSession({
         onApprove: onApproveCallback,
+        onCancel: onCancelCallback,
     });
 
     const createOrder = () => Promise.resolve({ orderId: "ABC123" });