Quickstart

Suggest Edits

📘

We are currently compatible with ethers.js and support the Polygon testnet (Mumbai).

🛠️ Step 1. Project Creation

API Keys

Sign up in the Peaze Dashboard, click + New Project to create a project, and grab the API Keys.

⬇️ Step 2. Installation

NPM

npm install @peaze-labs/react

If using Next.js, make sure to read this.

⚙️ Step 3. Configuration

SDK Instantiation

Grab your Project ID and Project Key from the Peaze Dashboard and use them here.

import { PeazeSDK } from '@peaze-labs/react';

const peaze = new PeazeSDK({
  id: 'PROJECT_ID_HERE',
  key: 'PROJECT_KEY_HERE',
});

ethers.js

An RPC Provider based on ethers.providers.JsonRpcProvider is required to instantiate the signer object. We recommend using an RPC infrastructure service like Alchemy or Infura.

Alternatively, you can use public RPC providers that utilize URLs found here. To use these, leave the provider unspecified as shown in the code example below. Note that it is recommended you switch to using your own RPC provider for production use.

Obtain an ethers.js compatible signer object with the following code:

Alchemy RPC as provider

import { useState } from 'react';
import { ethers, constants, providers } from 'ethers';

const [signer, setSigner] = useState();

// Using Chain ID of 80001 for Polygon Mumbai
const provider = new providers.AlchemyProvider(80001, "YOUR_ALCHEMY_KEY_HERE");

const login = async () => {
    const signer = await peaze.getSigner(provider);
    setSigner(signer);
  }

Default RPC as provider

import { useState } from 'react';
import { ethers, constants } from 'ethers';

const [signer, setSigner] = useState();

const login = async () => {
    const signer = await peaze.getSigner();
    setSigner(signer);
  }

peaze.getSigner opens the Peaze Authentication Widget, which will prompt your user to sign in, and assigns a signer object upon success.

💸 Step 4. Transact

The code example below requests a signature from your user for an example smart contract function deposit with a value of 1 ETH.

const contract = new ethers.Contract('CONTRACT_ADDRESS', CONTRACT_ABI, signer);

await contract.deposit({
  value: ethers.utils.parseEther('1')
});

Calling the contract with the signer opens the Peaze Checkout Widget, which will prompt your user to select a payment method (if necessary) and approve the transaction.

🧠 Full Code Example

import { PeazeSDK } from '@peaze-labs/react';
import { useState } from 'react';
import { ethers, constants } from 'ethers';

const peaze = new PeazeSDK({
  id: 'PROJECT_ID_HERE',
  key: 'PROJECT_KEY_HERE',
});

export default function App() {
  const [signer, setSigner] = useState();
  
  const login = async () => {
    // opens Authentication Modal
    const signer = await peaze.getSigner();
    setSigner(signer);
  }
  
  const deposit = async () => {
    if (!signer) {
      throw new Error('User must sign in first');
    }
    // Initiates a transaction with Peaze signer and opens Checkout Modal
    // Transaction is broadcasted upon user confirmation
    // This will hang until user confirms or closes Checkout Modal
    const contract = new ethers.Contract('CONTRACT_ADDRESS', CONTRACT_ABI, signer);
    await contract.deposit({ value: ethers.utils.parseEther('1') });
  }
    
  return (
    <>
    {
      signer ? (
        <>
            <button onClick={deposit}>Deposit</button>
        </>
        ) : (
            <button onClick={login}>Sign In</button>
            )
        }
    </>
    )
}

Next Steps

Widget Views

  • Check out the Authentication Widget here.
  • Learn more about our Checkout Widget here.
  • Give your users a holistic view of their wallet with our Wallet Widget here.

UI Customization

Learn how to customize the Peaze Widgets here.

Updated 1 day ago