diff --git a/redirects.mjs b/redirects.mjs index 97427783..92e14552 100644 --- a/redirects.mjs +++ b/redirects.mjs @@ -645,6 +645,8 @@ const otherRedirects = { "/connect/embedded-wallet/how-to/get-embedded-wallet-details-on-server": "/connect/in-app-wallet/how-to/get-in-app-wallet-details-on-server", "/react-native/v0/wallets/embedded-wallet": "/react-native/v0/wallets/in-app-wallet", "/unity/wallets/providers/embedded-wallet": "/unity/wallets/providers/in-app-wallet", + // pay + "/connect/pay/build-a-custom-experience": "/connect/pay/buy-with-fiat/build-a-custom-experience", }; /** diff --git a/src/app/connect/pay/build-a-custom-experience/page.mdx b/src/app/connect/pay/buy-with-fiat/build-a-custom-experience/page.mdx similarity index 80% rename from src/app/connect/pay/build-a-custom-experience/page.mdx rename to src/app/connect/pay/buy-with-fiat/build-a-custom-experience/page.mdx index 798bb37d..928a1061 100644 --- a/src/app/connect/pay/build-a-custom-experience/page.mdx +++ b/src/app/connect/pay/buy-with-fiat/build-a-custom-experience/page.mdx @@ -1,47 +1,66 @@ -import { createMetadata, DocImage, Steps, Step } from "@doc"; -import OnrampStepOne from "../assets/avax-to-usd.png"; +import { + createMetadata, + Callout, + DocImage, + InstallTabs, + Steps, + Step, +} from "@doc"; +import OnrampStepOne from "../../assets/avax-to-usd.png"; export const metadata = createMetadata({ image: { title: "thirdweb Pay - Custom Experience", icon: "thirdweb", }, - title: "thirdweb Pay - Buy With Crypto - Custom Experience | thirdweb", + title: "thirdweb Pay - Buy With Fiat - Custom Experience | thirdweb", description: "Learn how to build a custom onramp experience with thirdweb Pay.", }); -# Build a Custom Pay Experience +# Build a Custom Fiat Experience -Learn how to enable your users to purchase your application’s token with any fiat payment method with our headless flow. In this guide, we’ll show you how to onramp users into Base ETH. +Learn how to enable your users to purchase your application’s token with any fiat payment method with our headless flow. -Our `PayEmbed` component handles the complexity of the process detailed below and can be integrated in minutes. We encourage you to check out the [PayEmbed guide here](/connect/pay/get-started#embed-pay). +In this guide, we'll show you how to purchase 0.01 Base ETH from USD in Typescript. -Buying with Fiat can require one or two steps depending on your destination token. - -In this guide, we will show you how to purchase 0.01 Base ETH from USD in Typescript. + + Our `PayEmbed` component handles the complexity of the process detailed below + and can be integrated in minutes. We encourage you to check out the [PayEmbed + guide here](/connect/pay/get-started#embed-pay). + --- + + + + +Log in to the [thirdweb dashboard](https://thirdweb.com/dashboard). Navigate to the **Settings** page and create an API key to get your **Client ID**. You'll need your Client ID to interact with the Connect SDK. + + + -- If desired token can be bought directly with fiat currency - - Your users will onramp directly to their destination token -- If desired token can not be bought directly with fiat currency - - Your users will onramp to an intermediate token - - Your users will be prompted to convert the onramp token to the destination token +Buying with fiat can require one or two steps depending on your destination token: + +If the destination token _*can*_ be bought directly with fiat, your users can onramp directly to their destination token. + +If the destination token _*can not*_ be bought directly with fiat, your users will need to onramp to an intermediate token, then convert the onramp token to the destination token. For example, when Buying Base ETH: -1. Users will receive Avalance AVAX ( native token ) in exchange of USD -2. Users will be prompted to convert Avalance AVAX to Base ETH +1. Users will receive Avalance AVAX ( native token ) in exchange for USD +2. Users will be prompted to convert Avalanche AVAX to Base ETH This process requires your user's wallet address. Refer to [this guide](https://portal.thirdweb.com/typescript/v5/connecting-wallets) to learn how to connect a wallet. -Thirdweb SDK requires a client. You can [view this reference](https://portal.thirdweb.com/typescript/v5/client) to create a client. - ```tsx import { getBuyWithFiatQuote } from "thirdweb/pay"; import { NATIVE_TOKEN_ADDRESS } from "thirdweb"; @@ -93,7 +112,9 @@ if (hasTwoSteps) { -Once you have a `quote` from `getBuyWithFiatQuote`,you can open a new tab with `quote.onRampLink` to show the onramp experience. +Once you have a `quote` from `getBuyWithFiatQuote`, you can open a new tab with `quote.onRampLink` to show the onramp experience. This onramp experience handles all regulatory requirements, know your customer (KYC) verifications, and sanctions screening. + +After they've KYC'd (if required), customers have the option of saving payment methods, KYC data, and wallet information in the onramp, which makes the returning onramp experience much faster. Your users will be able to purchase the `quote.onRampToken` with the specified fiat currency. diff --git a/src/app/connect/pay/faqs/page.mdx b/src/app/connect/pay/faqs/page.mdx index 2b0d93fa..a4fc42de 100644 --- a/src/app/connect/pay/faqs/page.mdx +++ b/src/app/connect/pay/faqs/page.mdx @@ -43,7 +43,7 @@ Pay currently requires KYC for first-time purchases. Subsequent purchases will n ### What cryptocurrencies does Pay support? -Pay can support any currency on our [supported chains](https://www.notion.so/Supported-Chains-fc4dc21ea46a4a11aed62bee0a82536a?pvs=21). +Pay can support any currency on our [supported chains](/connect/pay/supported-chains). ### How are cryptocurrency prices set in thirdweb Pay? diff --git a/src/app/connect/pay/get-started/page.mdx b/src/app/connect/pay/get-started/page.mdx index 3255b82a..a5739ca7 100644 --- a/src/app/connect/pay/get-started/page.mdx +++ b/src/app/connect/pay/get-started/page.mdx @@ -10,12 +10,12 @@ import GetStartedSend from "../assets/get-started-send.png"; import GetStartedEmbed from "../assets/get-started-embed.png"; export const metadata = createMetadata({ image: { - title: "thirdweb Pay - Buy With Fiat", + title: "thirdweb Pay - Get Started", icon: "thirdweb", }, title: "thirdweb Pay - Buy With Fiat - thirdweb", description: - "Buy With Fiat - Onchain Purchases Directly From Credit or Debit Card", + "Get Started with Pay - Onchain Purchases Directly From Credit or Debit Card", }); # Get Started @@ -30,7 +30,6 @@ The following guide uses our Typescript SDK. You can also learn how to integrate - -Log in to [the thirdweb dashboard](https://thirdweb.com/dashboard). Navigate to the **Settings** page and create an API key to get your **Client ID**. +Log in to [the thirdweb dashboard](https://thirdweb.com/dashboard). Navigate to the **Settings** page and create an API key to get your **Client ID**. You'll need your Client ID to interact with the Connect SDK. diff --git a/src/app/connect/sidebar.tsx b/src/app/connect/sidebar.tsx index dc3d69f0..5ab4695b 100644 --- a/src/app/connect/sidebar.tsx +++ b/src/app/connect/sidebar.tsx @@ -272,13 +272,20 @@ export const sidebar: SideBar = { name: "Supported Chains", href: `${paySlug}/supported-chains`, }, - { - name: "Build a Custom Experience", - href: `${paySlug}/build-a-custom-experience`, - }, + { name: "Buy With Fiat", - href: `${paySlug}/buy-with-fiat`, + isCollapsible: true, + links: [ + { + name: "Overview", + href: `${paySlug}/buy-with-fiat`, + }, + { + name: "Build a Custom Experience", + href: `${paySlug}/buy-with-fiat/build-a-custom-experience`, + }, + ], }, { name: "Buy With Crypto",