Use the TypeScript SDK

Applies to:Developers

Payabli offers a Software Development Kit (SDK) for the TypeScript programming language. The TypeScript SDK can be installed in your projects to support app development and provide type safety when calling Payabli’s APIs. Most development environments can use the SDK to generate code suggestions and inline documentation. See the @payabli/sdk-node package for more information.

Dependencies

Before you begin, make sure you have the following installed on your machine:

Use the SDK

This section shows you how to install and use the Payabli SDK in a new Node.js project. The example code shows how to use the SDK to make a transaction with the moneyIn.getpaid method. The moneyIn.getpaid method calls the MoneyIn/getpaid endpoint. See the SDK reference for a full list of methods.

Method names in the SDK correspond to endpoint names in the API reference. For example: the notification.addNotification method calls the POST Notification endpoint.

Create a new Node.js project

Open your terminal and run the following commands to create a new Node.js project:

$ mkdir my-payabli-app
> cd my-payabli-app
> npm init -y

Set the type to module

Open the package.json file in your code editor and set the "type" field to "module":

1 {
2     "type": "module"
3 }

Install the SDK

Run the following command to install the Payabli SDK:

$ npm install @payabli/sdk-node

Create a new file

Create a new file called index.ts in the root of your my-payabli-app directory:

$ touch index.ts

Open the index.ts file in your code editor.

Make a transaction

The interactive walkthrough displays code examples alongside step-by-step explanations.

Follow the walkthrough to use the SDK in your TypeScript code.

Loading walkthrough content

Loading walkthrough...

/// Import the client

Import the Payabli SDK to make it available in your code.

1 // index.ts
2 import { PayabliClient } from '@payabli/sdk-node';

/// Initialize the client

Create an authenticated client instance with your API key. This client has methods that call Payabli’s API endpoints.

1 // index.ts
2 import { PayabliClient } from '@payabli/sdk-node';
3 
4 const client = new PayabliClient({ apiKey: "REPLACE_WITH_YOUR_API_KEY" });

/// Define the entrypoint

Define your entrypoint. Get this value from your Payabli account.

1 // index.ts
2 import { PayabliClient } from '@payabli/sdk-node';
3 
4 const client = new PayabliClient({ apiKey: "REPLACE_WITH_YOUR_API_KEY" });
5 
6 const entryPoint = "REPLACE_WITH_YOUR_ENTRYPOINT";

/// Build the payment request

Construct a request object that contains all the necessary fields to process a transaction. Include payment details, a payment method, and customer data.

-29

1 // index.ts
2 import { PayabliClient } from '@payabli/sdk-node';
3 
4 const client = new PayabliClient({ apiKey: "REPLACE_WITH_YOUR_API_KEY" });
5 
6 const entryPoint = "REPLACE_WITH_YOUR_ENTRYPOINT";
7 
8 const request = {
9   body: {
10     customerData: {
11       customerId: 4440,
12     },
13     entryPoint,
14     ipaddress: "255.255.255.255",
15     paymentDetails: {
16       serviceFee: 0,
17       totalAmount: 100,
18     },
19     paymentMethod: {
20       cardcvv: "999",
21       cardexp: "02/27",
22       cardHolder: "Kassiane Cassian",
23       cardnumber: "4111111111111111",
24       cardzip: "12345",
25       initiator: "payor",
26       method: "card",
27     },
28   },
29 };

/// Execute the transaction

Call moneyIn.getpaid() to process the transaction. The client calls Payabli’s POST /MoneyIn/getpaid endpoint.

1 // index.ts
2 import { PayabliClient } from '@payabli/sdk-node';
3 
4 const client = new PayabliClient({ apiKey: "REPLACE_WITH_YOUR_API_KEY" });
5 
6 const entryPoint = "REPLACE_WITH_YOUR_ENTRYPOINT";
7 
8 const request = {
9   body: {
10     customerData: {
11       customerId: 4440,
12     },
13     entryPoint,
14     ipaddress: "255.255.255.255",
15     paymentDetails: {
16       serviceFee: 0,
17       totalAmount: 100,
18     },
19     paymentMethod: {
20       cardcvv: "999",
21       cardexp: "02/27",
22       cardHolder: "Kassiane Cassian",
23       cardnumber: "4111111111111111",
24       cardzip: "12345",
25       initiator: "payor",
26       method: "card",
27     },
28   },
29 };
30 
31 const result = await client.moneyIn.getpaid(request);

/// Show the result

