Accessing types from Typescript

[bggolding]

I can’t seem to import some of the types used internally in the react-paypal-js definitions and I can’t seem to work out why. What I would like to do is:

    const onApprove = (data: OnApproveData, actions: OnApproveActions) => {
        return actions.order.capture().then((details: CaptureOrderResponseBody) => {
            const {payer} = details;
            […]
            setSucceeded(true);
        }).catch((err) => setPaypalErrorMessage("Something went wrong."));
    };
[…]
        <PayPalButtons style={{layout: "vertical"}}
                       createOrder={(data, actions) => [...]}
                       onApprove={onApprove}/>

No amount of kicking and goading seems to want to let me to import type definitions for OnApproveData, OnApproveActions or CaptureOrderResponseBody even though I can see them in the .d.ts files and they seem to be exported. Is there some specific way that they need to be imported?

[bggolding]

I finally got something to build using:

import {CaptureOrderResponseBody} from "@paypal/paypal-js/types/apis/orders";
import {OnApproveData, OnApproveActions} from "@paypal/paypal-js/types/components/buttons";

That looks arcane and brittle though, relying on the internal structure of the package not changing. Is there a better way?

Also, Payer isn’t even marked as external in the type definitions. Is that right?

[ValentinH]

Just faced the same and had to additionally install @paypal/paypal-js just to get the types.

It would be great if this package would re-export all required types at the index level like it's done for FUNDING.

[gregjopa]

Installing paypal-js is the current way to get all the TypeScript types (https://github.com/paypal/paypal-js#typescript-support).

Also, Payer isn’t even marked as external in the type definitions. Is that right?

@bggolding I updated paypal-js to export Payer and it's included in the paypal-js@3.1.10 release.

It would be great if this package would re-export all required types at the index level like it's done for FUNDING.

@ValentinH I'm open to this idea and would gladly accept a PR. I think we would need some way to namespace/group the types when exporting 🤔

[ValentinH]

I'll try to have a look tomorrow then 👍

[ValentinH]

I just had a look and I'm not sure how to handle namespacing 🤔

[gregjopa]

@ValentinH thanks for having a look. I'm not sure how to better solve so lets stick with recommending that folks import in the types from paypal-js (https://github.com/paypal/paypal-js/tree/main/types).

Any changes to the folder structure of the types would be a major version bump of paypal-js since it would be a breaking change.

[developerasun]

Just bumped into this while buliding nextjs app with paypal.

Didn't want to install @paypal/paypal-js cuz that would bloat the app easily.

Digged into @paypal/react-js type declaration,

import type { ReactNode } from "react";
import type { PayPalButtonsComponentOptions } from "@paypal/paypal-js";
export interface PayPalButtonsComponentProps extends PayPalButtonsComponentOptions {
    /**
     * Used to re-render the component.
     * Changes to this prop will destroy the existing Buttons and render them again using the current props.
     */
    forceReRender?: unknown[];
    /**
     * Pass a css class to the div container.
     */
    className?: string;
    /**
     * Disables the buttons.
     */
    disabled?: boolean;
    /**
     * Used to render custom content when ineligible.
     */
    children?: ReactNode;
}

and githubs and came up with below workaround.

Types for parameters seems to work properly so try this :)

import { PayPalButtonsComponentProps } from "@paypal/react-paypal-js";

  const onApprove: PayPalButtonsComponentProps["onApprove"] = (data, actions) => {
    return new Promise((resolve, reject) => {
      // codes
    })
  }

got the idea from #126