Electronic payment giant PayPal has added TypeScript type definitions into its JavaScript SDK, paypal-js npm package.

TypeScript types will allow JavaScript developers to enjoy the same benefits that TypeScript users have, such as detailed type definitions, direct links to documentation, and type hints. With all of this now at their disposal, app developers will be, “much more productive when writing applications,” explained Jamund Ferguson, Paypal developer relations manager, in a recent blog post.

PayPal’s type definitions are available for import together as part of the loadScript() method or individually using the import type functionality. The following post will highlight some of the features of the package and provide insight on how to, “make use of the type definitions to speed up the development of your PayPal applications.”

The package install is the same whether using the loadScript() or import type functionality.

npm install @paypal/paypal-js

Type Definitions with LoadScript

The paypal-js module allows for easy loading of the PayPal JavaScript SDK asynchronously. The process is as follows:

  • The paypal-js module provides the loadScript() method.
  • The loadScript() injects the SDK <script> tag onto the page.
  • When the script tag is injected onto the page, a promise is returned.
  • The promise resolves after the script is loaded successfully.

Tasks such as handing errors and reloading the script when parameters change (currency changes for example) are much easier using this utility.

The image below represents a basic usage example.

TypeScript Hints

In both TypeScript and JavaScript files, TypeScript autocompletion appears as soon as Paypal is typed inside of the loadScript callback. Autocompletion will show all possible priorities on the PayPal namespace (with navigation available for more details on each).

TypeScript type definitions outline what is expected for the input and what the expected return value will be. In the example above, this is seen in the drop-down menu’s highlighted option for the create order button. Just beside it there is a second menu showing exactly what is expected inside of the create order button.

createOrder option takes a callback that can take in two parameters: a Record and CreateOrderActions. The Record is a standard JavaScript object with the key being a string and the value listed as unknown meaning it can be anything. This will return a Promise that holds the order id, a string value. The second parameter, CreateOrderActions is another object.

The IDE will notate an error if anything is missing or typed in incorrectly.

Hovering over the text will provide detailed information about missing arguments and hitting cmd-click on the createOrder method will bring the developer directly to the TypeScript definition.

Opting in to Additional Functionality

Though the JavaScript SDK type definitions are daily comprehensive, the supported methods depend on the components query param passed into the JavaScript SDK <script> tag. Buttons is the only supported method by default. The script configuration guide has more details on selecting necessary components.

TypeScript Definitions without LoadScript

The loadScript() method isn’t required to enable TypeScript definitions in a user’s application. Using the import type syntax rather than the more common import syntax will bypass bringing the dependency into an application and grant access to the benefits of TypeScript at build-time without adding to the bundle size.

Import and import type from the paypal-js module both provide access to the type definitions for the loadScript module and the global window.paypal variable as well.

All types maintained for the PayPal JavaScript SDK are exported directly from the root of the paypal-js module and can be imported individually.

In the example above, both the myIntent and postal_code properties are mistyped prompting a similar error to the one in the image below. This illustrates similarities between type definition functionalities when using the import and import type syntax.

There are dozens of PayPal-related types, each with their own extensive documentation about their properties and purpose, available for use in applications.

Feature image via Shutterstock.