diff --git a/apps/portal/src/app/connect/pay/customization/connectbutton/page.mdx b/apps/portal/src/app/connect/pay/customization/connectbutton/page.mdx index f9763114ee0..851ad2684c0 100644 --- a/apps/portal/src/app/connect/pay/customization/connectbutton/page.mdx +++ b/apps/portal/src/app/connect/pay/customization/connectbutton/page.mdx @@ -86,6 +86,23 @@ If you'd like to prefill a purchase with a native token, you can set the chain w --- +## Preferred Provider + +You can specify which onramp provider to present to your users. By default, we choose a recommended provider based on the location of the user, KYC status, and currency. Please make sure your set provider is [available in your country](../onramp-providers). + +```tsx + +``` + +--- + ## Disable Payment Methods In some cases, you may only want to show users fiat or crypto payment options for your onchain goods or services. You can do this by setting either `buyWithCrypto` or `buyWithFiat` to `false`. diff --git a/apps/portal/src/app/connect/pay/customization/payembed/page.mdx b/apps/portal/src/app/connect/pay/customization/payembed/page.mdx index 38366d57ff4..136048ca23b 100644 --- a/apps/portal/src/app/connect/pay/customization/payembed/page.mdx +++ b/apps/portal/src/app/connect/pay/customization/payembed/page.mdx @@ -84,6 +84,21 @@ If you'd like to prefill a purchase with a native token, you can set the chain w --- +## Preferred Provider + +You can specify which onramp provider to present to your users. By default, we choose a recommended provider based on the location of the user, KYC status, and currency. Please make sure your set provider is [available in your country](../onramp-providers). + +```tsx + +``` + +--- + ## Disable Payment Methods In some cases, you may only want to show users fiat or crypto payment options for your onchain goods or services. You can do this by setting either `buyWithCrypto` or `buyWithFiat` to `false`. diff --git a/apps/portal/src/app/connect/pay/customization/send-transaction/page.mdx b/apps/portal/src/app/connect/pay/customization/send-transaction/page.mdx index 673607470b1..d2111141a80 100644 --- a/apps/portal/src/app/connect/pay/customization/send-transaction/page.mdx +++ b/apps/portal/src/app/connect/pay/customization/send-transaction/page.mdx @@ -20,7 +20,7 @@ Learn how to customize the Pay interface when executing a transaction with `useS You can enable users to select your token on a given chain by passing an array of `SupportedTokens`. Note that this array overrides all default tokens listed for that chain. ```tsx -const { mutate: sendTransaction } = useSendTransaction({ +const { mutate: sendTransaction } = useSendTransaction({ payModal: { supportedTokens: { "1": [ @@ -32,7 +32,7 @@ const { mutate: sendTransaction } = useSendTransaction({ }, ], }, - } + }, }); ``` @@ -47,7 +47,7 @@ For example, if you wanted users to only purchase Ethereum on Base network, you ```tsx import { base } from "thirdweb/chains"; -const { mutate: sendTransaction } = useSendTransaction({ +const { mutate: sendTransaction } = useSendTransaction({ payModal: { prefillBuy: { token: { @@ -63,19 +63,34 @@ const { mutate: sendTransaction } = useSendTransaction({ chain: false, // disable selecting buy chain }, }, - }}); + }, +}); ``` If you'd like to prefill a purchase with a native token, you can set the chain without passing a token: ```tsx -const { mutate: sendTransaction } = useSendTransaction({ +const { mutate: sendTransaction } = useSendTransaction({ payModal: { prefillBuy: { chain: base, }, - }} -); + }, +}); +``` + +--- + +## Preferred Provider + +You can specify which onramp provider to present to your users. By default, we choose a recommended provider based on the location of the user, KYC status, and currency. Please make sure your set provider is [available in your country](../onramp-providers). + +```tsx +const { mutate: sendTransaction } = useSendTransaction({ + payModal: { + preferredProvider: "STRIPE" | "KADO" | "TRANSAK", + }, +}); ``` --- @@ -87,21 +102,21 @@ In some cases, you may only want to show users fiat or crypto payment options fo #### Disable Buy With Crypto ```tsx -const { mutate: sendTransaction } = useSendTransaction({ +const { mutate: sendTransaction } = useSendTransaction({ payModal: { buyWithCrypto: false, - }} -); + }, +}); ``` #### Disable Buy With Fiat ```tsx -const { mutate: sendTransaction } = useSendTransaction({ +const { mutate: sendTransaction } = useSendTransaction({ payModal: { buyWithFiat: false, - }} -); + }, +}); ``` --- @@ -117,11 +132,11 @@ You can refer to our [`Theme`](/references/typescript/v5/Theme) page for a full #### Provided Themes ```tsx -const { mutate: sendTransaction } = useSendTransaction({ +const { mutate: sendTransaction } = useSendTransaction({ payModal: { theme: "dark", // or "light" - }} -); + }, +}); ``` #### Custom Theme @@ -130,7 +145,7 @@ const { mutate: sendTransaction } = useSendTransaction({ import { darkTheme } from 'thirdweb/react'; // Using custom theme -const { mutate: sendTransaction } = useSendTransaction({ +const { mutate: sendTransaction } = useSendTransaction({ payModal: { theme: darkTheme({ ... }, }} diff --git a/apps/portal/src/app/connect/pay/onramp-providers/page.mdx b/apps/portal/src/app/connect/pay/onramp-providers/page.mdx new file mode 100644 index 00000000000..ca2f44bc6ad --- /dev/null +++ b/apps/portal/src/app/connect/pay/onramp-providers/page.mdx @@ -0,0 +1,25 @@ +import { createMetadata } from "@doc"; + +export const metadata = createMetadata({ + image: { + title: "thirdweb Pay - Onramp Providers", + icon: "thirdweb", + }, + title: "thirdweb Pay - Onramp Providers | thirdweb", + description: + "Integrate onramp providers for any onchain transaction and set preferred providers", +}); + +# Onramp Providers + +thirdweb Pay integrates with Stripe, Kado and Transak to power our onramp. By default, we choose a recommended provider based on the location of the user, KYC status, and currency. + +| Provider | Supported Countries | +| -------- | ------------------------------------------------------------------------------------------------------- | +| Transak | https://transak.notion.site/On-Ramp-Payment-Methods-Fees-Other-Details-b0761634feed4b338a69f4f186d906a5 | +| Kado | https://www.kado.money/supported-countries | +| Stripe | https://docs.stripe.com/crypto/onramp | + +## Choosing a Preferred Provider + +It is possible to specify a preferred onramp provider by setting the `preferredProvider` parameter in the ConnectButton, PayEmbed, or Headless Integration. Go to [customizations](../pay/customization/connectbutton#preferredProvider) for more detail, or checkout the [API Reference for preferredProvider](https://portal.thirdweb.com/references/typescript/v5/GetBuyWithFiatQuoteParams). diff --git a/apps/portal/src/app/connect/pay/supported-chains/page.mdx b/apps/portal/src/app/connect/pay/supported-chains copy/page.mdx similarity index 100% rename from apps/portal/src/app/connect/pay/supported-chains/page.mdx rename to apps/portal/src/app/connect/pay/supported-chains copy/page.mdx diff --git a/apps/portal/src/app/connect/sidebar.tsx b/apps/portal/src/app/connect/sidebar.tsx index 8b905263af7..b061ecd407c 100644 --- a/apps/portal/src/app/connect/sidebar.tsx +++ b/apps/portal/src/app/connect/sidebar.tsx @@ -300,6 +300,10 @@ export const sidebar: SideBar = { name: "Supported Chains", href: `${paySlug}/supported-chains`, }, + { + name: "Onramp Providers", + href: `${paySlug}/onramp-providers`, + }, { name: "Fee Sharing",