Payments Documentation (#1027)

* 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

---------

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]>

docs/onboarding/22 NFT Checkouts/0 Overview.mdx

@@ -0,0 +1,78 @@
+---
+slug: /checkouts
+title: Overview
+---
+
+Checkouts delivers the easiest NFT payments experience for you and your buyers. Sell NFTs on any one of our supported EVM chains and allow your users to pay with
+any supported payment option. You and your buyers can expect instant payouts and instant NFT processing - all done through your smart contract.
+
+![Checkouts overview](./assets/checkouts-overview.png)
+
+### Payment options for buyers
+
+| Payment Type | Supported Options                           |
+| :----------- | :------------------------------------------ |
+| 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.
+
+### Supported chains and currencies
+
+| Blockchain (Mainnet) | Supported Currencies            |
+| :------------------- | :------------------------------ |
+| Arbitrum Nova        | ETH                             |
+| Arbitrum One         | ETH, USDC.e\*                   |
+| Avalanche            | AVAX, USDC.e\*                  |
+| Ethereum             | ETH, USDC\*                     |
+| Optimism             | ETH, USDC\*                     |
+| Polygon              | MATIC, USDC\*, USDC.e\*, WETH\* |
+| Zora                 | ETH                             |
+
+###
+
+| Blockchain (Testnet) | Supported Currencies |
+| :------------------- | :------------------- |
+| Arbitrum Sepolia     | ETH                  |
+| Avalanche Fuji       | AVAX                 |
+| Base Goerli          | ETH                  |
+| Goerli               | ETH, USDC            |
+| Mumbai               | MATIC, USDC          |
+| Optimism Goerli      | ETH                  |
+| Sepolia              | ETH                  |
+| Zora Testnet         | ETH                  |
+
+\* - ERC-20 tokens are available for pro or enterprise customers only.
+
+### Fraud prevention & chargeback protection
+
+thirdweb deters bots and fraudulent activity by using multiple data points about the buyer's device, network, behavior, payment, and more. Only high-risk buyers will need to verify their identity with an ID and selfie.
+
+We protect you from these concerns by offering **full chargeback protection.**
+
+### Reliable NFT Delivery
+
+thirdweb manages a fleet of funded crypto wallets to handle blockchain transactions at scale. Queues are automated to monitor for stuck transactions, failed on-chain calls, and low funds.
+
+### Conversion-optimized UX
+
+Our checkout flow accounts for many cases to provide buyers a seamless experience with minimal steps:
+
+- Does the buyer need a crypto wallet or do they already have one?
+- Do they exhibit bot-like or suspicious behavior?
+- Do they have enough tokens to mint directly from their wallet?
+- Is your user trying to purchase more than one NFT?
+- Is your user allowlisted to purchase?
+- Are there enough NFTs remaining to purchase?
+
+### Webhooks & custom metadata
+
+Configure webhooks to notify your backend when payments and transfers are completed. Webhooks allow you to unlock NFT-gated utilities, send customized emails, and more.
+
+Provide custom metadata to tag purchases with added information.
+
+### Analytics
+
+View purchases to your checkouts including breakdowns by payment method and wallet. Export your data with additional details including buyer location, transaction hash, conversion rate, and custom metadata.
+
+Get visibility into failed transactions to speed up debugging and resolve support questions.

docs/onboarding/22 NFT Checkouts/1 Getting Started.mdx

