Add onramp providers page to Pay overview (#5836)

Added onramp page and preferredPartner information to customization pages  --- ## PR-Codex overview This PR focuses on adding support for specifying preferred onramp providers in various components and updating documentation accordingly. ### Detailed summary - Added `Onramp Providers` option in the sidebar. - Introduced `Preferred Provider` section in `payembed` and `connectbutton` documentation. - Created a new `onramp-providers` page detailing supported providers and how to set a preferred provider. - Updated `send-transaction` documentation to include `preferredProvider` parameter. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
thirdweb-dev · Jan 14, 2025 · 46bf17c · 46bf17c
1 parent a6fe226
commit 46bf17c
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 17 deletions.
diff --git 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
+<ConnectButton
+	client={client}
+	detailsModal={{
+		payOptions: {
+			preferredProvider: "STRIPE" | "KADO" | "TRANSAK",
+		},
+	}}
+/>
+```
+
+---
+
 ## 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
@@ -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
+<PayEmbed
+	client={client}
+	payOptions={{
+		preferredProvider: "STRIPE" | "KADO" | "TRANSAK",
+	}}
+/>
+```
+
+---
+
 ## 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
@@ -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
@@ -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/...app/connect/pay/supported-chains/page.mdx → ...onnect/pay/supported-chains copy/page.mdx b/...app/connect/pay/supported-chains/page.mdx → ...onnect/pay/supported-chains copy/page.mdx
diff --git 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",