TypeScript error: paypal.Buttons() is possibly undefined about paypal-js HOT 4 CLOSED

I think the types don't really make sense?

export interface PayPalNamespace {
    Buttons?: (
        options?: PayPalButtonsComponentOptions,
    ) => PayPalButtonsComponent;
    Marks?: (options?: PayPalMarksComponentOptions) => PayPalMarksComponent;
    Messages?: (
        options?: PayPalMessagesComponentOptions,
    ) => PayPalMessagesComponent;
    HostedFields?: PayPalHostedFieldsComponent;
    getFundingSources?: getFundingSources;
    isFundingEligible?: isFundingEligible;
    rememberFunding?: rememberFunding;
    FUNDING?: Record<string, FUNDING_SOURCE>;
    version: string;
}

Why is Buttons optional?

This makes the error go away but this shouldn't be necessary I would think? Or if it is, then the README should be updated at the very least?

if (paypal && paypal.Buttons) {
  try {
    await paypal.Buttons().render("#your-container-element");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}

Another way to get rid of the error:

if (paypal) {
  try {
    await paypal.Buttons?.().render("#your-container-element");
  } catch (error) {
    console.error("failed to render the PayPal Buttons", error);
  }
}

Notice the added ?. before the function call.

from paypal-js.

@kevinrenskers Technically any component on the global paypal object is optional. In your loadScript you aren't passing components which means by default we are including the buttons component.

If you were using CardFields or Messages though, those components wouldn't exist on paypal since the components weren't loaded.

Or if you had components: ['card-fields'], then Buttons wouldn't exist on paypal since the buttons component wasn't loaded.

We'll discuss this internally though, it may make sense to make all components on the paypal object required and rely on runtime errors/messaging to tell the developer that the component does not exist on the paypal object.

from paypal-js.

I think it's fine it's optional, but then the example code should deal with this?

from paypal-js.

Possibly, we will take a look. I'm wondering if there's a way to keep these optional but also not make every developer using TypeScript have to null check for each component. I guess it is technically safer, if for some reason a component didn't load, it would keep the PayPal JS SDK from taking down the rest of your web page.

We appreciate you bringing this up though!

from paypal-js.