Log the transaction response. Check the output to see if the transaction was successful.

1 // index.ts
2 import { PayabliClient } from '@payabli/sdk-node';
3 
4 const client = new PayabliClient({ apiKey: "REPLACE_WITH_YOUR_API_KEY" });
5 
6 const entryPoint = "REPLACE_WITH_YOUR_ENTRYPOINT";
7 
8 const request = {
9   body: {
10     customerData: {
11       customerId: 4440,
12     },
13     entryPoint,
14     ipaddress: "255.255.255.255",
15     paymentDetails: {
16       serviceFee: 0,
17       totalAmount: 100,
18     },
19     paymentMethod: {
20       cardcvv: "999",
21       cardexp: "02/27",
22       cardHolder: "Kassiane Cassian",
23       cardnumber: "4111111111111111",
24       cardzip: "12345",
25       initiator: "payor",
26       method: "card",
27     },
28   },
29 };
30 
31 const result = await client.moneyIn.getpaid(request);
32 
33 console.log(result);

Run the app

Run the app with the following command:

$ tsx index.ts

Check the result

Check the console output for the result of the transaction.

1     {
2         responseText: "Success",
3         isSuccess: true,
4         pageIdentifier: null,
5         responseData: {
6             authCode: "TAS003",
7             referenceId: "255-67bc92c141e24f474f60c1968fcba0cd",
8             resultCode: 1,
9             resultText: "Approved",
10             avsResponseText: "No Match, No address or ZIP match",
11             cvvResponseText: "CVV2/CVC2 match",
12             customerId: 4440,
13             methodReferenceId: null,
14         },
15     }

In production, we recommend that you pass a stored method ID to the paymentMethod object instead of card details. See more information in Tokenization Overview.

SDK example app

The SDK example app is a basic web app built with the Payabli TypeScript SDK. It demonstrates how to manage customers and use the temporary token flow with the SDK. The code is publicly available in the example repository.

Set up the app

Follow these steps to set up the SDK example app on your local machine:

Clone the repository

Open your terminal and run the following command to clone the SDK example app repository:

$ git clone https://github.com/payabli/examples

Navigate to the app directory

In your terminal, navigate to the directory containing the SDK example app:

$ cd examples/sdk-example

Install the dependencies

Install the dependencies with the following command:

$ npm install

Copy the environment template

Copy the.env.template file to a new file called .env:

$ cp .env.template .env

Fill in your environment variables

Open the .env file in your code editor. Set PAYABLI_KEY to a private API token, PAYABLI_ENTRY to your Payabli entrypoint, PUBLIC_PAYABLI_TOKEN to a public API token, and PUBLIC_PAYABLI_ENTRY to your Payabli entrypoint. The entry values should be the same for both public and private, but the API keys are different:

$   # your Payabli Private API token
>   PAYABLI_KEY="o.Oim...Mekgjw="
>   # your Payabli Public API token
>   PUBLIC_PAYABLI_TOKEN="o.Oim...Mekgjw="
>   # your Payabli entrypoint
>   PAYABLI_ENTRY="41xxxxxa7e"
>   # your Payabli entrypoint (same as above)
>   PUBLIC_PAYABLI_ENTRY="41xxxxxa7e"

Start the development server

Run this command to start the development server, and open the app in your browser:

$ npm run dev

Use the app

The SDK example app has three pages:

Create Customer - Create a new customer in the Payabli entrypoint.
List Customers - View a list of all customers in the Payabli entrypoint.
Make Transaction - Make a transaction using the temporary token flow.

Create customer

The Create Customer page has a form that allows you to create a new customer. Fill in the form with the customer’s information and click the “Create” button. If the customer is created successfully, a green success message appears below the button.

List customers

The List Customers page has a table of all customers in the entrypoint. You can view the customer’s information, including their name, email address, and ZIP Code. Click the “X” button on the right side of a customer’s row to delete the customer. If the customer is deleted successfully, the row is removed from the table.

Make transaction

The Make Transaction page contains an EmbeddedMethod UI component using the temporary token flow. Fill in the form with payment information and click the “Process” button when the payment information is valid. The app performs these steps:

The embedded component saves the payment method as a temporary token and sends it to the server.
The server converts the temporary token to a permanent token with the POST TokenStorage/add endpoint.
The server uses the permanent token to make a transaction with the POST MoneyIn/getpaid endpoint.

If everything is successful, a green success message appears below the embedded component. See Extend embedded components with the temporary token flow for more information.