Pay3 Javascript SDK
Transactions

11min
pay3.openBuy(transactionObj, provider)
This function opens Pay3 buy crypto modal. The Buy modal will guide the user through the digital asset purchase flow.  This function accepts optional second parameter provider for the client that is configured in Payment only mode.  
Once the purchase is completed sdk will publish pay3-sdk-transaction-status﻿ event.
Parameters
transactionObj
requestId (Type string):  Dapp needs to provide a unique string for every new buy request triggered by the user.  This will be passed back to the dApp along with completed event data.
nftData (Type Object, Optional): This is an optional parameter. Can be used to improve presentation of NFT buy flow. Keys expected in this object are:
The address is the NFT collection address. Used for fetching Image of NFT. 
The nftId is the unique ID of the NFT within the collection. Used for fetching Image of NFT.
The nftName is the name of the NFT. This will be used in the buy flow to keep user context.
The nftType param helps in classifying NFT based on the ERC type. It can take number values 721 or 1155
destination (Type Object, Optional): Destination object can be optionally passed to Pay3 payment module if the dApp needs the deposit of the purchased currency in address other than user address. Keys expected in this object are: 
The address is the destination wallet address used in the purchase. For transaction safety, we need to whitelist possible destination addresses during onboarding.
The currency is Pay3's unique string ID denoting the token that needs to be purchased. Example value are matic_mumbai, weth_polygon. 
The amount in Etherium user needs to purchase. If the value is passed user edit this within Pay3 buy flow.
provider(Type Web3 Provider, Optional): In Payments Only mode, dApp can provide a Web3 provider from the user's connected wallet. Refer sample code to get provider﻿ for example code. In this mode Pay3 Web SDK will provide transaction related features. The digital assets will be managed within the wallet connected to the dApp. The provider object needs at least following functions
getSigner()
getNetwork() 
listAccounts()
Game token Buy flow with integrated Pay3 Wallet 
index.js
import {v4 as uuidv4} from 'uuid';

// Genearte a uniqueId and pass in the buy request. This id will be used to uniquely identify the buy request. 
const requestId = uuidv4();

// Trigger Pay3 Buy flow for game token setup during Onboarding. User will be allowed to select the amount. On succesful transaction the resulting amount of game token will be deposited to user's wallet 
pay3.openBuy({requestId});
import {v4 as uuidv4} from 'uuid';

// Genearte a uniqueId and pass in the buy request. This id will be used to uniquely identify the buy request. 
const requestId = uuidv4();

// Trigger Pay3 Buy flow for game token setup during Onboarding. User will be allowed to select the amount. On succesful transaction the resulting amount of game token will be deposited to user's wallet 
pay3.openBuy({requestId});
﻿
Token buy flow where destination address is Game's wallet address 
index.js
const transactionObj = {
  "requestId": requestId, // unique id string to identify buy request
  "destination": {
    "address":  '0x9ab51f0bbfabbb5788A442BDF88e38409B991498', // One of the whitelisted address of the DApp
    "currency": "matic_mumbai", // tokenId that required to be purchease
    "amount": 1.25 // Amount of currency to be purchased
  }
};

// Opens Pay3 Buy modal
await pay3.openBuy(transactionObj);
const transactionObj = {
  "requestId": requestId, // unique id string to identify buy request
  "destination": {
    "address":  '0x9ab51f0bbfabbb5788A442BDF88e38409B991498', // One of the whitelisted address of the DApp
    "currency": "matic_mumbai", // tokenId that required to be purchease
    "amount": 1.25 // Amount of currency to be purchased
  }
};

// Opens Pay3 Buy modal
await pay3.openBuy(transactionObj);
﻿
Payments Only mode - NFT buy flow where Game transfer's NFT to its user on receiving the amount passed in destination object.
index.js
const transactionObj = {
    "requestId": requestId, // unique id string to identify buy request
    "nftData": { // Object used for fetching image of NFT and title
      "address": "0x9E0199F5FE4D0a1e6cD8a2b50718BC3DcCcEB058", // Collection Address 
      "nftId": 158, // NFT ID that user wants to purchase
      "nftName": "The Decolife Coffee Machine",
      "nftType":  721
    },
    "destination": {
      "address":  "0x9ab51f0bbfabbb5788A442BDF88e38409B991498", // Destination address where the WETH will be deposited
      "currency": "matic_mumbai", // This currency will be depoisted in desitnation wallet address  
      "amount": 1.15 // Amount of currency in eth
    }
};

// provider is required in payments only mode 
await pay3.openBuy(transactionObj, provider);
const transactionObj = {
    "requestId": requestId, // unique id string to identify buy request
    "nftData": { // Object used for fetching image of NFT and title
      "address": "0x9E0199F5FE4D0a1e6cD8a2b50718BC3DcCcEB058", // Collection Address 
      "nftId": 158, // NFT ID that user wants to purchase
      "nftName": "The Decolife Coffee Machine",
      "nftType":  721
    },
    "destination": {
      "address":  "0x9ab51f0bbfabbb5788A442BDF88e38409B991498", // Destination address where the WETH will be deposited
      "currency": "matic_mumbai", // This currency will be depoisted in desitnation wallet address  
      "amount": 1.15 // Amount of currency in eth
    }
};