@@ -0,0 +1,26 @@
+---
+slug: /checkouts/getting-started
+title: Getting Started
+---
+
+Get an end-to-end NFT checkout experience up and running in a few steps!
+
+## Prerequisite: Deploy your smart contract
+
+You can create or deploy a smart contract on thirdweb using [Deploy](https://thirdweb.com/dashboard/contracts/deploy).
+
+## 1. Enable your contract for Payments
+
+Visit the Payments dashboard or use the API to enable your contract for Payments. Start with the first step of our integration guide, [Enable Contract for Payments](enable-contract).
+
+## 2. Create your Checkout Link
+
+Generate a complete, pre-built checkout experience by [creating a Checkout Link](checkout-link).
+
+Want a more branded checkout embedded in your app? Visit the guide on [Embedded Checkout Elements](elements) instead.
+
+## 3. Launch!
+
+Make sure to review the [Go Live Checklist](go-live-checklist) prior to launch to ensure your setup is launch-ready.
+
+**Important note: you must provide personal documents (KYC) and business documents (KYB) at least 48 hours prior to launching on mainnet.**

docs/onboarding/22 NFT Checkouts/1a Integration/0 Register Contract.mdx

@@ -0,0 +1,27 @@
+---
+slug: /checkouts/enable-contract
+title: 1. Enable Contract for Payments
+---
+
+Enabling your contract for Payments is required to unlock Checkouts functionality. This can be done on the thirdweb dashboard or with the Payments API.
+
+## Prerequisites
+
+Before you start, ensure your contract is set up properly for Checkouts.
+
+- Using a thirdweb contract? [Ensure your contract is configured properly](thirdweb-contracts).
+- Using your own NFT contract? [Ensure your custom contract is compatible](custom-contracts).
+- Selling a token listed on a secondary marketplace? [Visit the marketplaces guide](marketplaces).
+
+## Enable a contract for Payments
+
+### 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.
+3. Click the "Enable Payments" button
+   ![Enable payments for contract](./assets/enable-contract/enable-payments-for-contract.jpg)
+
+### API
+
+[See the API Reference for enabling contracts for Payments](https://redocly.github.io/redoc/?url=https://payments.thirdweb.com/api/doc#tag/Contracts/paths/~1api~12022-08-12~1register-contract/post)

docs/onboarding/22 NFT Checkouts/1a Integration/1 Shareable Checkout Link.mdx

@@ -0,0 +1,35 @@
+---
+slug: /checkouts/checkout-link
+title: 2. Create a Checkout Link
+---
+
+Checkout Links are public, reusable URLs that allow buyers to complete a purchase with thirdweb's prebuilt checkout experience.
+
+## Prerequisites
+
+Make sure you've [enabled your contract for Payments](enable-contract) first.
+
+## Use cases
+
+- Integrate a functional, prebuilt checkout experience quickly.
+- Open your NFT's public sale to all buyers.
+- Charge your buyers the same price.
+- Request your buyer's details (email, wallet address) during checkout.
+
+## Create a checkout link
+
+### 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. 
+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"
+
+### API
+
+[See the API Reference for creating a checkout link](https://redocly.github.io/redoc/?url=https://payments.thirdweb.com/api/doc#tag/Checkout-Links/paths/~1api~12022-08-12~1shareable-checkout-link/post)
+
+## Branding
+
+Creating a Checkout Link is the fastest way to get started with thirdweb Checkouts. If you are looking for complete customization over branding and UX, check out the guide on [Embedded Elements](elements).

docs/onboarding/22 NFT Checkouts/1a Integration/4 Go Live Checklist.mdx

@@ -0,0 +1,44 @@
+---
+slug: /checkouts/go-live-checklist
+title: 3. Go Live Checklist
+---
+
+Before you go live on mainnet, be sure to review this checklist to ensure your production checkout launch goes smoothly.
+
+## 3.1 Test your expected flow works on testnet
+
+Testing on mainnet is costly! Please test your contract and checkout implementation on testnet.
+
+- For Polygon projects, please test on Mumbai.
+- For Ethereum projects, please test on Sepolia.
+- Visit the [overview page](/checkouts) to see a list of supported testnets.
+
+You should be able to test all critical aspects of your smart contract on testnet, including allowlists, signature-based mints, your custom mint method, etc.
+
+## 3.2 Provide personal and business information
+
+In order to accept fiat payments (credit cards, debit cards) on mainnet chains, we are required by law to verify your personal (KYC) and business (KYB) information. This information is collected purely for compliance purposes and is not used or shared for any other reason. **You must provide this information at least 48 hours prior to launch.**
+
+## 3.3 Set up production webhook endpoints
+
+Testnet and mainnet transactions call a different set of webhook endpoints. Make sure to add your production endpoint(s) in the Webhooks section of the dashboard before going live.
+
+## 3.4 Ensure your NFT is priced under $2,000 USD
+
+We currently limit checkouts to be priced under $2,000 USD by default. We may be able to change this at our discretion based on your checkout's risk profile.
+
+To request a higher price limit, please contact [email protected].
+
+## 3.5 Inform us of high volume launches
+
+If you are expecting very high sales volume, please reach out in Discord in advance so we can make sure the engineering team is aware and ready to support your launch.
+
+## 3.6 Change ERC-20 addresses (if applicable)
+
+Remember that ERC-20 token addresses differ between testnet and mainnet. Make sure to update your contract to point at the mainnet address for the requested token.
+
+## 3.7 Verify your collection on OpenSea
+
+If your contract is on an L2 chain like Polygon, OpenSea may hide your collection by default from buyers' profiles. To avoid this, please contact OpenSea to verify your collection before your launch.
+
+Buyers are still able to complete their purchase regardless of OpenSea verification, but may need to manually unhide their purchased token from their OpenSea profile if it is hidden by default.

docs/onboarding/22 NFT Checkouts/1a Integration/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "Integration",
+  "collapsible": true,
+  "collapsed": false
+}

docs/onboarding/22 NFT Checkouts/1b Advanced Guides/0 Embedded Elements/0 Overview.mdx

@@ -0,0 +1,27 @@
+---
+slug: /checkouts/elements
+title: Overview
+---
+
+Checkout Embedded Elements are modular components that can be embedded directly in your app. This allows you to fully customize the look and feel of the checkout experience within your application.
+
+## Prerequisites
+
+- Make sure you've [enabled your contract for Payments](enable-contract)
+- You have the user's wallet address
+  - If you do not already a wallet set up for your users, use [Connect](/connect) to create a wallet first.
+- Your Content Security Policy is set allowing thirdweb's domain.
+  - Make sure you enable the [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) directives on your server, please allow the following directives:
+    - `connect-src https://payments.thirdweb.com;`
+    - `frame-src https://payments.thirdweb.com;`
+    - `script-src https://payments.thirdweb.com;`
+
+## Integration
+
+### Accepting fiat payment options (credit/debit card, Apple Pay, Google Pay)
+
+Embed [CheckoutWithCard](/checkouts/checkout-with-card) in your app.
+
+### Accepting crypto payment options (ETH)
+
+Embed [CheckoutWithEth](/checkouts/checkout-with-eth) in your app.