Design the Best NFT Checkout: A Guide (pt. 2 User Experience)

So, you want to learn how to create the best NFT checkout experience for your buyers? You've come to the right place– in this 2 part series, we'll dive into how you can offer a great checkout experience that can help you boost your conversion rates.

This is part 2 of our series where we'll break down every step in your user's journey from landing on the checkout page to receiving the NFT. By the end of this article, you should know what to consider at each step of the checkout experience and how to create a smooth experience for both crypto and non-crypto native individuals.

In case you missed part 1, in that article we discussed different payment options you can provide to your buyers, how to choose the right ones for your audience, and how to implement them using Paper. Give it a read here if you missed it!

Understanding the anatomy of a checkout flow

Before we dive into more specifics on how to design the best checkout experience, let's first understand what a checkout user flow typically looks like in web2 and web3.  

The Traditional E-Commerce Checkout Flow

The traditional e-commerce checkout flow is what you have likely seen when making an online purchase from any store. Whether it's Amazon, Etsy, or your favorite clothing brand, you will typically be asked to sign in or create an account, enter your shipping details (if applicable) and fill in your credit card information.

The Typical NFT Checkout Flow

NFT checkouts behave differently from traditional e-commerce checkouts as they require steps you wouldn't encounter in web2 such as connecting a wallet or signing a transaction. The most basic NFT checkouts typically entail connecting a pre-existing crypto wallet, selecting the option to mint now, loading gas fees and signing the transaction to pay with crypto, and finally having the NFT transferred to your connected wallet. This may not sound like a lot of steps but what we've outlined here is the best-case scenario where it is assumed that the individual possesses a crypto wallet that contains enough of the respective cryptocurrency to cover the mint price and gas fees.

Drawbacks

The reality is that these NFT checkouts are complex and have multiple edge cases that can cause friction in the buyer experience. An obvious drawback is that those who do not have a crypto wallet are unable to make a purchase. Even if your buyer has a crypto wallet, additional steps can be added to the overall purchasing experience if the buyer is on the wrong network or needs to transfer additional crypto into their wallet to cover gas fees. For many, having to create a crypto wallet in the first place is enough of a friction point to prevent one from buying.

Now that we've looked at the differences between e-commerce and NFT checkouts, let's see how we can incorporate familiar purchasing behaviors and prompts within NFT checkout flows to make it easy for anyone to buy an NFT.

The User-friendly NFT Checkout Flow

This is the flow we designed at Paper. It incorporates the simplicity and familiarity we all know and love from e-commerce checkouts, with web3 technology. We'll dive into each step in detail in the next section!

Being intentional about every step of the checkout flow

Every step within the checkout experience can either lead to a new point of friction or contribute to a delightful user experience. Now that we have briefly explored how e-commerce best practices can be applied in web3, let's talk about each touchpoint or step in depth.

1. Initiating the checkout flow

This step refers to the moment your user lands on your checkout page. Leading up to the checkout page, you should make it clear where the user can go to make a purchase. You may wish to consider adding a "buy now" link or button on your platform or integrating Paper's Checkout Links or Checkout Elements directly on your page.

In e-commerce, the checkout page typically contains a summary of what is in your cart and the total price. There is also typically a prompt to the next step in the checkout (e.g. shipping or payment options). In Paper's NFT checkout flow, the initial checkout page showcases the price and quantity of NFT(s) as well as prompts to create or connect a wallet. Showing the price in both crypto and fiat is a best practice as it makes it easy for any user to understand how much they will be paying for their NFT.

2. Wallet creation/selection

Wallet creation or selection is one of the first steps in an NFT checkout flow as it specifies where your NFT will be sent and can also determine where your crypto funds are pulled from if you intend to pay with crypto. In a traditional e-commerce checkout, this is similar to creating or signing in to the account you may have on an e-commerce site and then specifying your delivery method and address.

However, wallets are a huge barrier to entry for many users. The issue with this step is that not everyone owns a crypto wallet and creating one can be a hassle. Paper solves this by allowing you to enable the creation of a Paper Wallet directly in your checkout flow. Paper Wallets are NFT-first, non-custodial wallets that can be created by simply entering an email address. Email-based wallets help abstract away the complexities of web3 so your users can focus on completing the purchase without the confusion on how to create a crypto wallet.

