diff --git a/docs/onboarding/0 0 Home.mdx b/docs/onboarding/0 0 Home.mdx index f2bfb1014..76a4c2796 100644 --- a/docs/onboarding/0 0 Home.mdx +++ b/docs/onboarding/0 0 Home.mdx @@ -11,6 +11,7 @@ import LanguageCard from "@components/landing-page/LanguageCard"; import ToolCardsSection from "@components/landing-page/ToolCardsSection"; import WalletsCardsSection from "@components/landing-page/WalletsCardsSection"; import ContractsCardsSection from "@components/landing-page/ContractsCardsSection"; +import PaymentsCardsSection from "@components/landing-page/PaymentsCardsSection"; import InfrastructureCardsSection from "@components/landing-page/InfrastructureCardsSection"; import SolutionsCardsSection from "@components/landing-page/SolutionsCardsSection"; import LearnSection from "@components/landing-page/LearnSection"; @@ -25,6 +26,7 @@ import ResourcesSection from "@components/landing-page/ResourcesSection"; +

SDKs

diff --git a/docs/onboarding/22 NFT Checkouts/0 Overview.mdx b/docs/onboarding/22 NFT Checkouts/0 Overview.mdx index ed1b47311..545026783 100644 --- a/docs/onboarding/22 NFT Checkouts/0 Overview.mdx +++ b/docs/onboarding/22 NFT Checkouts/0 Overview.mdx @@ -15,7 +15,7 @@ any supported payment option. You and your buyers can expect instant payouts and | Fiat | Credit & Debit Cards, Apple Pay, Google Pay | | Crypto | ETH | -Card and other fiat payments are accepted from all 50 US states and most countries. +Card and other fiat payments are accepted from all 50 US states and US-sanctioned countries. ### Supported chains and currencies @@ -42,7 +42,10 @@ Card and other fiat payments are accepted from all 50 US states and most countri | Sepolia | ETH | | Zora Testnet | ETH | -\* - ERC-20 tokens are available for pro or enterprise customers only. +<<<<<<< HEAD \* - ERC-20 payments are available for pro or enterprise customers only. +======= \* - ERC-20 tokens are available for pro or enterprise customers only. + +> > > > > > > main ### Fraud prevention & chargeback protection diff --git a/docs/onboarding/22 NFT Checkouts/1a Integration/1 Shareable Checkout Link.mdx b/docs/onboarding/22 NFT Checkouts/1a Integration/1 Shareable Checkout Link.mdx index c184cf140..fa0cc65e5 100644 --- a/docs/onboarding/22 NFT Checkouts/1a Integration/1 Shareable Checkout Link.mdx +++ b/docs/onboarding/22 NFT Checkouts/1a Integration/1 Shareable Checkout Link.mdx @@ -21,10 +21,9 @@ Make sure you've [enabled your contract for Payments](enable-contract) first. ### Dashboard 1. Navigate into your contract from the [Contracts > Deploy dashboard page](https://thirdweb.com/dashboard/contracts/deploy). -2. Navigate to the "Payments" page from the sidebar. +2. Navigate to the "Payments" page from the sidebar. 3. Click the "Create New Checkout" button - ![Create a new checkout link from the dashboard](./assets/checkout-link/create-new-checkout-link.jpg) -4. Customize the look and feel of your checkout experience, and hit "Create" + ![Create a new checkout link from the dashboard](./assets/checkout-link/create-new-checkout-link.jpg) ### API diff --git a/docs/onboarding/22 NFT Checkouts/1b Advanced Guides/0 Webhooks.mdx b/docs/onboarding/22 NFT Checkouts/1b Advanced Guides/0 Webhooks.mdx index b03b8eb40..0b01df262 100644 --- a/docs/onboarding/22 NFT Checkouts/1b Advanced Guides/0 Webhooks.mdx +++ b/docs/onboarding/22 NFT Checkouts/1b Advanced Guides/0 Webhooks.mdx @@ -138,7 +138,7 @@ Do not provide a `localhost` URL to test your local server. We recommend testing To ensure the request came from thirdweb, each webhook request signs the payload and provides this signature in the `x-thirdweb-signature` header. -To verify this signature, create a **SHA-256 HMAC hash** with your **thirdweb payments secret key** that can be found in the thirdweb dashboard [payments settings](https://thirdweb.com/dashboard/payments/settings) and the **body payload as the message** (as a JSON-encoded string). +To verify this signature, create a **SHA-256 HMAC hash** with your **thirdweb payments secret key** that can be found on [your Payments Settings page](https://thirdweb.com/dashboard/payments/settings) and the **body payload as the message** (as a JSON-encoded string). ### Example implementation @@ -148,7 +148,7 @@ Here's a simplified HTTP handler in Next.js: import { createHmac, timingSafeEqual } from "crypto"; const thirdwebCheckoutsWebhookHandler = (req, res) => { - const apiKey = ""; // Your thirdweb payments secret key + const webhookSecret = ""; // Your webhook secret key // Get the provided signature. const signature = req.headers["x-thirdweb-signature"]; diff --git a/docs/onboarding/22 NFT Checkouts/1b Advanced Guides/5 Pre-Built Contracts.mdx b/docs/onboarding/22 NFT Checkouts/1b Advanced Guides/5 Pre-Built Contracts.mdx new file mode 100644 index 000000000..f47d500fe --- /dev/null +++ b/docs/onboarding/22 NFT Checkouts/1b Advanced Guides/5 Pre-Built Contracts.mdx @@ -0,0 +1,65 @@ +--- +slug: /checkouts/thirdweb-contracts +title: Pre-Built Contracts +--- + +## Integration + +For some thirdweb contracts, set `contractArgs` when creating [Shareable Checkout Links](/checkouts/checkout-link), [One-Time Checkout Links](/checkouts/one-time-checkout-link), or [Checkout Elements](/checkouts/elements). + +### NFT Drop + +This is an ERC-721A contract where the NFT metadata is unique but the claim configuration is identical for all buyers. No `contractArgs` should be set. + +### Edition Drop + +This is an ERC-1155 contract where the NFT metadata and claim configuration is identical for all buyers. Set `contractArgs` with the token ID to mint: + +```typescript +contractArgs = { tokenId: "0" }; +``` + +### Marketplace + +This is a contract that allows other users to purchase already-minted NFTs. Set `contractArgs` with an array of the marketplace listing IDs of each of the direct listing: + +```typescript +contractArgs = { + listings: [ + { listingId: "0" }, + { listingId: "1" }, + ... + ] +} +``` + +## Configure the Claim Condition + +Your thirdweb contract must have at least one active claim condition, meaning the **When will this phase start?** date is in the past. + +![Claim Condition Configuration Image](https://files.readme.io/994d683-image.png) + +Helpful tips for each field: + +| Field | Notes | +| ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **When will this phase start?** | thirdweb can only mint NFTs after this date. | +| **How many NFTs will you drop in this phase?** | Remember to create NFTs on the **NFTs** tab for NFT Drop contracts. | +| **How much do you want to charge to claim each NFT?** | For Mumbai, this price must be ≤ 0.0001 MATIC.
For Goerli, this price must be ≤ 0.0001 ETH.

