Checkout SDK Connect
This guide is primarily for developers and potentially project managers who want to understand the Checkout integration process.
Checkout SDK Connect with NextJS
This tutorial demonstrates how to integrate the Immutable Checkout SDK into a Next.js application to connect with MetaMask wallets. The example shows how to retrieve a list of supported wallets, create a provider for MetaMask, connect to the wallet (with or without permissions), and check connection status.
Features Overview​
- Retrieving a list of supported wallet providers
- Creating a MetaMask provider
- Connecting to MetaMask (with or without permissions)
- Checking wallet connection status
- Displaying wallet connection information
SDK Integration Details​
Retrieving Supported Wallet Providers​
Gets a list of all wallet providers supported by the Checkout SDK.
const type = checkout.WalletFilterTypes.ALL;
const allowListRes = await checkoutSDK.getWalletAllowList({ type });
This code uses the Checkout SDK to fetch a list of all supported wallet providers. The WalletFilterTypes.ALL parameter specifies that all wallet types should be returned, rather than filtering for a specific type. The result is an array of wallet information that includes the provider name and other relevant details.
Creating a MetaMask Provider​
Creates a specific provider instance for interacting with the MetaMask wallet.
const walletProviderName = checkout.WalletProviderName.METAMASK;
const providerRes = await checkoutSDK.createProvider({ walletProviderName });
This code creates a provider specifically for MetaMask by using the createProvider method and specifying WalletProviderName.METAMASK. The provider returned can be used for connecting to the wallet and performing wallet-related operations.
Connecting to MetaMask​
Establishes a connection to the user's MetaMask wallet, optionally requesting permissions.
// With permissions
const connectRes = await checkoutSDK.connect({
provider: providerRes.provider,
requestWalletPermissions: true,
});
// Without permissions
const connectRes = await checkoutSDK.connect({
provider: providerRes.provider
});
These code snippets demonstrate two ways to connect to the MetaMask wallet. The first method uses requestWalletPermissions: true to explicitly request user permissions, which shows a MetaMask popup asking for permission to view accounts. The second method connects without requesting explicit permissions, which may use cached permissions if they exist.
Checking Connection Status​
Checks if a wallet is currently connected via the provider and retrieves the address if it is.
const isConnectedRes = await checkoutSDK.checkIsWalletConnected({
provider: providerRes.provider
});
This code checks if the wallet is currently connected using the checkIsWalletConnected method. The result includes an isConnected boolean flag and the connected wallet's address if a connection exists.
Running the App​
Prerequisites​
- Node.js (v18 or later)
- PNPM package manager
- MetaMask extension installed in your browser
- An Immutable Hub account for API key setup (Immutable Hub)
Setup Instructions​
Clone the repository:
git clone https://github.com/immutable/ts-immutable-sdk.git
cd ts-immutable-sdk/examples/checkout/sdk-connect-with-nextjsInstall dependencies:
pnpm installCreate a
.envfile based on the.env.example:cp .env.example .envAdd your Immutable publishable API key to the
.envfile:NEXT_PUBLIC_PUBLISHABLE_KEY=your_publishable_keyStart the development server:
pnpm devOpen your browser and navigate to http://localhost:3000 to see the app.
Summary​
This example demonstrates how to integrate Immutable's Checkout SDK with a Next.js application to connect with MetaMask wallets. It showcases essential wallet connection features including retrieving supported wallets, creating providers, establishing connections with or without explicit permissions, and checking connection status. These fundamentals are critical for any dApp that needs to interact with user wallets.