TypeScript

Pay Theory publishes a TypeScript declaration file, paytheory-sdk.d.ts, next to the SDK. It types window.paytheory, the input of every function, and every response. The SDK still loads as a browser script, and the file adds types only.

---

Download the declaration file

Download it from your SDK host. Take the SDK Import URL from the settings tab of the Pay Theory portal and replace index.js with paytheory-sdk.d.ts. For example, https://pt.sdk.paytheory.com/index.js becomes https://pt.sdk.paytheory.com/paytheory-sdk.d.ts.

Save the file in your project. Use your own SDK host in place of pt.sdk.paytheory.com:

terminal

curl --create-dirs -o src/types/paytheory-sdk.d.ts https://pt.sdk.paytheory.com/paytheory-sdk.d.ts

Download it again when the changelog lists SDK changes, so new parameters and responses show up in your types.

---

Add it to your project

The file declares window.paytheory globally and also exports each type. You can use it either way.

Use the global types

Add the file to include in your tsconfig.json. The declarations use Promise, so your project needs a target or lib of ES2015 or later. A minimal config:

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["DOM", "ES2020"],
    "strict": true
  },
  "include": ["src/**/*", "src/types/paytheory-sdk.d.ts"]
}

Calls through window.paytheory are now typed. The file types the paytheory property on window, not a bare paytheory global, so call the SDK as window.paytheory.

Import the types

Import a type wherever you need to name it:

checkout.ts

import type { TransactProps, TransactResult } from './types/paytheory-sdk';

---

Handle each transact result

Every response has a type. Check it and TypeScript narrows body to the matching shape:

checkout.ts

import type { TransactProps, TransactResult } from './types/paytheory-sdk';

export async function pay(): Promise<void> {
  const props: TransactProps = {
    amount: 1000,
    payorInfo: {
      first_name: 'Pat',
      last_name: 'Theodore',
      email: 'pat@example.com',
    },
  };

  const result: TransactResult = await window.paytheory.transact(props);

  switch (result.type) {
    case 'SUCCESS':
      console.log('Paid', result.body.payment_method_id);
      break;
    case 'FAILED':
      // The compact body has `reason`. The full body has `failure_reasons`.
      console.log('Declined', 'reason' in result.body ? result.body.reason.failure_text : result.body.failure_reasons);
      break;
    case 'CASH':
      console.log('Barcode', result.body.barcodeUrl);
      break;
    case 'ERROR':
      console.error(result.error);
      break;
  }
}

SUCCESS and FAILED bodies are the compact shape by default and the full Transaction when you pass expandedResponse: true. Check for a field only the full shape has, such as transaction_id, to tell them apart:

checkout.ts

if (result.type === 'SUCCESS' && 'transaction_id' in result.body) {
  console.log(result.body.transaction_id, result.body.status);
}

---

Main types

Type	Describes
PayTheoryPaymentFieldsInput	Input to payTheoryFields.
TransactProps	Input to transact.
TransactResult	Every response transact can return.
TokenizeProps	Input to tokenizePaymentMethod.
TokenizeResult	Every response tokenizePaymentMethod can return.
StateObject	Payload of stateObserver. Has a FieldState for every field key, mounted or not.
Transaction	Full transaction returned with expandedResponse: true.
PaymentMethod	Full payment method returned with expandedResponse: true.
PayTheoryButtonInput	Input to button.
PayTheoryQRInput	Input to qrCode.
CheckoutDetails	checkoutDetails for button and qrCode.
ErrorType	Codes an ERROR string can start with. See Error handling.
WalletTransactionPayload	Input to processWalletTransaction.
MessengerEventMap	Payload of each Messenger event.