On production, there is a $2,000 price limit. Please fill out [this Typeform](https://fw3786mcxwl.typeform.com/to/B0xIFoiu) to request an increase. | +| **What currency do you want to use?** | Supported currencies on thirdweb:
- Mumbai: MATIC
- Polygon: MATIC, USDC, WETH
- Goerli: ETH
- Ethereum: ETH, USDC | +| **Who can claim NFTs during this phase?** | If you have an allowlist, please add thirdweb's minter wallets.
Otherwise leave this blank. | +| **How many NFTs can be claimed per transaction?** | This value must be Unlimited. Otherwise thirdweb's minter wallets will not be able to mint more than this amount. | +| **How many seconds do wallets have to wait in-between claiming?** | This value must be 0. Otherwise thirdweb's minter wallets will fail when many mints occur at once. | + +## Debug common blockchain error responses + +| Error Message | Description | Solution | +| ------------------ | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `!Qty` | The buyer is attempting to purchase more than allowed per wallet. | **:warning: Your Claim Condition must allow thirdweb Wallets to mint an unlimited amount.**

The **How many NFTs can be claimed per transaction?** setting must be set to Unlimited. Alternatively, allow thirdweb's minter wallets to mint the full supply in a snapshot. | +| `!MaxSupply` | The buyer is attempting to purchase more than the available supply, or the drop is sold out. | Allow more NFTs to be sold, or prevent buyers from navigating to the checkout page if sold out. | +| `cant claim yet` | There is no claim phase, or the claim phase has not started. | Wait until the claim phase has started, or set one claim phase's start date to a past date. | +| `!PriceOrCurrency` | thirdweb sent the incorrect amount or currency to the contract. | thirdweb may be auto-detecting the price incorrectly. Please reach out on [Discord](https://discord.gg/thirdweb). | + +_Source: Drop.sol from thirdweb contracts_ + +If your transactions are failing for these reasons, please update the active **Claim Condition** on your thirdweb contract. diff --git a/docs/onboarding/22 NFT Checkouts/2 API Reference.mdx b/docs/onboarding/22 NFT Checkouts/2 API Reference.mdx index ac9bfc4a7..f8d5884d9 100644 --- a/docs/onboarding/22 NFT Checkouts/2 API Reference.mdx +++ b/docs/onboarding/22 NFT Checkouts/2 API Reference.mdx @@ -16,7 +16,7 @@ The Payments API enables all the functionalities needed to create checkouts. You must use an API Secret Key to make authenticated calls. These calls should be made from your backend. [Create an API Key from your thirdweb dashboard.](https://thirdweb.com/dashboard/settings/api-keys) -Provide your secret key as a header: `x-secret-key: your_api_secret_key` +Provide your secret key as a header: `thirdweb_secret_key: your_api_secret_key` --- diff --git a/docs/onboarding/22 NFT Checkouts/assets/checkout-with-card-customization-demo.png b/docs/onboarding/22 NFT Checkouts/assets/checkout-with-card-customization-demo.png index 7d626a441..907a9a37c 100644 Binary files a/docs/onboarding/22 NFT Checkouts/assets/checkout-with-card-customization-demo.png and b/docs/onboarding/22 NFT Checkouts/assets/checkout-with-card-customization-demo.png differ diff --git a/docs/onboarding/22 NFT Checkouts/assets/checkout-with-card-demo.png b/docs/onboarding/22 NFT Checkouts/assets/checkout-with-card-demo.png index d3305f133..4fe895275 100644 Binary files a/docs/onboarding/22 NFT Checkouts/assets/checkout-with-card-demo.png and b/docs/onboarding/22 NFT Checkouts/assets/checkout-with-card-demo.png differ diff --git a/docs/onboarding/22 NFT Checkouts/assets/checkout-with-eth-demo-2.png b/docs/onboarding/22 NFT Checkouts/assets/checkout-with-eth-demo-2.png index f02f6317a..687ed9098 100644 Binary files a/docs/onboarding/22 NFT Checkouts/assets/checkout-with-eth-demo-2.png and b/docs/onboarding/22 NFT Checkouts/assets/checkout-with-eth-demo-2.png differ diff --git a/docs/onboarding/22 NFT Checkouts/assets/checkout-with-eth-demo.png b/docs/onboarding/22 NFT Checkouts/assets/checkout-with-eth-demo.png index 4cad57a29..93bbba277 100644 Binary files a/docs/onboarding/22 NFT Checkouts/assets/checkout-with-eth-demo.png and b/docs/onboarding/22 NFT Checkouts/assets/checkout-with-eth-demo.png differ diff --git a/docs/onboarding/22 NFT Checkouts/assets/checkouts-overview.png b/docs/onboarding/22 NFT Checkouts/assets/checkouts-overview.png index d047ea0df..14c7a24d9 100644 Binary files a/docs/onboarding/22 NFT Checkouts/assets/checkouts-overview.png and b/docs/onboarding/22 NFT Checkouts/assets/checkouts-overview.png differ diff --git a/src/components/landing-page/PaymentsCardsSection.tsx b/src/components/landing-page/PaymentsCardsSection.tsx new file mode 100644 index 000000000..3168ba36f --- /dev/null +++ b/src/components/landing-page/PaymentsCardsSection.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import ProductCard from "./ProductCard"; + +type Product = { + image: string; + name: string; + description: string; + link: string; +}; + +const products: Product[] = [ + { + image: "/assets/product/checkout.png", + name: "NFT Checkout", + description: + "Secure payments flows that enable your users to purchase NFTs with their credit card", + link: "/checkouts", + }, +]; + +export default function PaymentsSection() { + return ( +
+

+ Payments +

+
+ {products.map((p, i) => ( +
+ +
+ ))} +
+
+ ); +} diff --git a/src/theme/DocSidebarItem/Link/index.js b/src/theme/DocSidebarItem/Link/index.js index ac4c9c534..3c9db84f0 100644 --- a/src/theme/DocSidebarItem/Link/index.js +++ b/src/theme/DocSidebarItem/Link/index.js @@ -42,6 +42,7 @@ export const iconMapping = { Engine: "/assets/product/sdk.png", "Bundler & Paymaster": "/assets/wallets/smart-wallet.svg", "RPC Edge": "/assets/product/sdk.png", + "NFT Checkouts": "/assets/product/checkout.png", Gaming: "/assets/product/sdk.png", }; diff --git a/static/assets/product/checkout.png b/static/assets/product/checkout.png new file mode 100644 index 000000000..6a4fab365 Binary files /dev/null and b/static/assets/product/checkout.png differ