{"id":31817683,"url":"https://github.com/crossmint/hosted-checkout-quickstart","last_synced_at":"2026-07-26T02:31:35.193Z","repository":{"id":294951734,"uuid":"988600534","full_name":"Crossmint/hosted-checkout-quickstart","owner":"Crossmint","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-22T20:04:18.000Z","size":1632,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-22T21:28:58.311Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://hosted-checkout-quickstart.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Crossmint.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-22T19:40:56.000Z","updated_at":"2025-05-22T20:07:27.000Z","dependencies_parsed_at":"2025-05-22T21:30:16.267Z","dependency_job_id":"15891aa7-4fb0-440e-b1f2-0fe91dd0b723","html_url":"https://github.com/Crossmint/hosted-checkout-quickstart","commit_stats":null,"previous_names":["crossmint/hosted-checkout-quickstart"],"tags_count":0,"template":false,"template_full_name":"Crossmint/embedded-checkout-quickstart","purl":"pkg:github/Crossmint/hosted-checkout-quickstart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crossmint%2Fhosted-checkout-quickstart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crossmint%2Fhosted-checkout-quickstart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crossmint%2Fhosted-checkout-quickstart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crossmint%2Fhosted-checkout-quickstart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Crossmint","download_url":"https://codeload.github.com/Crossmint/hosted-checkout-quickstart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crossmint%2Fhosted-checkout-quickstart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279006851,"owners_count":26084204,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-11T10:23:16.195Z","updated_at":"2026-07-26T02:31:35.186Z","avatar_url":"https://github.com/Crossmint.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg width=\"200\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/8b617791-cd37-4a5a-8695-a7c9018b7c70\" /\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003ch1\u003eHosted Checkout Quickstart\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://hosted-checkout.demos-crossmint.com/\"\u003eLive Demo\u003c/a\u003e | \u003ca href=\"https://docs.crossmint.com/payments/pay-button/overview\"\u003eDocs\u003c/a\u003e | \u003ca href=\"https://www.crossmint.com/quickstarts\"\u003eSee all quickstarts\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cimg src=\"./assets/hosted.png\" alt=\"Hosted Checkout Quickstart\" width=\"full\"\u003e\n\u003c/div\u003e\n\n## Introduction\n\nAllow your customers to buy NFTs with credit card and crypto payments, using Crossmint's hosted checkout. This quickstart provides a seamless integration for accepting payments in your dApp.\n\n**Key features:**\n\n- Accept fiat payments via credit, debit card, Apple Pay and Google Pay\n- Accept crypto payments\n- Deliver NFTs directly to a buyer's wallet or email address\n- Detect the on-chain delivery and show a success screen linking to the transaction on the block explorer\n\n### Prerequisites\n\n- Create a developer account in the [Staging Console](https://staging.crossmint.com/signin?callbackUrl=/console).\n- Create a [new collection](https://docs.crossmint.com/payments/guides/create-collection) or [import yours](https://docs.crossmint.com/payments/guides/register-collection) in the console, and have your `collectionId` ready.\n- Make sure your collection has at least one NFT configured\n- From the detail view of your collection, navigate to the Checkout tab to configure the pricing settings and enable Credit Card and Crypto payments.\n\n## Deploy\n\nEasily deploy the template to Vercel with the button below. You will need to set the required environment variables in the Vercel dashboard.\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FCrossmint%2Fhosted-checkout-quickstart\u0026env=NEXT_PUBLIC_CROSSMINT_API_KEY\u0026env=NEXT_PUBLIC_CROSSMINT_COLLECTION_ID)\n\n## Setup\n\n1. Clone the repository and navigate to the project folder:\n\n    ```bash\n    git clone https://github.com/crossmint/hosted-checkout-quickstart.git \u0026\u0026 cd hosted-checkout-quickstart\n    ```\n\n2. Install all dependencies:\n\n    ```bash\n    npm install\n    # or\n    yarn install\n    # or\n    pnpm install\n    # or\n    bun install\n    ```\n\n3. Set up the environment variables by copying the template file:\n\n    ```bash\n    cp .env.template .env\n    ```\n\n4. Add your Crossmint `collectionId` to the `.env` file.\n\n    ```bash\n    NEXT_PUBLIC_CROSSMINT_COLLECTION_ID=your_collection_id\n    ```\n\n5. Get your client-side API key from the [Crossmint Console Overview](https://staging.crossmint.com/console/overview) and add it to the `.env` file.\n\n    ```bash\n    NEXT_PUBLIC_CROSSMINT_API_KEY=your_api_key\n    ```\n\n6. Run the development server:\n\n    ```bash\n    npm run dev\n    # or\n    yarn dev\n    # or\n    pnpm dev\n    # or\n    bun dev\n    ```\n\n## How delivery detection works\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"./assets/success.png\" alt=\"Success screen with the mint transaction linked on the block explorer\" width=\"600\"\u003e\n\u003c/div\u003e\n\nThe hosted checkout runs on Crossmint's page, so this app doesn't receive a\ncallback when the order completes. Instead, when the buyer opens the checkout,\nthe app resolves the recipient email to its wallet address (via a draft order\nquote, using the same public client API key) and polls public RPCs for the\nincoming ERC-721 transfer. The matching log provides the mint transaction\nhash shown on the success screen. See\n[`lib/delivery-watcher.ts`](./lib/delivery-watcher.ts). No server-side API\nkey or extra environment variables required.\n\nThe demo is configured for Base Sepolia. To use another chain, update the\n`CHAIN`, `RPC_URLS` and `EXPLORER_BASE_URL` constants in\n[`lib/delivery-watcher.ts`](./lib/delivery-watcher.ts) and the\n`defaultChain` payment option in [`app/page.tsx`](./app/page.tsx). The\nrecipient email the watcher tracks is also set in\n[`app/page.tsx`](./app/page.tsx).\n\n## Using in production\n\n1. Create an account in the [Production Console](https://www.crossmint.com/signin?callbackUrl=/console), add your collection and configure the payment settings from the Checkout tab.\n2. Verify your account as the project owner and verify your collection. [Learn more](https://docs.crossmint.com/introduction/platform/account-verification) about verifications.\n3. Update your `.env` file with your production variables.\n4. Deploy your application to a production environment.\n\n## Advanced Usage\n\nFor advanced usage, refer to the Crossmint documentation:\n\n- Customize the UI: [https://docs.crossmint.com/payments/pay-button/guides/ui-customization](https://docs.crossmint.com/payments/pay-button/guides/ui-customization)\n- Edit payment methods: [https://docs.crossmint.com/payments/pay-button/guides/payment-methods](https://docs.crossmint.com/payments/pay-button/guides/payment-methods)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrossmint%2Fhosted-checkout-quickstart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrossmint%2Fhosted-checkout-quickstart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrossmint%2Fhosted-checkout-quickstart/lists"}