Type mismatch in lastest version of @paypal/paypal-js and @paypal/react-paypal-js

[imash96]

🐞 Describe the Bug

Type mismatch in lastest version of @paypal/paypal-js and @paypal/react-paypal-js see the error message below for more details.

🔬 Minimal Reproduction

intall the latest version of "@paypal/paypal-js": "^8.0.0" and "@paypal/react-paypal-js": "^8.1.3".
Then under PayPalButtons the onApprove type and handlePayment type are mismatch
see error message for more details below

🌍 Environment

• Node.js/npm: 18 LTS
• OS: Win 11

➕ Additional Context

[{
	"resource": "/../src/modules/checkout/components/payment-button/index.tsx",
	"owner": "typescript",
	"code": "2322",
	"severity": 8,
	"message": "Type '(_data: OnApproveData, actions: OnApproveActions) => Promise<void>' is not assignable to type '(data: OnApproveData, actions: OnApproveActions) => Promise<void>'.\n  Types of parameters 'actions' and 'actions' are incompatible.\n    Type 'import(\"../node_modules/@paypal/react-paypal-js/node_modules/@paypal/paypal-js/types/components/buttons\").OnApproveActions' is not assignable to type 'import(\"../node_modules/@paypal/paypal-js/types/components/buttons\").OnApproveActions'.\n      Types of property 'order' are incompatible.\n        Type '{ capture: () => Promise<OrderResponseBody>; authorize: () => Promise<OrderResponseBody>; get: () => Promise<OrderResponseBody>; patch: () => Promise<...>; } | undefined' is not assignable to type '{ capture: () => Promise<{ create_time?: string | undefined; update_time?: string | undefined; } & { id?: string | undefined; payment_source?: { card?: { name?: string | undefined; last_digits?: string | undefined; ... 7 more ...; bin_details?: { ...; } | undefined; } | undefined; ... 10 more ...; venmo?: { ...; } |...'.\n          Type '{ capture: () => Promise<OrderResponseBody>; authorize: () => Promise<OrderResponseBody>; get: () => Promise<OrderResponseBody>; patch: () => Promise<...>; }' is not assignable to type '{ capture: () => Promise<{ create_time?: string | undefined; update_time?: string | undefined; } & { id?: string | undefined; payment_source?: { card?: { name?: string | undefined; last_digits?: string | undefined; ... 7 more ...; bin_details?: { ...; } | undefined; } | undefined; ... 10 more ...; venmo?: { ...; } |...'.\n            The types returned by 'capture()' are incompatible between these types.\n              Type 'Promise<OrderResponseBody>' is not assignable to type 'Promise<{ create_time?: string | undefined; update_time?: string | undefined; } & { id?: string | undefined; payment_source?: { card?: { name?: string | undefined; last_digits?: string | undefined; ... 7 more ...; bin_details?: { ...; } | undefined; } | undefined; ... 10 more ...; venmo?: { ...; } | undefined; } | u...'.\n                Type 'OrderResponseBody' is not assignable to type '{ create_time?: string | undefined; update_time?: string | undefined; } & { id?: string | undefined; payment_source?: { card?: { name?: string | undefined; last_digits?: string | undefined; ... 7 more ...; bin_details?: { ...; } | undefined; } | undefined; ... 10 more ...; venmo?: { ...; } | undefined; } | undefined...'.\n                  Type 'OrderResponseBody' is not assignable to type '{ id?: string | undefined; payment_source?: { card?: { name?: string | undefined; last_digits?: string | undefined; brand?: \"VISA\" | \"MASTERCARD\" | \"DISCOVER\" | \"AMEX\" | \"SOLO\" | \"JCB\" | ... 10 more ... | undefined; ... 6 more ...; bin_details?: { ...; } | undefined; } | undefined; ... 10 more ...; venmo?: { ...; } ...'.\n                    Types of property 'processing_instruction' are incompatible.\n                      Type 'string | undefined' is not assignable to type '\"ORDER_COMPLETE_ON_PAYMENT_APPROVAL\" | \"NO_INSTRUCTION\" | undefined'.\n                        Type 'string' is not assignable to type '\"ORDER_COMPLETE_ON_PAYMENT_APPROVAL\" | \"NO_INSTRUCTION\" | undefined'.",
	"source": "ts",
	"startLineNumber": 187,
	"startColumn": 11,
	"endLineNumber": 187,
	"endColumn": 20,
	"relatedInformation": [
		{
			"startLineNumber": 229,
			"startColumn": 5,
			"endLineNumber": 229,
			"endColumn": 14,
			"message": "The expected type comes from property 'onApprove' which is declared here on type 'IntrinsicAttributes & PayPalButtonsComponentProps'",
			"resource": "/../node_modules/@paypal/react-paypal-js/node_modules/@paypal/paypal-js/types/components/buttons.d.ts"
		}
	]
}]

