まいにちDapps#7 トークンゲート機能付きのECサイトを構築する

前回はトークンゲート付きのwebサイト・コンテンツ閲覧サイトのようなものを構築しました。一歩進めてNFTホルダーに対してフィジカルグッズを販売したり無料でプレゼントする場合に、ゼロからECサイトを構築するのはハードルが高いので、ECサイト構築サービスに連携する方法をご紹介します。

Shopify × Manifold

この記事はもともとThirdweb×Shopifyの連携について書こうと思ったのですが、途中で見つけたManifoldのプラグインが素晴らしかったのでまずこちらを紹介させてください。

Shopifyパートナーズのページに行きログインします。

https://www.shopify.com/partners

開発ストアを作成します。

テストデータを入れたので商品管理にダミーの商品が並びました。

商品を1つ選んで商品タイプに「Manifold」と記入して保存します。

Shopifyアプリストアへ遷移し、Manifold Merch Bridgeを追加します。

New Product GateからProduct Gateを作成します。

トークンゲートを設けたい商品を選択肢、ルールをこのように設定します。特定のToken IDやToken IDの範囲指定、Attributeでの指定などよく考えられていますね！%のDiscountも絶対値でのDiscountも指定できます。

次にShopifyのストアをカスタマイズしていきます。

オンラインストアからテーマを選択してカスタマイズをクリック、「デフォルトの商品」ページを選びます。

「ブロックを追加」でManifoldのBuy Buttonを追加します。

ストアを見るからプレビューが見れます。

NFTを保持していない場合

NFTを保持している場合↓

非常によくできていて感動しました。他のアプリが有料のものも多い中、全ての機能が無料で使えるのも素晴らしいですね！

Thirdweb × Shopify

ShopifyはThirdwebのシリーズAラウンドに投資家として参加し、提携を進めています。

ThirdwebはShopifyとのパートナーシップに基づき、Commerce Kitというソリューションを提供しています。

https://thirdweb.com/solutions/commerce

下記のブログ記事を辿っていくと

https://portal.thirdweb.com/commercekit/get-started/integration

下記のShopが完成するようです。

https://thirdweb.myshopify.com/

BASEになんちゃってトークンゲートを実装する

日本国内で人気のBASEにはHTML編集機能があり、フロントエンドのデザインをカスタマイズすることができます。その機能を利用してフロントエンドでウォレット接続してNFTの保有状況に応じて購入ボタンを出し分けるという実装をしてみました。

HTML編集アプリを追加

テーマ一覧からエディタに入る

ボタンのcssクラスを探して以下のようなコードを追加しました。

<script src="https://cdn.ethers.io/scripts/ethers-v3.min.js"
			charset="utf-8"
			type="text/javascript">
		</script>
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
		<script>
			const data = document.getElementById('item-body');
  			const elems = data.getElementsByTagName('h1');
			
			const connectedArea = document.querySelector(".connected-area");
			if(elems[0].innerText.includes("ホルダー限定価格")){
				connectedArea.style.display = "none";
			}

			const connectButton = document.querySelector(".connect-button");
			connectButton.style.display = "none";
			if(elems[0].innerText.includes("ホルダー限定価格")){
				connectButton.style.display = "block";
			}
			const nftErrorMessage = document.getElementById("nft-error-message");
			nftErrorMessage.style.display = "none"

			const connectWallet = async () =>{
				if (!window.ethereum) {
					window.open(
						`https://metamask.app.link/dapp/project-liona.vercel.app/`
					);
				}
				if (window.ethereum) {
					const accounts = await window.ethereum.request({
						method: "eth_requestAccounts",
					})
					if(!accounts[0]) return
					console.log(accounts[0])
					const options = {
						method: "GET",
						url: `https://deep-index.moralis.io/api/v2/${accounts[0]}/nft`,
						params: {
							chain: "eth", // TODO: change to eth
							format: "decimal",
							token_addresses: "0x1978Ff95E0d6BdEe52420feF27A4391814dEEcfF", 
						},
						headers: {
							accept: "application/json",
							"X-API-Key":"your key",
						},
					};
					
					const response = await axios.request(options);

					if(response.data.result.length){
						connectedArea.style.display = "block";
						connectButton.style.display = "none"
						nftErrorMessage.style.display = "none"
					} else {
						nftErrorMessage.style.display = "block"
					}
					
				}
			}
		</script>

カートに入れる前にウォレット接続を求められ、NFTの保有の有無を確認できたらカートに追加ボタンが表示されるという仕組みです。

バックエンドを介して認証を行っていないのでhtml javascriptの知識がある方は簡単に偽装できてしまうのが難点ですが、BASEさん本家のアプリの登場を待ちたいです。

まとめ

NFTを起点にしたEコマースは今後増えてくると思います。ShopifyのようなプラットフォームでNFT認証機能が使えるのは非常に便利ですね！自分が発行しているNFTに限らず、例えば私が勝手にBAYCホルダー向けの割引を実施できる、というのがNFTの特徴ですね。NFTプロジェクトを運営している方や、小売店を営まれている方に参考にしていただきたいです。

弊社Pontechはweb3に関わる開発を得意とするテック企業です。サービス開発に関するご相談はこちらのフォームからお願いいたします。

また、受託開発案件に共に取り組むメンバーを募集しています！ご興味のある方はぜひお話させてください！