JS SDK Quick Start

5 min

Get started with Pay3 Javascript SDK with a few lines of code. Pay3 SDK is designed to work in any javascript-based client-side application and work with most of the popular frontend frameworks like React. Pay3 also provides SDKs for React Native, Flutter and Unity.

Install

The Pay3 JS SDK is available at the public npm registry @pay3/sdk . You can install and add to your App using the following command.

npm install @pay3/sdk --save

Initialization

Import the package installed in the previous step using import directive. Create a instance of Pay3 by passing the parameters you received during onboarding.

// Import Pay3 package
import { initPay3 } from '@pay3/sdk';

// New Instance
const pay3 = initPay3({ 
                hostname: "https://pay3-hostname-shared-by-pay3", 
                clientId: "client-uuid-shared-by-pay3",
                isPaymentMode: true 
         });

index.js

// Import Pay3 package
import { initPay3 } from '@pay3/sdk';

// New Instance
const pay3 = initPay3({ 
                hostname: "https://pay3-hostname-shared-by-pay3", 
                clientId: "client-uuid-shared-by-pay3",
                isPaymentMode: true 
         });

Crypto Checkout

This function opens Pay3 buy crypto modal. The Buy modal will guide the user through the digital asset purchase flow using user's own digital assets like Coins and ERC20 tokens. Detailed documentation of openCryptoCheckout is present at Transactions.

The request object requires a string requestId and the token which is a unique id generated by Pay3 backend on calling create Create Crypto Checkout Order.

// Opens Pay3 Crypto Checkout Modal
pay3.openCryptoCheckout({
  "requestId": requestId,
  "token": pay3CreatedTokenId
});

index.js

// Opens Pay3 Crypto Checkout Modal
pay3.openCryptoCheckout({
  "requestId": requestId,
  "token": pay3CreatedTokenId
});

Listen to transaction status events

On completion of the transaction flow an event is emitted with type pay3-sdk-transaction-status. The event data consists of fields status which is set to 'SUCCESS' when transaction is completed successfully. The orderId is Pay3's transaction ID and requestId is the unique string passed by the application in openCheckout call.

pay3.on('pay3-sdk-transaction-status', (event) => {
  console.log("[dApp] received transaction status", event.data);
  const {status, orderId, requestId, message} = event.data;
});

index.js

pay3.on('pay3-sdk-transaction-status', (event) => {
  console.log("[dApp] received transaction status", event.data);
  const {status, orderId, requestId, message} = event.data;
});