[G4blessing7]

[{
"resource": "/../src/modules/checkout/components/payment-button/index.tsx",
"owner": "typescript",
"code": "2322",
"severity": 8,
"message": "Type '(_data: OnApproveData, actions: OnApproveActions) => Promise' is not assignable to type '(data: OnApproveData, actions: OnApproveActions) => Promise'.\n Types of parameters 'actions' and 'actions' are incompatible.\n Type 'import("../node_modules/@paypal/react-paypal-js/node_modules/@paypal/paypal-js/types/components/buttons").OnApproveActions' is not assignable to type 'import("../node_modules/@paypal/paypal-js/types/components/buttons").OnApproveActions'.\n Types of property 'order' are incompatible.\n Type '{ capture: () => Promise; authorize: () => Promise; get: () => Promise; patch: () => Promise<...>; } | undefined' is not assignable to type '{ capture: () => Promise<{ create_time?: string | undefined; update_time?: string | undefined; } & { id?: string | undefined; payment_source?: { card?: { name?: string | undefined; last_digits?: string | undefined; ... 7 more ...; bin_details?: { ...; } | undefined; } | undefined; ... 10 more ...; venmo?: { ...; } |...'.\n Type '{ capture: () => Promise; authorize: () => Promise; get: () => Promise; patch: () => Promise<...>; }' is not assignable to type '{ capture: () => Promise<{ create_time?: string | undefined; update_time?: string | undefined; } & { id?: string | undefined; payment_source?: { card?: { name?: string | undefined; last_digits?: string | undefined; ... 7 more ...; bin_details?: { ...; } | undefined; } | undefined; ... 10 more ...; venmo?: { ...; } |...'.\n The types returned by 'capture()' are incompatible between these types.\n Type 'Promise' is not assignable to type 'Promise<{ create_time?: string | undefined; update_time?: string | undefined; } & { id?: string | undefined; payment_source?: { card?: { name?: string | undefined; last_digits?: string | undefined; ... 7 more ...; bin_details?: { ...; } | undefined; } | undefined; ... 10 more ...; venmo?: { ...; } | undefined; } | u...'.\n Type 'OrderResponseBody' is not assignable to type '{ create_time?: string | undefined; update_time?: string | undefined; } & { id?: string | undefined; payment_source?: { card?: { name?: string | undefined; last_digits?: string | undefined; ... 7 more ...; bin_details?: { ...; } | undefined; } | undefined; ... 10 more ...; venmo?: { ...; } | undefined; } | undefined...'.\n Type 'OrderResponseBody' is not assignable to type '{ id?: string | undefined; payment_source?: { card?: { name?: string | undefined; last_digits?: string | undefined; brand?: "VISA" | "MASTERCARD" | "DISCOVER" | "AMEX" | "SOLO" | "JCB" | ... 10 more ... | undefined; ... 6 more ...; bin_details?: { ...; } | undefined; } | undefined; ... 10 more ...; venmo?: { ...; } ...'.\n Types of property 'processing_instruction' are incompatible.\n Type 'string | undefined' is not assignable to type '"ORDER_COMPLETE_ON_PAYMENT_APPROVAL" | "NO_INSTRUCTION" | undefined'.\n Type 'string' is not assignable to type '"ORDER_COMPLETE_ON_PAYMENT_APPROVAL" | "NO_INSTRUCTION" | undefined'.",
"source": "ts",
"startLineNumber": 187,
"startColumn": 11,
"endLineNumber": 187,
"endColumn": 20,
"relatedInformation": [
{
"startLineNumber": 229,
"startColumn": 5,
"endLineNumber": 229,
"endColumn": 14,
"message": "The expected type comes from property 'onApprove' which is declared here on type 'IntrinsicAttributes & PayPalButtonsComponentProps'",
"resource": "/../node_modules/@paypal/react-paypal-js/node_modules/@paypal/paypal-js/types/components/buttons.d.ts"
}
]
}]