GuidesAPI Reference
Log In

🧩 CreateWallet

Suggest Edits

CreateWallet is a component that prompts the user to enter a One-Time Password (OTP) sent to their email. Once provided a Paper Wallet address tied to that email address is created.

Quickstart

👉 See an interactive demo!

  1. Render the CreateWallet component with the user's email address.
  2. The buyer is prompted to provide the OTP to verify their email.
  3. The Paper Wallet address is returned in the onSuccess callback.
    1. Tip: With the email and wallet address, your can use CheckoutWithCard to embed an NFT checkout experience!

Use cases

  • Create a simple, NFT-friendly wallet for your buyers.
  • Complement your existing authentication if your app already supports Metamask, Walletconnect, or web2 social logins.

Prerequisites

  • You have the user's email address.

📘

This SDK is available in ReactJS and JavaScript.

Integration (ReactJS)

Provide the user's email address and success callback handler to the <CreateWallet> component. An email is sent to the user with a 6-digit OTP. Once they provide it, a Paper Wallet address is returned to the onSuccess callback.

The same email address always resolves to the same wallet address.

Code example

<PaperSDKProvider chainName="Polygon">
  <CreateWallet
        emailAddress="[email protected]"
        onSuccess={(user) => {
      console.log("wallet address:", user.walletAddress);
    }}
        onError={(error) => { console.error(error) }}
  />
</PaperSDKProvider>

Props

PropTypeDescription
emailAddress *stringThe user's email address to verify.
onSuccess *(user: {
emailAddress: string;
walletAddress: string;
}) => void		A callback called when the email is verified and wallet address is created.

The user's email address and wallet address are returned.
redirectUrlstringA URL to redirect the user once they click the link in their email.

If not provided, the email link prompts the user to close the tab and return to your app.
clientIdstringIf provided, an accessCode is provided in the onSuccess callback. This accessCode is used to query the user's wallet information later.
onEmailVerificationInitiated() => voidA callback called after Paper sends an email for the user to verify.

If not provided, Paper provides a UI to tell the user to check their inbox.
onError(error: PaperSDKError) => voidA callback called if there is an error sending the email or creating a wallet address.

Customization

Button

If no child element is passed in, a default button is rendered.

`CreateWallet` default button

CreateWallet default button

Provide your own button by passing a child element into the React component.

<CreateWallet>
  <button class='my-button'>Sign In</button>
</CreateWallet>

Email verification prompt

By default, Paper shows a modal prompting the user to check their email.

To provide your own UX, provide the onEmailVerificationInitiated callback to provide your own instructions prompting the user to check their inbox.

Integration (JavaScript)

Call initialiseCreateWallet to set up necessary event handlers.

Then provide the user's email address to the createWallet function. An email is sent to the user with a 6-digit OTP. Once they provide it, a Paper Wallet address is returned to the onSuccess callback.

The same email address always resolves to the same wallet address.

Code Example

import {
  createWallet,
  initialiseCreateWallet,
} from '@paperxyz/js-client-sdk';

// On page load:
await initialiseCreateWallet({
  onSuccess,
  onEmailVerificationInitiated,
  onError
});

// When you are ready to prompt the user to sign in:
await createWallet({
  chainName = "Polygon",
  emailAddress,
  clientId,
  redirectUrl,
});

initialiseCreateWallet Props

PropsTypeDescription
onSuccess *(user: { emailAddress: string; walletAddress: string;
accessCode?: string;
}) => void		A callback called when the email is verified and wallet address is created.

The user's email address and wallet address are returned.
accessCode will be present if clientId is provided (see below).
onEmailVerificationInitiated() => voidA callback called after Paper sends an email for the user to verify.

If not provided, Paper provides a UI to tell the user to check their inbox.
onError (error: PaperSDKError) => voidA callback called if there is an error sending the email or creating a wallet address.

createWallet Props

PropsTypeDescription
chainName *string
Valid values:
- Ethereum
- Goerli
- Polygon
- Mumbai		The wallet will be created on that specified chain. A user will have the same address on all EVM blockchains.
emailAddress
*		stringThe user's email address that needs to be verified.
redirectUrl
*		stringA URL to redirect the user once they click the link in their email.

If not provided, the email link prompts the user to close the tab and return to your app.
clientId
*		stringIf provided, an accessCode is provided in the onSuccess callback. This accessCode is used to query the user's wallet information later.

FAQ

Why does my page refresh on submit?

If you are wrapping CreateWallet in a <form> element, add event.preventDefault() to your form submit handler to prevent the default browser behavior of reloading the page.

Updated 11 days ago