Crossmint[実装編]

今回は「Crossmint」の実装についてまとめていきます。

Crossmintとは、NFTをクレカなどで購入できたり、APIを通じてウォレットの作成の簡易化や様々なNFTのサポートを行うことができるサービスです。

Crossmintについては、以下で詳しくまとめています。

支払い

この章では以下のチュートリアルを進めながら、法定通貨・クロスチェーン払いの実装をしていきます。

実装の手順は以下になります。

  1. NFTコレクションのコントラクトをCrossmintに登録する。

  2. Crossmint SDKを統合して、Webサイトから販売を開始します。実装には以下の3つの方法で行えます。

    • CrossmintがホストするWebページを使用して、コードを記述することなく支払いの受け入れを開始する。

    • Crossmintで支払いボタンを既存のWebサイトやアプリに追加し、ボタンをクリックすると支払いのフローが開始されます。

    • Webサイトやアプリ内に埋め込まれた、完全にカスタマイズされた独自の支払いUIを構築します。

  3. 発売のチェックリストを確認して、販売を開始する前に全て準備が整っていることを確認します。

また、以下のような高度な機能が実装できます。

  • 購入用のカスタム受け取りアドレスを指定する方法を学ぶ。

  • EVMおよびSolanaでアクセスリストを使用した支払いを受け入れる。

  • USDCを受け入れるコントラクトをCrossmintを使用する。

  • イベントコールバックをリッスンするためのWebhookを設定する。

NFTコレクションのコントラクトを登録

開発者アカウントの作成

以下にアクセスします。

以下が開くので、「Staging」タブをクリックしてメールアドレスやGoogleなどでログインしてください。

チェックボックスをクリックして、「Create your account」をクリックします。

以下のページが開けばOKです。

新しいコレクションの作成

この章では新しくNFTコレクションのコントラクトを作成します。

もし既存のコントラクトを使用する場合は以下の手順に従ってください。

Collections」タブをクリックし、「New collection」をクリックします。

以下に必要な情報を入力し、右下の「Next」をクリックします。

残りの手順は以下の公式のドキュメントを参考にしてください。

以下のように設定しています。

NFTコレクションを作成できたら、次にNFTを作成していきます。

以下の「Manual upload」をクリックしてください。

以下のように設定して、以下の「Create NFT」ボタンを押しました。

以下のようにNFTを作成できました。

支払いを受け入れるWebサイトを作成する

NFTのコレクションを作成したところで、次に支払いを受け入れる部分が必要です。

以下の3つの方法で作成できますが、今回は1番の方法で作成していきたいと思います。

  1. CrossmintがホストするWebページを使用して、コードを記述することなく支払いの受け入れを開始する。

  2. Crossmintで支払いボタンを既存のWebサイトやアプリに追加し、ボタンをクリックすると支払いのフローが開始されます。

  3. Webサイトやアプリ内に埋め込まれた、完全にカスタマイズされた独自の支払いUIを構築します。

以下の手順に従って進めてください。

手順は以下の「No-code storefront」タブをクリックすることで開始できます。

サイトデザイン

以下の手順に沿ってサイトデザインをしていきます。

自分の場合はこんな感じにしてみました。

その他の手順

  1. CrossmintがホストするWebページを使用して、コードを記述することなく支払いの受け入れを開始する。

  2. Crossmintで支払いボタンを既存のWebサイトやアプリに追加し、ボタンをクリックすると支払いのフローが開始されます。

  3. Webサイトやアプリ内に埋め込まれた、完全にカスタマイズされた独自の支払いUIを構築します。

今回は1️⃣の手順を確認してきましたが、2️⃣や3️⃣の手順を実行したい方は以下を参考にしてください。

2️⃣

3️⃣

販売開始前のチェック

実際に本番環境でNFTを販売開始する前に確認するべき事項が以下にまとめられています。

追加機能

その他の追加機能については以下にまとめられています。

API

この章ではCrossmintのMint APIを使用して、APIを使用したNFTコレクションやNFTの作成をしていきたいと思います。

以下がMint APIエンドポイントのドキュメントです。

開発者コンソールの登録

まだ開発者コンソールの登録をしていない方は、前章の一番最初で登録手順を紹介しているのでそちらを進めてください。

Mint APIの有効化

次にMint APIを有効化していきます。

以下のページにアクセスしてください。

API Keys」タブをクリックして、「New API Key」をクリックしてください。

以下のように全てのAPIにチェックを入れて、右下の「Create API Key」をクリックします。

プロジェクト例

以下の公式ドキュメントでは4つのMint APIを使用したプロジェクト例を紹介しています。

  • NFTをMintするTwitterボット。

    • メアドやウォレットアドレス宛にNFTをMintする。
  • NFTをMintするDiscordボット。

    • メアドやウォレットアドレス宛にNFTをMintする。
  • ノーコーディングでGoogleスプレッドシートからNFTをMint。

    • スプレッドシートにメアドやウォレットアドレスを記入することで、NFTをMintする。
  • Zapier経由でNFTのMint。

    • ノーコードで5,000以上のアプリと接続してNFTのMintを自動化。

コレクションの作成

Mint APIを使用してNFTコレクションを作成します。

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コレクションをリスト

自身のアカウント内で作成された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":"..."}}]}% 

NFTをMint

Mint APIを使用してNFTのコレクションを作成できたので、次にAPIを使用してNFTをMintしていこうと思います。

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"}}%       

上記のレスポンスを見てもらうとわかりますが、statuspendingになっています。Mintが完了するまで少し時間がかかるので、少し待ってから開発者コンソールで確認してみてください。

NFTの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"}}%  

statussuccessなのを確認できますね。

Compressed NFTのMint

低コストかつ最高のスループットでNFTをMintするSolanaブロックチェーンの仕組みを利用したMint方法です。

NFTの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"}}%                                                                       

MintしたNFTのステータス確認

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のMint

SFTとはERC20ERC721の特性を併せ持つERC1155のことです。この章ではMint APIを使用してERC1155をMintしていきます。

SFTコレクションの作成

まずは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

では最後に、先ほど作成したテンプレートをもとに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の編集

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の送付

では最後に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サービスやアプリに組み込むことができるので、この記事を機にぜひ組み込んでみてください!

今後も技術的な部分を中心にわかりやすくまとめていこうと思います。

他の媒体でも情報発信しているのでよければ見ていってください!

Subscribe to Cardene
Receive the latest updates directly to your inbox.
Mint this entry as an NFT to add it to your collection.
Verification
This entry has been permanently stored onchain and signed by its creator.