// provider is required in payments only mode 
await pay3.openBuy(transactionObj, provider);
﻿
pay3.openOnRamp(transactionObj)
The Dapp can use openOnRamp to use Pay3's On Ramp only solution. The Pay3 modal will guide user through On Ramp flow with its destination address defined by the Dapp.  
index.js
const transactionObj = {
  "requestId": requestId, // unique id string to identify buy request
  "destination": {
    "address":  '0x9ab51f0bbfabbb5788A442BDF88e38409B991498', // Destination address where the purchased crypto currency will be deposited
    "currency": "matic_mumbai", // tokenId that required to be purchease
    "amount": 1.25 // Amount in currency to be purchased
  }
};

// Opens Pay3 Buy modal
pay3.openOnRamp(transactionObj);
const transactionObj = {
  "requestId": requestId, // unique id string to identify buy request
  "destination": {
    "address":  '0x9ab51f0bbfabbb5788A442BDF88e38409B991498', // Destination address where the purchased crypto currency will be deposited
    "currency": "matic_mumbai", // tokenId that required to be purchease
    "amount": 1.25 // Amount in currency to be purchased
  }
};

// Opens Pay3 Buy modal
pay3.openOnRamp(transactionObj);
﻿
pay3.openSell({requestId})
Opens sell game token screen. It requires a unique requestId as parameter. 
index.js
pay3.openSell({
  "requestId": requestId, // unique id string to identify sell request
});
pay3.openSell({
  "requestId": requestId, // unique id string to identify sell request
});
﻿
pay3.openTransactions()
Show current and previous transactions of the connected user.
index.js
pay3.openTransactions();
pay3.openTransactions();
﻿
pay3.openPortfolio()
Opens portfolio screen for the connected user. This displays all the assets owned by the user's wallet and their balances. This will show both fungible and non-fungible assets. There will be options to customise the portfolio page as per the game.
index.js
pay3.openPortfolio();
pay3.openPortfolio();
﻿
pay3.sendTransaction(transaction: TransactionSpecs)
This triggers opening of Pay3 transaction model once user is connected to Pay3 Wallet.  dApp can call trigger any transaction with connected Pay3 Wallet. This provides a single interface to interact with Web2 and Web3 wallets.  
On completion of the transaction, pay3-sdk-sendtxn-status﻿ event is published to the dApp.  
Parameters:
requestId (Type string):  dApp needs to provide a unique string for every new transaction request triggered by the user. This will be passed back to the Dapp along with completed event data
to (Type string):  Contract address of which the function needs to be executed
value(Type string):  Coin amount to be spent in gwei while invoking the function
functionName (Type string):  Contract function name that needs to be called
args (Type Array of Objects): Arguments to be passed while calling the function
userMessage (Type string): Information text message for user shown while confirming the transaction in the Pay3 wallet. 
index.js
// Transfer ERC20 token Wrapped Matic from connected user to another wallet address in Polyon Mumbai test network

const valueInMatic = '0'; // Transfer function does not need Matic 
const functionName = 'transfer'; // ERC20 contract 'transfer' function 
const recipientAddress = '0x....'; // Recipent Wallet address 
const transferAmount = '10000000000000000'; // Transfer 0.01 Wrapped Matic
const userMessage = 'Transfer WMATIC'; // Custom text message for user

const id = pay3.sendTransaction({
  requestId, 
  to: WMATIC_ADDRESS_MUMBAI,
  value: valueInMatic,
  functionName,
  args: [recipientAddress, transferAmount],
  userMessage,
});
// Transfer ERC20 token Wrapped Matic from connected user to another wallet address in Polyon Mumbai test network

const valueInMatic = '0'; // Transfer function does not need Matic 
const functionName = 'transfer'; // ERC20 contract 'transfer' function 
const recipientAddress = '0x....'; // Recipent Wallet address 
const transferAmount = '10000000000000000'; // Transfer 0.01 Wrapped Matic
const userMessage = 'Transfer WMATIC'; // Custom text message for user

const id = pay3.sendTransaction({
  requestId, 
  to: WMATIC_ADDRESS_MUMBAI,
  value: valueInMatic,
  functionName,
  args: [recipientAddress, transferAmount],
  userMessage,
});
﻿
Sample Code to get Provider
Sample code to get Web3 provider from browser injected wallet like Metamask
JS
import { ethers } from 'ethers';

// Use injected provider window.ethereum as input to get new Web3Provider 
const provider = new ethers.providers.Web3Provider(window.ethereum, 'any');
import { ethers } from 'ethers';

// Use injected provider window.ethereum as input to get new Web3Provider 
const provider = new ethers.providers.Web3Provider(window.ethereum, 'any');
﻿
Sample code to get Web3 provider from Wagmi
JS
import { ethers } from 'ethers';
import { useAccount } from "wagmi";

const { address, isConnected, connector: activeConnector, isConnecting } = useAccount();

if (!isConnecting && isConnected && activeConnector) {
  const wagmiProvider = await activeConnector.getProvider();

  // Use wagmi provider as input to get new Web3Provider 
  const provider = new ethers.providers.Web3Provider(wagmiProvider);
}
import { ethers } from 'ethers';
import { useAccount } from "wagmi";

const { address, isConnected, connector: activeConnector, isConnecting } = useAccount();

if (!isConnecting && isConnected && activeConnector) {
  const wagmiProvider = await activeConnector.getProvider();

  // Use wagmi provider as input to get new Web3Provider 
  const provider = new ethers.providers.Web3Provider(wagmiProvider);
}
﻿
﻿
Updated 25 Mar 2024
Did this page help you?
Functions
Event Listeners