今回は「Crossmint」の実装についてまとめていきます。
Crossmintとは、NFTをクレカなどで購入できたり、APIを通じてウォレットの作成の簡易化や様々なNFTのサポートを行うことができるサービスです。
Crossmintについては、以下で詳しくまとめています。
この章では以下のチュートリアルを進めながら、法定通貨・クロスチェーン払いの実装をしていきます。
実装の手順は以下になります。
NFTコレクションのコントラクトをCrossmintに登録する。
Crossmint SDKを統合して、Webサイトから販売を開始します。実装には以下の3つの方法で行えます。
CrossmintがホストするWebページを使用して、コードを記述することなく支払いの受け入れを開始する。
Crossmintで支払いボタンを既存のWebサイトやアプリに追加し、ボタンをクリックすると支払いのフローが開始されます。
Webサイトやアプリ内に埋め込まれた、完全にカスタマイズされた独自の支払いUIを構築します。
発売のチェックリストを確認して、販売を開始する前に全て準備が整っていることを確認します。
また、以下のような高度な機能が実装できます。
購入用のカスタム受け取りアドレスを指定する方法を学ぶ。
EVMおよびSolanaでアクセスリストを使用した支払いを受け入れる。
USDCを受け入れるコントラクトをCrossmintを使用する。
イベントコールバックをリッスンするためのWebhookを設定する。
以下にアクセスします。
以下が開くので、「Staging」タブをクリックしてメールアドレスやGoogleなどでログインしてください。
チェックボックスをクリックして、「Create your account」をクリックします。
以下のページが開けばOKです。
この章では新しくNFTコレクションのコントラクトを作成します。
もし既存のコントラクトを使用する場合は以下の手順に従ってください。
「Collections」タブをクリックし、「New collection」をクリックします。
以下に必要な情報を入力し、右下の「Next」をクリックします。
残りの手順は以下の公式のドキュメントを参考にしてください。
以下のように設定しています。
NFTコレクションを作成できたら、次にNFTを作成していきます。
以下の「Manual upload」をクリックしてください。
以下のように設定して、以下の「Create NFT」ボタンを押しました。
以下のようにNFTを作成できました。
NFTのコレクションを作成したところで、次に支払いを受け入れる部分が必要です。
以下の3つの方法で作成できますが、今回は1番の方法で作成していきたいと思います。
CrossmintがホストするWebページを使用して、コードを記述することなく支払いの受け入れを開始する。
Crossmintで支払いボタンを既存のWebサイトやアプリに追加し、ボタンをクリックすると支払いのフローが開始されます。
Webサイトやアプリ内に埋め込まれた、完全にカスタマイズされた独自の支払いUIを構築します。
以下の手順に従って進めてください。
手順は以下の「No-code storefront」タブをクリックすることで開始できます。
以下の手順に沿ってサイトデザインをしていきます。
自分の場合はこんな感じにしてみました。
CrossmintがホストするWebページを使用して、コードを記述することなく支払いの受け入れを開始する。
Crossmintで支払いボタンを既存のWebサイトやアプリに追加し、ボタンをクリックすると支払いのフローが開始されます。
Webサイトやアプリ内に埋め込まれた、完全にカスタマイズされた独自の支払いUIを構築します。
今回は1️⃣の手順を確認してきましたが、2️⃣や3️⃣の手順を実行したい方は以下を参考にしてください。
2️⃣
3️⃣
実際に本番環境でNFTを販売開始する前に確認するべき事項が以下にまとめられています。
その他の追加機能については以下にまとめられています。
この章ではCrossmintのMint APIを使用して、APIを使用したNFTコレクションやNFTの作成をしていきたいと思います。
以下がMint APIエンドポイントのドキュメントです。
まだ開発者コンソールの登録をしていない方は、前章の一番最初で登録手順を紹介しているのでそちらを進めてください。
次にMint APIを有効化していきます。
以下のページにアクセスしてください。
「API Keys」タブをクリックして、「New API Key」をクリックしてください。
以下のように全てのAPIにチェックを入れて、右下の「Create API Key」をクリックします。
以下の公式ドキュメントでは4つのMint APIを使用したプロジェクト例を紹介しています。
NFTをMintするTwitterボット。
NFTをMintするDiscordボット。
ノーコーディングでGoogleスプレッドシートからNFTをMint。
Zapier経由でNFTのMint。
Mint APIを使用してNFTコレクションを作成します。
以下の「<CLIENT_SECRET>」と「<PROJECT_ID>」やNFTコレクションの情報を自身のものに差し替えてください。
「<CLIENT_SECRET>」と「<PROJECT_ID>」は上記から確認できます。
curl --request POST \
--url https://staging.crossmint.com/api/2022-06-09/collections/ \
--header 'content-type: application/json' \
--header 'x-client-secret: <CLIENT_SECRET>' \
--header 'x-project-id: <PROJECT_ID>' \
--data '
{
"chain": "polygon",
"metadata": {
"name": "Cardene API Collection",
"imageUrl": "https://ipfs.io/ipfs/QmWv34xqNqYe9mZSH43Nd3jFGrtzNzfqF8DMxqTj5Ka8GX?filename=cardene",
"description": "A new Cardene API collection with its own dedicated smart contract"
}
}
'
上記をTerminalなどで実行して以下のレスポンスが返ってくればNFTコレクションの作成成功です。
{"id":"d41ddd06-cddc-48a7-9752-993cdcad771d","metadata":{"name":"Cardene API Collection","description":"A new Cardene API collection with its own dedicated smart contract","imageUrl":"ipfs://bafkreiaxu4an75ydcgkqhq3yj445t3m7bvyr7y75hb7r6pycaslcagplya"},"fungibility":"non-fungible","onChain":{"chain":"polygon","type":"erc-721"}}
以下のように開発者コンソールから確認できればOKです。
以下のコマンドを実行してコレクションのステータスを確認しましょう。
CLIENT_SECRET=
PROJECT_ID=
COLLECTION_ID=
curl --request GET \
--url https://staging.crossmint.com/api/2022-06-09/collections/$COLLECTION_ID \
--header "x-client-secret: $CLIENT_SECRET" \
--header "x-project-id: $PROJECT_ID"
以下のようなレスポンスが返ってくれば確認成功です。
{"id":"d41ddd06-cddc-48a7-9752-993cdcad771d","metadata":{"name":"Cardene API Collection","description":"A new Cardene API collection with its own dedicated smart contract","imageUrl":"ipfs://bafkreiaxu4an75ydcgkqhq3yj445t3m7bvyr7y75hb7r6pycaslcagplya"},"fungibility":"non-fungible","onChain":{"chain":"polygon","type":"erc-721","contractAddress":"0x3949AD4f815313819A996e82cb7e1290E352F8B5"}}
自身のアカウント内で作成されたNFTコレクションの一覧情報を取得しましょう。
curl --request GET \
--url https://staging.crossmint.com/api/2022-06-09/collections/ \
--header 'x-client-secret: <CLIENT_SECRET>' \
--header 'x-project-id: <PROJECT_ID>'
以下のようなレスポンスが返ってくれば成功です!
{"results":[{"id":"...","metadata":{"name":"Cardene API Collection","description":"A new Cardene API collection with its own dedicated smart contract","imageUrl":"ipfs://bafkreiaxu4an75ydcgkqhq3yj445t3m7bvyr7y75hb7r6pycaslcagplya"},"fungibility":"non-fungible","onChain":{"chain":"polygon","type":"erc-721","contractAddress":"0x3949AD4f815313819A996e82cb7e1290E352F8B5"}},{"id":"default-solana","metadata":{"name":"NFT Collection","description":"NFTs created using https://www.crossmint.com","imageUrl":"https://www.crossmint.com/assets/crossmint/logo.svg","symbol":""},"fungibility":"non-fungible","onChain":{"chain":"solana","type":"metaplex-certified-collection","mintAddress":"GwLe7FpXuHjvqvnYM7XubwenvPBNBYUNAVAxFSz215PM"}},{"id":"default-polygon","metadata":{"name":"NFT Collection","description":"NFTs created using https://www.crossmint.com"},"fungibility":"non-fungible","onChain":{"chain":"polygon","type":"erc-721","contractAddress":"0xFDD43Baa3ebb872A56d4bbf16661CFB8c732dB54"}},{"id":"384895d0-1310-42db-a939-d1ac5c296a19","metadata":{"name":"Cardene","description":"Cardene NFT Collection.","imageUrl":"https://uploadthing.com/f/639dc73e-9322-41fa-9245-234acf08363f-95surw.JPG"},"fungibility":"non-fungible","onChain":{"chain":"polygon","type":"erc-721","contractAddress":"0x6e4BDd01De36B19c80128e41da753aC6e021Ec03"},"payments":{"price":"0.0001","recipientAddress":"..."}}]}%
Mint APIを使用してNFTのコレクションを作成できたので、次にAPIを使用してNFTをMintしていこうと思います。
以下の「CLIENT_SECRET」、「PROJECT_ID」、「MY_TEST_EMAIL」、「COLLECTION_ID」に適切な値を入れて実行してください。
CLIENT_SECRET=
PROJECT_ID=
MY_TEST_EMAIL=
COLLECTION_ID=
curl --header "x-client-secret: $CLIENT_SECRET" \
--header "x-project-id: $PROJECT_ID" \
-X POST \
-H 'Content-Type: application/json' \
-d '{
"metadata": {
"name": "Cardene API NF",
"image": "https://www.crossmint.com/assets/crossmint/logo.png",
"description": "Test NFT Cardene API NFT created using the Crossmint Minting API"
},
"recipient": "email:'"$MY_TEST_EMAIL"':polygon"
}' \
https://staging.crossmint.com/api/2022-06-09/$COLLECTION_ID/default-polygon/nfts
以下のレスポンスが返ってくればMint成功です。
{"id":"1e225759-7762-4360-85ad-a7cdf3558d58","onChain":{"status":"pending","chain":"polygon","contractAddress":"0x3949AD4f815313819A996e82cb7e1290E352F8B5"}}%
上記のレスポンスを見てもらうとわかりますが、status
がpending
になっています。Mintが完了するまで少し時間がかかるので、少し待ってから開発者コンソールで確認してみてください。
次にNFTのMintステータスを確認していきます。これによりMintが完了しているのか確認できます。
CLIENT_SECRET=
PROJECT_ID=
COLLECTION_ID=
NFT_ID=
curl --header "x-client-secret: $CLIENT_SECRET" \
--header "x-project-id: $PROJECT_ID" \
--request GET \
--url https://staging.crossmint.com/api/2022-06-09/collections/$COLLECTION_ID/nfts/$NFT_ID
以下のようなレスポンスが返ってくれば成功です。
{"id":"1e225759-7762-4360-85ad-a7cdf3558d58","metadata":{"name":"Cardene API NFT","image":"ipfs://bafkreigbqsmxzkbjgbwtj6exfdt5z3t3swgoysf7hr6vjzddqnmykj6x2u","description":"Test NFT Cardene API NFT created using the Crossmint Minting API"},"onChain":{"status":"success","tokenId":"1","owner":"0x7a28A5f468A996782634399919B2425a944EB3bc","txId":"0x1a3542fccd4a016bb0843c13a3812f55b953ac2b9d62ff884f259f66ff80b55c","contractAddress":"0x3949AD4f815313819A996e82cb7e1290E352F8B5","chain":"polygon"}}%
status
がsuccess
なのを確認できますね。
低コストかつ最高のスループットでNFTをMintするSolanaブロックチェーンの仕組みを利用したMint方法です。
curl --request POST \
--url https://staging.crossmint.com/api/2022-06-09/collections/default-solana/nfts \
--header 'accept: application/json' \
--header 'content-type: application/json' \
--header 'x-project-id: <PROJECT_ID>' \
--header 'x-client-secret: <CLIENT_SECRET>' \
--data '{
"recipient": "email:<EMAIL>:solana",
"metadata": {
"name": "Cardene API NFT",
"image": "https://www.crossmint.com/assets/crossmint/logo.png",
"description": "My Cardene API NFT created via the mint API!"
},
"compressed": true
}'
以下のレスポンスが返ってくれば実行成功です。
{"id":"76d30a77-6cc5-4e04-8113-4bd76358677d","onChain":{"status":"pending","chain":"solana"}}%
curl --request GET \
--url https://staging.crossmint.com/api/2022-06-09/collections/default-solana/nfts/<nft-id> \
--header 'x-project-id: <PROJECT_ID>' \
--header 'x-client-secret: <CLIENT_SECRET>'
以下のようなレスポンスが返ってくれば成功です。
{"id":"76d30a77-6cc5-4e04-8113-4bd76358677d","metadata":{"name":"Cardene API NFT","symbol":"","seller_fee_basis_points":0,"description":"My Cardene API NFT created via the mint API!","image":"https://crossmint.myfilebase.com/ipfs/bafkreigbqsmxzkbjgbwtj6exfdt5z3t3swgoysf7hr6vjzddqnmykj6x2u","attributes":[],"properties":{"files":[{"uri":"https://crossmint.myfilebase.com/ipfs/bafkreigbqsmxzkbjgbwtj6exfdt5z3t3swgoysf7hr6vjzddqnmykj6x2u","type":"image/png"}],"category":"image","creators":[{"address":"BkneSZhGjjT138svSFcZE7MKaAaBYMEGjgq7reVQRMYh","verified":false,"share":100}]}},"onChain":{"status":"success","mintHash":"AV74zDwM19CZpcbRSderdC4NwhwZ4td4WmBM1SwLU4os","txId":"7ANWwjJCXfxRnLMBqpxuz9ubnWFZM7G5kFjMyVFgJo87gF5QH37Dh7VQBuJxSVNttA34vza4Y2JDVdTRFkBYD3J","owner":"8RQy32UFgUeoT44U9sgmpCojXKp5aeaSFZJB5GqA2pZq","chain":"solana"}}
SFTとはERC20とERC721の特性を併せ持つERC1155のことです。この章ではMint APIを使用してERC1155をMintしていきます。
まずはSFTのコレクションを作成していきましょう。
CLIENT_SECRET=
PROJECT_ID=
curl --request POST \
--url https://staging.crossmint.com/api/2022-06-09/collections \
--header "accept: application/json" \
--header "content-type: application/json" \
--header "x-client-secret: $CLIENT_SECRET" \
--header "x-project-id: $PROJECT_ID" \
--data '{
"chain": "polygon",
"fungibility": "semi-fungible",
"metadata": {
"name": "My ERC1155 Cardene Collection",
"imageUrl": "https://www.crossmint.com/assets/crossmint/logo.png",
"description": "A new ERC1155 Cardene collection with its own dedicated smart contract"
}
}'
以下のようなレスポンスが返ってくれば成功です。
{"id":"569ec4bc-95f0-4eba-970c-d5db68447343","metadata":{"name":"My ERC1155 Cardene Collection","description":"A new ERC1155 Cardene collection with its own dedicated smart contract","imageUrl":"ipfs://bafkreigbqsmxzkbjgbwtj6exfdt5z3t3swgoysf7hr6vjzddqnmykj6x2u"},"fungibility":"semi-fungible","onChain":{"chain":"polygon","type":"erc-1155"}}
開発者コンソールで確認するとちゃんと作成されています。
次に、SFTをMintするためのテンプレートを作成していきます。
「COLLECTION_ID」には先ほど作成した、SFTのコレクションのIDを入れてください。
CLIENT_SECRET=
PROJECT_ID=
COLLECTION_ID=
curl --request POST \
--url https://staging.crossmint.com/api/2022-06-09/collections/$COLLECTION_ID/templates \
--header "accept: application/json" \
--header "content-type: application/json" \
--header "x-client-secret: $CLIENT_SECRET" \
--header "x-project-id: $PROJECT_ID" \
--data '{
"onChain": {
"tokenId": "2"
},
"supply": {
"limit": 10
},
"metadata": {
"name": "My ERC1155 Cardene template",
"image": "https://www.crossmint.com/assets/crossmint/logo.png",
"description": "A new ERC1155 Cardene token template for my ERC1155 collection"
}
}'
以下のようなレスポンスが返ってくれば成功です。
{"templateId":"3978c0ba-05d3-4957-82b3-385ff88f26f4","metadata":{"name":"My ERC1155 Cardene template","image":"ipfs://bafkreigbqsmxzkbjgbwtj6exfdt5z3t3swgoysf7hr6vjzddqnmykj6x2u","description":"A new ERC1155 Cardene token template for my ERC1155 collection"},"onChain":{"tokenId":"2"}}
では最後に、先ほど作成したテンプレートをもとにSFTをMintしていきましょう。
「TEMPLATE_ID」には先ほど作成した、SFTのテンプレートのIDを入れてください。
CLIENT_SECRET=
PROJECT_ID=
COLLECTION_ID=
TEMPLATE_ID=
EMAIL=
curl --request POST \
--url https://staging.crossmint.com/api/2022-06-09/collections/$COLLECTION_ID/sfts \
--header "accept: application/json" \
--header "content-type: application/json" \
--header "x-client-secret: $CLIENT_SECRET" \
--header "x-project-id: $PROJECT_ID" \
--data '{
"templateId": "'"$TEMPLATE_ID"'",
"recipient": "email:'"$EMAIL"':polygon",
"amount": 1
}'
以下のようなレスポンスであれば成功です!
{"transactionId":"c2ac1eb6-f09e-4872-bf24-636954bcd19e"}
NFTのメタデータを編集していきましょう。
CLIENT_SECRET=
PROJECT_ID=
COLLECTION_ID=
NFT_ID=
curl --request PATCH \
--url https://staging.crossmint.com/api/2022-06-09/collections/$COLLECTION_ID/nfts/$NFT_ID \
--header "accept: application/json" \
--header "content-type: application/json" \
--header "x-client-secret: $CLIENT_SECRET" \
--header "x-project-id: $PROJECT_ID" \
--data '{
"reuploadLinkedFiles": true,
"metadata": {
"name": "My Update Cardene NFT",
"image": "https://www.crossmint.com/assets/crossmint/logo.png",
"description": "My NFT Update Cardene via the mint API!"
}
}'
以下のようなレスポンスが返ってきていれば成功です!
{"id":"3d1406f3-8f39-4480-8755-0a14801e465d","status":"pending"}
では最後にAPIを使用してウォレットの作成をしていきましょう。
ドキュメントは以下です。
また、APIエンドポイントのドキュメントは以下です。
ウォレット作成にあたり、前提として以下のことを行なっている必要があります。
開発者コンソールの作成。
まずはAPIを使用してウォレットを作成していきます。
CLIENT_SECRET=
PROJECT_ID=
EMAIL
curl --request POST \
--url https://staging.crossmint.com/api/v1-alpha1/wallets \
--header "accept: application/json" \
--header "content-type: application/json" \
--header "x-client-secret: $CLIENT_SECRET" \
--header "x-project-id: $PROJECT_ID" \
--data '{
"email": "'"$EMAIL"'",
"chain":"polygon"
}'
以下のようなレスポンスが返ってくれば成功です。
{"chain":"polygon","publicKey":"0x7a28A5f468A996782634399919B2425a944EB3bc"}
CLIENT_SECRET=
PROJECT_ID=
EMAIL
curl --request GET \
--url "https://staging.crossmint.com/api/v1-alpha1/wallets?email=$EMAIL" \
--header "accept: application/json" \
--header "content-type: application/json" \
--header "x-client-secret: $CLIENT_SECRET" \
--header "x-project-id: $PROJECT_ID"
以下のようなレスポンスが返ってくれば成功です。
[{"chain":"ethereum","publicKey":"0x7a28A5f468A996782634399919B2425a944EB3bc"},{"chain":"polygon","publicKey":"0x7a28A5f468A996782634399919B2425a944EB3bc"},{"chain":"bsc","publicKey":"0x7a28A5f468A996782634399919B2425a944EB3bc"},{"chain":"optimism","publicKey":"0x7a28A5f468A996782634399919B2425a944EB3bc"},{"chain":"arbitrum","publicKey":"0x7a28A5f468A996782634399919B2425a944EB3bc"},{"chain":"base","publicKey":"0x7a28A5f468A996782634399919B2425a944EB3bc"},{"chain":"zora","publicKey":"0x7a28A5f468A996782634399919B2425a944EB3bc"},{"chain":"arbitrumnova","publicKey":"0x7a28A5f468A996782634399919B2425a944EB3bc"},{"chain":"solana","publicKey":"8RQy32UFgUeoT44U9sgmpCojXKp5aeaSFZJB5GqA2pZq"}]
先ほど作成したウォレットで署名してみましょう。
CLIENT_SECRET=
PROJECT_ID=
EMAIL
curl --request POST \
--url https://staging.crossmint.com/api/v1-alpha1/wallets/polygon:address/signMessage \
--header "accept: application/json" \
--header "content-type: application/json" \
--header "x-client-secret: $CLIENT_SECRET" \
--header "x-project-id: $PROJECT_ID"
こちら実行したのですが、現在開発環境では有効にされていないようです。開発者コンソールからAPIを作成するときに、署名に関する権限の項目がなさそうなので…。
{"error":true,"message":"The API key provided doesn't have the required scopes to perform this action: wallets:messages.sign. It has the scopes: nfts.create,nfts.delete,collections.create,collections.read,nfts.update,nfts.read,collections.update,wallets.read,wallets:nfts.read,wallets.create,wallets:nfts.transfer,nfts.checkout,billing.readonly."}
では最後にNFTの送付を実行してみましょう。
CLIENT_SECRET=
PROJECT_ID=
COLLECTION_ID=
TOKEN_ID=
FROM_ADDRESS=
TO_ADDRESS=
TOKEN_MINT_ADDRESS=
curl --request POST \
--url https://staging.crossmint.com/api/v1-alpha1/transfer \
--header "accept: application/json" \
--header "content-type: application/json" \
--header "x-client-secret: $CLIENT_SECRET" \
--header "x-project-id: $PROJECT_ID" \
--data '{"chain": "polygon",
"tokenId": "'"$TOKEN_ID"'",
"fromAddress": "'"$FROM_ADDRESS"'",
"toAddress": "'"$TO_ADDRESS"'",
"tokenMintAddress": "'"$TOKEN_MINT_ADDRESS"'"
}'
上記を実行しましたが、どうやら権限がないようでうまくいきませんでした。API Keyの設定では権限付与しているのですが、パラメーターが間違っているのかうまくいきませんでした…。
後味悪目ですね…。
今回は
NFTをクレカなどで購入できたり、APIを通じてウォレットの作成の簡易化や様々なNFTのサポートを行うことができるサービスである「Crossmint」の実装についてまとめてきました。
全てのAPIを試していないですが、これで基礎理解につながったのではないでしょうか?JavaScriptなど使って、自身のプロジェクトのWebサービスやアプリに組み込むことができるので、この記事を機にぜひ組み込んでみてください!
今後も技術的な部分を中心にわかりやすくまとめていこうと思います。
他の媒体でも情報発信しているのでよければ見ていってください!