Update onApprove Param Type 👾 (#475)

* Update onApprove param type * add changeset * Create onApprove data type unique for card fields --------- Co-authored-by: Spencer Sablan <[email protected]>
paypal · Apr 2, 2024 · a33a65f · a33a65f
1 parent 999b653
commit a33a65f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/.changeset/olive-plums-begin.md b/.changeset/olive-plums-begin.md
@@ -0,0 +1,5 @@
+---
+"@paypal/paypal-js": patch
+---
+
+Updated the type for the card fields onApprove parameter.
diff --git a/packages/paypal-js/types/components/buttons.d.ts b/packages/paypal-js/types/components/buttons.d.ts
@@ -29,7 +29,7 @@ export type CreateSubscriptionActions = {
  /** Used to revise an existing subscription for client-side integrations. Accepts the same options as the request body of the [/v1/billing/subscription/{id}/revise api](https://developer.paypal.com/docs/api/subscriptions/v1/#subscriptions_revise). */
  revise: (
  subscriptionID: string,
- options: ReviseSubscriptionRequestBody
+ options: ReviseSubscriptionRequestBody,
  ) => Promise<string>;
  };
 };
@@ -46,7 +46,7 @@ export type OnClickActions = {
 
 export type OnApproveData = {
  billingToken?: string | null;
- facilitatorAccessToken: string;
+ facilitatorAccessToken?: string;
  orderID: string;
  payerID?: string | null;
  paymentID?: string | null;
@@ -211,14 +211,14 @@ export interface PayPalButtonsComponentOptions {
  */
  createOrder?: (
  data: CreateOrderData,
- actions: CreateOrderActions
+ actions: CreateOrderActions,
  ) => Promise<string>;
  /**
  * Called on button click to set up a recurring payment. [createSubscription docs](https://developer.paypal.com/docs/business/javascript-sdk/javascript-sdk-reference/#createsubscription).
  */
  createSubscription?: (
  data: Record<string, unknown>,
- actions: CreateSubscriptionActions
+ actions: CreateSubscriptionActions,
  ) => Promise<string>;
  /**
  * Save payment methods to charge payers after a set amount of time. For example, you can offer a free trial and charge payers after the trial expires. Payers don't need to be present when charged. No checkout required.
@@ -235,22 +235,22 @@ export interface PayPalButtonsComponentOptions {
  */
  onApprove?: (
  data: OnApproveData,
- actions: OnApproveActions
+ actions: OnApproveActions,
  ) => Promise<void>;
  /**
  * Called when the buyer cancels the transaction.
  * Often used to show the buyer a [cancellation page](https://developer.paypal.com/docs/business/checkout/add-capabilities/buyer-experience/#3-show-cancellation-page).
  */
  onCancel?: (
  data: Record<string, unknown>,
- actions: OnCancelledActions
+ actions: OnCancelledActions,
  ) => void;
  /**
  * Called when the button is clicked. Often used for [validation](https://developer.paypal.com/docs/checkout/integration-features/validation/).
  */
  onClick?: (
  data: Record<string, unknown>,
- actions: OnClickActions
+ actions: OnClickActions,
  ) => Promise<void> | void;
  /**
  * Catch all for errors preventing buyer checkout.
@@ -267,21 +267,21 @@ export interface PayPalButtonsComponentOptions {
  */
  onShippingChange?: (
  data: OnShippingChangeData,
- actions: OnShippingChangeActions
+ actions: OnShippingChangeActions,
  ) => Promise<void>;
  /**
  * Called when the buyer selects a new shipping option on PayPal.
  */
  onShippingOptionsChange?: (
  data: OnShippingOptionsChangeData,
- actions: OnShippingOptionsChangeActions
+ actions: OnShippingOptionsChangeActions,
  ) => Promise<void>;
  /**
  * Called when the buyer updates their shipping address on PayPal.
  */
  onShippingAddressChange?: (
  data: OnShippingAddressChangeData,
- actions: OnShippingAddressChangeActions
+ actions: OnShippingAddressChangeActions,
  ) => Promise<void>;
  /**
  * [Styling options](https://developer.paypal.com/docs/business/checkout/reference/style-guide/#customize-the-payment-buttons) for customizing the button appearance.

diff --git a/packages/paypal-js/types/components/card-fields.d.ts b/packages/paypal-js/types/components/card-fields.d.ts
@@ -36,6 +36,10 @@ export interface PayPalCardFieldsStyleOptions {
  "-webkit-transition"?: string;
 }
 
+export type CardFieldsOnApproveData = {
+ orderID: string;
+};
+
 export interface PayPalCardFieldsInputEvents {
  onChange?: (data: PayPalCardFieldsStateObject) => void;
  onFocus?: (data: PayPalCardFieldsStateObject) => void;
@@ -115,7 +119,7 @@ export interface PayPalCardFieldsIndividualField {
  clear: () => void;
  focus: () => void;
  removeAttribute: (
- name: "aria-invalid" | "aria-required" | "disabled" | "placeholder",
+ name: "aria-invalid" | "aria-required" | "disabled" | "placeholder"
  ) => Promise<void>;
  removeClass: (className: string) => Promise<void>;
  setAttribute: (name: string, value: string) => Promise<void>;
@@ -124,7 +128,7 @@ export interface PayPalCardFieldsIndividualField {
 
 export interface PayPalCardFieldsComponentOptions {
  createOrder: () => Promise<string>;
- onApprove: (err: Record<string, unknown>) => void;
+ onApprove: (data: CardFieldsOnApproveData) => void;
  onError: (err: Record<string, unknown>) => void;
  inputEvents?: PayPalCardFieldsInputEvents;
  style?: Record<string, PayPalCardFieldsStyleOptions>;
@@ -135,15 +139,15 @@ export interface PayPalCardFieldsComponent {
  isEligible: () => boolean;
  submit: () => Promise<void>;
  NameField: (
- options: PayPalCardFieldsIndividualFieldOptions,
+ options: PayPalCardFieldsIndividualFieldOptions
  ) => PayPalCardFieldsIndividualField;
  NumberField: (
- options: PayPalCardFieldsIndividualFieldOptions,
+ options: PayPalCardFieldsIndividualFieldOptions
  ) => PayPalCardFieldsIndividualField;
  CVVField: (
- options: PayPalCardFieldsIndividualFieldOptions,
+ options: PayPalCardFieldsIndividualFieldOptions
  ) => PayPalCardFieldsIndividualField;
  ExpiryField: (
- options: PayPalCardFieldsIndividualFieldOptions,
+ options: PayPalCardFieldsIndividualFieldOptions
  ) => PayPalCardFieldsIndividualField;
 }