Payments updates (#1122)

* Payments Documentation - Initial setup * Lots of content * Basic FAQ * Update links * More guides content * Update some references and outdated info * Add TODOs * Organizational changes * Language tweaks * Section updates * Add images, embedded elements basics * Updates * Modify FAQ * Additional fixes * Full API Reference * Some updates * updating checkoutwithcard docs * bug fix * chore: updated supported checkout chains (#1076) * chore: updated supported checkout chains * updated currencies * updated whitespace * chore: added custom_contracts, thirdweb, and erc20 pages (#1106) * updated payments webhooks docs * update payments webhooks signature header * update copy for thirdweb payments webhook secret key * chore: updated integration pages (#1116) * Update text * Text change * Update docs to reflect docs-v2 changes * Fix docs issues from launch review and test jam --------- Co-authored-by: Edward Sun <[email protected]> Co-authored-by: samina <[email protected]> Co-authored-by: Isaac Dubuque <[email protected]> Co-authored-by: Gerry Saporito <[email protected]> Co-authored-by: Ian Mukherjee <[email protected]>
thirdweb-dev · Dec 18, 2023 · 50af417 · 50af417 · vercel · Dec 18, 2023
1 parent b78126a
commit 50af417
Show file tree

Hide file tree

Showing 14 changed files with 119 additions and 8 deletions.
diff --git 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";
 <WalletsCardsSection />
 <ContractsCardsSection />
 <InfrastructureCardsSection />
+<PaymentsCardsSection />
 <ToolCardsSection />
 
 <h2>SDKs</h2>

diff --git 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
@@ -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
@@ -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_API_KEY>"; // Your thirdweb payments secret key
+  const webhookSecret = "<YOUR_API_SECRET_KEY>"; // 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
@@ -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. <br />For Goerli, this price must be ≤ 0.0001 ETH. <br /><br />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: <br />- Mumbai: MATIC <br />- Polygon: MATIC, USDC, WETH <br />- Goerli: ETH <br />- Ethereum: ETH, USDC                                                                                                                        |
+| **Who can claim NFTs during this phase?**                         | If you have an allowlist, please add thirdweb's minter wallets. <br />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.** <br /><br />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
@@ -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
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
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
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
diff --git a/docs/onboarding/22 NFT Checkouts/assets/checkouts-overview.png b/docs/onboarding/22 NFT Checkouts/assets/checkouts-overview.png
diff --git a/src/components/landing-page/PaymentsCardsSection.tsx 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 (
+    <div className="explore-products-container">
+      <h2 className="explore-products-heading" style={{ marginBottom: 12 }}>
+        Payments
+      </h2>
+      <div className="row" style={{ marginBottom: 64 }}>
+        {products.map((p, i) => (
+          <div className="col col--4" key={i} style={{ padding: 8 }}>
+            <ProductCard
+              image={p.image}
+              name={p.name}
+              description={p.description}
+              link={p.link}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git 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