Providing support for different types of wallet providers is also helpful in tapping into a greater pool of potential buyers who are already crypto-savvy. Using Paper's Checkout Links, you can support multiple wallet options for your buyers whether it be Metamask, Phantom, WalletConnect, or Coinbase Wallet.

3. Payment options

One of the next biggest barriers to entry or friction points when buying an NFT is making the payment itself. Depending on what chain your NFTs are on, you are restricting yourself to only users who possess crypto in your smart contract's native currency.

To create a great checkout experience that is not only simple for your users but also beneficial to you, offering a variety of different payment methods is important. With Paper, you can offer the following payment options:

• Credit card
• Apple Pay
• Google Pay
• iDEAL payments
• Pay with ETH (cross-chain crypto)
• Native mint

To read more about how to choose the right payment methods to offer within your checkout experience, visit part 1 of this guide series. Depending on the wallet options you choose to support, the region you are in, as well as the chain your NFTs are on, the payment options you select may be constrained.

For example, if you choose to enable Paper Wallets, your users will only have the option to pay with a credit card as Paper Wallets cannot currently hold cryptocurrencies.  If you choose to support existing wallet solutions like Metamask, you will be able to offer the ability to pay with card, iDEAL, and cross-chain crypto.

4. Confirmation

In your checkout experience, you will want to add some form of confirmation (whether that be a page, an email, etc.) during the payment step and after the delivery of the NFT (which we'll cover in the next step).

At the payment step within Paper's Checkout Links, users will be able to see an expandable breakdown of the price before confirming the payment.

As the payment is processing the user will see a 'purchase pending' page. This helps keep the user informed about what is happening in the background. If a user is minting with crypto rather than paying with fiat, this confirmation will be in the form of signing a wallet transaction.

For successful payments made by fiat, users will receive an email receipt from Paper.

5. NFT delivery

After completing the payment, you may wish to confirm that the NFT has been transferred to the user successfully. This step is important in ensuring that your users are not surprised or confused. Clear messaging is key even after the purchase has been made to ensure your users feel confident about where their funds have gone.

NFT delivery is the final piece of the experience that isn't typically visible to your users. This is what happens behind the scenes to get your users' NFTs into their wallets. Similar to how you might receive shipping/tracking emails for an item you purchased online, Paper allows you to send an email to your users to inform them that the NFT has been successfully transferred. This is an important part of the user experience as it closes the loop from initiating the purchase to receiving the NFT.

It is generally a best practice to inform your users about when they have received their purchase and it is also an opportunity to lead users to the most relevant next steps. For example, if you want your users to connect or activate their NFT after purchasing, you may wish to include that messaging after NFT delivery has been completed.

The entire Paper Checkout Link flow at a glance

To recap each step that we discussed above, here is a video that showcases the end-to-end flow for our Paper Checkout Links for an individual buying with credit card and using a Paper Wallet:

General Tips for a Smooth User Experience

Aside from the specific touchpoints in the user experience, here are some final tips that will help you design the best NFT checkout:

• Cut out the jargon & provide clear messaging. You may wish to remove terms like "mint" or "NFT" if you are catering to non-crypto native individuals.
• Provide relevant FAQs & pathways for additional support. Giving users a place to ask questions or learn more makes it easy for them to troubleshoot if needed.
• Be transparent. Being transparent about the pricing breakdown, where the funds are being transferred to and from, your smart contract, & more.
• Provide the right level of education. If you choose to educate users about web3, ensure that it is material that is easy to digest.

Now, you should have a better understanding of how web2 experiences can influence and shape web3 experiences for greater adoption and ease of use🎉Thanks for reading along and if you'd like to dig deeper, come hang out in Discord or follow us on Twitter for more tips and product updates!

About Paper

Paper offers NFT on-ramping infrastructure to help developers, games, creators, and platforms build the best NFT checkout experiences. We offer an end-to-end checkout solution that provides both back-end payments infrastructure, the front-end UX as well as the ability to create email-based wallets. Founded in early 2022 by James Sun and Edward Sun, Paper's mission is to make NFTs more accessible and useful for everyone. To date, Paper has worked with over 2500+ developers, creators, and brands such as NYFW, Fractal, YesTheory, deadmau5, and MightyJaxx.