NFT Stripe Checkout

Mintbase · Mar 5, 2024 · 8e6179c · 8e6179c
1 parent 8148a6f
commit 8e6179c
Show file tree

Hide file tree

Showing 19 changed files with 34 additions and 31 deletions.
diff --git a/ai-chat/README.md b/ai-chat/README.md
@@ -4,7 +4,7 @@
 Turn Your AI Passion into NFT Profits: A Blueprint for Aspiring Digital Moguls! Customize this AI Chat example to capture value for your next AI product.
 
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://ai-chat.mintbase.xyz)
-[![Deploy](https://img.shields.io/badge/Deploy-on%Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fai-chat)
+[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fai-chat)
 
 **Tooling:**
 

diff --git a/ai-minter/README.md b/ai-minter/README.md
@@ -5,7 +5,7 @@
 Dreams to NFTs: AI Image Generation & Minting built with Replicate Models and MintbaseJS.
 
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://ai-minter.mintbase.xyz/)
-[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fai-minter)
+[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fai-minter&env=REPLICATE_API_TOKEN,NEXT_PUBLIC_MINT_CONTRACT_ADDRESS,NEXT_PUBLIC_PROXY_CONTRACT_ADDRESS,NEXT_PUBLIC_NETWORK&envDescription=API%20Keys%20for%20AI%20Minter&envLink=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Fblob%2Ffix-share-projects%2Fai-minter%2FREADME.md%23setup)
 
 **Tooling:**
 

diff --git a/ai-minter/src/components/Social.tsx b/ai-minter/src/components/Social.tsx
@@ -20,7 +20,7 @@ export const SocialMedias = () => {
 
   return (
     <div className="relative pt-5 top-0 left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"

diff --git a/blogchain/src/components/social.tsx b/blogchain/src/components/social.tsx
@@ -20,7 +20,7 @@ export const SocialMedias = () => {
 
   return (
     <div className="fixed pt-5 top-[70px] left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"

diff --git a/marketplace/README.md b/marketplace/README.md
@@ -5,7 +5,7 @@
 Unlock Your NFT Storefront: Clone & Customize Your Path to Blockchain Success with this whitelabel marketplace template!
 
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://marketplace-template.mintbase.xyz/)
-[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fmarketplace)
+[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fmarketplace&env=NEXT_PUBLIC_AFFILIATE_ACCOUNT,NEXT_PUBLIC_STORES,NEXT_PUBLIC_NETWORK&envDescription=API%20Keys%20for%20Markeplace&envLink=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fmarketplace%23set-env-variables)
 
 **Tooling:**
 
@@ -46,7 +46,7 @@ Before proceeding, it is important to have a wallet connection feature implement
 
 ## Step 2: Get NFTs from Store
 
-In this example, we utilized react-query to manage the loading state when retrieving NFTs from the contract via the storeNfts method. This method returns all listed NFTs from the specified contract, allowing you to display them in the user interface. 
+In this example, we utilized react-query to manage the loading state when retrieving NFTs from the contract via the storeNfts method. This method returns all listed NFTs from the specified contract, allowing you to display them in the user interface.
 
 ```ts
 // src/hooks/useStoreNfts.ts

diff --git a/marketplace/src/components/Social.tsx b/marketplace/src/components/Social.tsx
@@ -20,7 +20,7 @@ export const SocialMedias = () => {
 
   return (
     <div className="fixed pt-5 top-[60px] left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"

diff --git a/minter/README.md b/minter/README.md
@@ -3,7 +3,7 @@
 This is a simple minter example built on top of Next.js 14
 
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://minter.mintbase.xyz/)
-[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fminter)
+[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Fblob%2Fmain%2Fminter%2F&env=NEXT_PUBLIC_MINT_CONTRACT_ADDRESS,NEXT_PUBLIC_PROXY_CONTRACT_ADDRESS,NEXT_PUBLIC_NETWORK&envDescription=API%20Keys%20for%20Markeplace&envLink=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Fblob%2Fmain%2Fminter%2FREADME.md%23env-variables)
 
 **Tooling:**
 

diff --git a/minter/src/components/Social.tsx b/minter/src/components/Social.tsx
@@ -20,7 +20,7 @@ export const SocialMedias = () => {
 
   return (
     <div className="absolute pt-5 top-2 left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"

diff --git a/nft-stripe-checkout/README.md b/nft-stripe-checkout/README.md
@@ -3,7 +3,7 @@
 NFT-Stripe-Checkout is a Next.js project that provides a checkout interface for purchasing NFTs using Stripe.
 
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://nft-stripe-checkout.mintbase.xyz)
-[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fnft-stripe-checkout)
+[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fnft-stripe-checkout&env=NEXT_PUBLIC_NFT_CONTRACT_ADDRESS,NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,NEXT_PUBLIC_MINTBASE_WALLET_URL,NEXT_PUBLIC_NETWORK&envDescription=API%20Keys%20for%20NFT%20Stripe%20Checkout&envLink=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fnft-stripe-checkout%23environment-variables)
 
 **Tooling:**
 
@@ -27,9 +27,11 @@ Note that this is currently a testnet-only template. It allows you to define a s
 
 ## Setup
 
-1. First [deploy](https://mintbase.xyz/auth) a Mintbase Contract
+1. First [deploy](https://testnet.mintbase.xyz/auth) a Testnet Mintbase Contract
 
-2. Add `mintbus.testnet` as a minter to deployed contract contract
+2. Add `mintbus.testnet` as a minter to deployed contract contract, under Contract Settings
+
+3. Login to your Stripe Account and [find API Keys](https://support.stripe.com/questions/locate-api-keys-in-the-dashboard) under developer section (get Publishable Key)
 
 ### Environment Variables
 
@@ -38,7 +40,7 @@ Checkout `.env.example` and create a local env file (`.env.local`) with:
 
 ```
 NEXT_PUBLIC_NFT_CONTRACT_ADDRESS="stripeteststore.mintspace2.testnet"
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=""
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="""
 NEXT_PUBLIC_MINTBASE_WALLET_URL="https://testnet.wallet.mintbase.xyz"
 NEXT_PUBLIC_NETWORK="testnet"
 ```

diff --git a/nft-stripe-checkout/src/app/page.tsx b/nft-stripe-checkout/src/app/page.tsx
@@ -54,16 +54,17 @@ function PurchasePage() {
   };
 
   if (!process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY) {
-    throw 'Did you forget to add a ".env.local" file?';
+    console.log('Did you forget to add a ".env.local" file?');
   }
-  const stripe = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
+
+  const stripe = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || 'pk_test_u3xKazkyGGPUI4gME4iKwVgv00D8HG8H4X');
 
   return (
     <main className="flex flex-col gap-y-8 items-center p-4 md:p-12">
       <div className="flex flex-col gap-8 border border-gray-700 rounded-xl p-12 items-center shadow-[12px_12px_12px_rgb(55,65,81,0.5)]">
         <div className="flex flex-col gap-2 items-center">
-          <h2 className="text-xl font-extrabold">{"Token Title"}</h2>
-          <p className="text-gray-500">{"A description of your NFT."}</p>
+          <h2 className="text-xl font-extrabold">Token Title</h2>
+          <p className="text-gray-500">A description of your NFT.</p>
           <img
             className="w-36"
             src="https://arweave.net/eUdPgtRlT9Ua8ZHsGuNi1P8TUfVJaGUTH42NB1i1s4E"

diff --git a/nft-stripe-checkout/src/components/social.tsx b/nft-stripe-checkout/src/components/social.tsx
@@ -19,8 +19,8 @@ export const SocialMedias = () => {
   const title = "Mintbase Templates - NFT Stripe Checkout";
 
   return (
-    <div className="fixed pt-5 top-[70px] left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+    <div className="fixed pt-5 bottom-[30px] left-0  w-full h-[30px] z-50">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"

diff --git a/nft-stripe-checkout/src/lib/constants.ts b/nft-stripe-checkout/src/lib/constants.ts
@@ -1,11 +1,11 @@
-const network = process.env.NEXT_PUBLIC_NETWORK || "mainnet";
+const network = process.env.NEXT_PUBLIC_NETWORK || "testnet";
 const priceUsd = process.env.NEXT_PUBLIC_PRICE_USD || 1000;
 const callbackUrl = process.env.NEXT_PUBLIC_CALLBACK_URL || "http://localhost:3000";
 
 const tokenContractAddress = process.env.NEXT_PUBLIC_NFT_CONTRACT_ADDRESS;
 
 const mintbaseWalletUrl =
-  process.env.NEXT_PUBLIC_MINTBASE_WALLET_URL || "https://wallet.mintbase.xyz";
+  process.env.NEXT_PUBLIC_MINTBASE_WALLET_URL || "https://testnet.wallet.mintbase.xyz";
 
 export const constants = {
   tokenContractAddress,

diff --git a/simple-token-drop/README.md b/simple-token-drop/README.md
@@ -3,7 +3,7 @@
 This example illustrates the creation of a straightforward minting landing page with pre-defined metadata.
 
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://token-drop-template.mintbase.xyz/)
-[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fsimple-token-drop)
+[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fsimple-token-drop&env=NEXT_PUBLIC_REFERENCE_URL,NEXT_PUBLIC_MEDIA_URL,NEXT_PUBLIC_NFT_CONTRACT,NEXT_PUBLIC_CALLBACK_URL,SERVER_WALLET_PK,SERVER_WALLET_ID&envDescription=API%20Keys%20for%20Simple%20Token%20Drop)
 
 **Tooling:**
 

diff --git a/simple-token-drop/src/app/constants.ts b/simple-token-drop/src/app/constants.ts
@@ -1,5 +1,5 @@
-export const SERVER_WALLET_ID = process.env.SERVER_WALLET_ID
-export const SERVER_WALLET_PK = process.env.SERVER_WALLET_PK
+export const SERVER_WALLET_ID = process.env.SERVER_WALLET_ID || 'relayer_test.testnet'
+export const SERVER_WALLET_PK = process.env.SERVER_WALLET_PK || 'ed25519:5hjzfEBKU8o317bymitAz9kZdsQCT5ZBeDdgRgJcEmgJfMLYiRG83kkkkRLeS8bkxtE2cGsDBtSgfTHEfhKiMDqe'
 export const NETWORK = process.env.NETWORK || 'testnet'
 export const WALLET_AUTO_IMPORT_URL = `https://${NETWORK + "."}wallet.mintbase.xyz/import/private-key#`
 export const WALLET_DEEP_LINK = `https://${NETWORK + "."}wallet.mintbase.xyz/sign-transaction?transactions_data=`
@@ -18,8 +18,8 @@ export const CLIENT_MINT_ARGS = {
         nft_contract_id: NFT_CONTRACT
       },
     gas: "200000000000000",
-    deposit: "10000000000000000000000",        
+    deposit: "10000000000000000000000",
         }
     }
 
-export const PROXY_CONTRACT = '0.drop.proxy.mintbase.testnet'    
+export const PROXY_CONTRACT = '0.drop.proxy.mintbase.testnet'
diff --git a/simple-token-drop/src/components/Social.tsx b/simple-token-drop/src/components/Social.tsx
@@ -20,7 +20,7 @@ export const SocialMedias = () => {
 
   return (
     <div className="fixed pt-5 top-[5px] left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"

diff --git a/starter-next/README.md b/starter-next/README.md
@@ -26,7 +26,7 @@ Welcome to the NEAR ecosystem—an exciting space where development meets innova
 
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://starter.mintbase.xyz)
 
-[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fstarter)
+[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fstarter-next&env=NEXT_PUBLIC_NETWORK,NEXT_PUBLIC_CONTRACT_ADDRESS,NEXT_PUBLIC_CALLBACK_URL&envDescription=API%20Keys%20for%20Starter%20Next&envLink=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fstarter-next)
 
 
 

diff --git a/starter-next/src/components/Social.tsx b/starter-next/src/components/Social.tsx
@@ -20,7 +20,7 @@ export const SocialMedias = () => {
 
   return (
     <div className="fixed pt-5 top-[10px] left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"

diff --git a/starter-vite/README.md b/starter-vite/README.md
@@ -3,7 +3,7 @@
 This is a simple-login project with support to Vite
 
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://starter.mintbase.xyz)
-[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fstarter)
+[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fstarter-vite&env=VITE_NETWORK,VITE_CONTRACT_ADDRESS,VITE_CALLBACK_URL&envDescription=API%20Keys%20for%20Starter%20Vite&envLink=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Fblob%2Fmain%2Fstarter-vite%2FREADME.md%23setup)
 
 **Tooling:**
 

diff --git a/starter-vite/src/Social.tsx b/starter-vite/src/Social.tsx
@@ -20,7 +20,7 @@ export const SocialMedias = () => {
 
   return (
     <div className=" socialMedia absolute pt-5 top-[60px] left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"