Getting Started
Quick Start

10min
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 including React, Flutter, React Native, Unity, etc
Install
The Pay3 SDK is available at the public npm registry @pay3/sdk . It depends on the npm package ethers library for some of its read functions.  You can install and add to your dApp using the following command.
Shell
npm install @pay3/sdk --save
npm install @pay3/sdk --save
﻿
Initialization
Follow these instructions for an end to end signup and payment solution provided by Pay3. In case the dApp demands Payment only solution or Onboarding only solution follow the SDK reference section.
Import the package installed in the previous step using import directive. Create a instance of Pay3 by passing the parameters you received during onboarding. Reference﻿﻿
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" 
             });
// 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" 
             });
﻿
Connect your wallet
Connect opens Pay3 Web modal and present users with various login options including Email, Phone, Social and hundreds of Web3 wallets. Once login is successful, the JS SDK emits pay3-sdk-login-status event and the Web modal closes. Reference﻿   
index.js
pay3.connect();
pay3.connect();
﻿
Listen to login status change
Pay3 SDK emits real-time events to the dApp. Following sample shows how to listen to login status changed event. Pay3 uses npm module events to emit these events. Refer Event Listeners﻿ for all event types.
index.js
// Listen to login status changed.
pay3.on('pay3-sdk-login-status', async (event) => {
  console.log("[dApp] received pay3-sdk-login-status", event.data);
  const {isLoggedIn, address} = event.data; 
  
  // update your dApps state in realtime on change of isLoggedIn.  
});
// Listen to login status changed.
pay3.on('pay3-sdk-login-status', async (event) => {
  console.log("[dApp] received pay3-sdk-login-status", event.data);
  const {isLoggedIn, address} = event.data; 
  
  // update your dApps state in realtime on change of isLoggedIn.  
});
﻿
Get balance
Once wallet is connected, the SDK can fetch coin and ERC20 token balance using getBalance(). Here the SDK uses the rpcUrl passed to fetch the balance from network (try using rpc urls from Chainlist). Reference﻿ 
index.js
// Return users Matic / Eth blance in Wei
const coinBalanceInWei = await pay3.getBalance({ 
                            rpcURL: "https://your-rpc-url.com"});
// Return users Matic / Eth blance in Wei
const coinBalanceInWei = await pay3.getBalance({ 
                            rpcURL: "https://your-rpc-url.com"});
﻿
Buy digital asset
Pay3 Web Modal provides a comprehensive digital asset purchase buy flow. User is able to choose to buy the digital asset using their existing on-chain digital assets or Fiat. 
The request object requires a string requestId . This will be passed back along with the event emitted on completion of the buy flow.  Detailed documentation of openBuy is present at Reference﻿.
index.js
pay3.openBuy({requestId: "dapp-can-pass-unique-id"});
pay3.openBuy({requestId: "dapp-can-pass-unique-id"});
﻿
Get the transaction results
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 dApp in openBuy call. The receipt is a transaction receipt returned from the blockchain. Reference﻿ 
index.js
pay3.on('pay3-sdk-transaction-status', async (event) => {
  console.log("[dApp] received transaction status", event.data);
  const {status, orderId, requestId, receipt} = event.data;
});
pay3.on('pay3-sdk-transaction-status', async (event) => {
  console.log("[dApp] received transaction status", event.data);
  const {status, orderId, requestId, receipt} = event.data;
});
﻿
Show transaction history
Show the transaction list of the user within Pay3 Web Modal. User also ha an option to see details of a specific transaction and get help regarding a transaction from the modal. Reference﻿﻿
index.js
pay3.openTransactions();
pay3.openTransactions();
﻿
Disconnect the wallet
The dApp can provide a logout feature for its users using  the disconnect() function.  As in the case of connect() function, this action will emit loginStatusChanged event. Reference﻿﻿
index.js
pay3.disconnect();
pay3.disconnect();
﻿
﻿
Updated 25 Mar 2024
Did this page help you?
Onboarding
Terminologies