Skip to content

Commit 46bf17c

Browse files
ianthirdwebianthirdweb
committed
Add onramp providers page to Pay overview (#5836)
Added onramp page and preferredPartner information to customization pages <!-- start pr-codex --> --- ## 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}` <!-- end pr-codex -->
1 parent a6fe226 commit 46bf17c

File tree

6 files changed

+93
-17
lines changed

6 files changed

+93
-17
lines changed

‎apps/portal/src/app/connect/pay/customization/connectbutton/page.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,23 @@ If you'd like to prefill a purchase with a native token, you can set the chain w
8686

8787
---
8888

89+
## Preferred Provider
90+
91+
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).
92+
93+
```tsx
94+
<ConnectButton
95+
client={client}
96+
detailsModal={{
97+
payOptions: {
98+
preferredProvider: "STRIPE" | "KADO" | "TRANSAK",
99+
},
100+
}}
101+
/>
102+
```
103+
104+
---
105+
89106
## Disable Payment Methods
90107

91108
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`.

‎apps/portal/src/app/connect/pay/customization/payembed/page.mdx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,21 @@ If you'd like to prefill a purchase with a native token, you can set the chain w
8484

8585
---
8686

87+
## Preferred Provider
88+
89+
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).
90+
91+
```tsx
92+
<PayEmbed
93+
client={client}
94+
payOptions={{
95+
preferredProvider: "STRIPE" | "KADO" | "TRANSAK",
96+
}}
97+
/>
98+
```
99+
100+
---
101+
87102
## Disable Payment Methods
88103

89104
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`.

‎apps/portal/src/app/connect/pay/customization/send-transaction/page.mdx‎

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Learn how to customize the Pay interface when executing a transaction with `useS
2020
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.
2121

2222
```tsx
23-
const { mutate: sendTransaction } = useSendTransaction({
23+
const { mutate: sendTransaction } = useSendTransaction({
2424
payModal: {
2525
supportedTokens: {
2626
"1": [
@@ -32,7 +32,7 @@ const { mutate: sendTransaction } = useSendTransaction({
3232
},
3333
],
3434
},
35-
}
35+
},
3636
});
3737
```
3838

@@ -47,7 +47,7 @@ For example, if you wanted users to only purchase Ethereum on Base network, you
4747
```tsx
4848
import { base } from "thirdweb/chains";
4949

50-
const { mutate: sendTransaction } = useSendTransaction({
50+
const { mutate: sendTransaction } = useSendTransaction({
5151
payModal: {
5252
prefillBuy: {
5353
token: {
@@ -63,19 +63,34 @@ const { mutate: sendTransaction } = useSendTransaction({
6363
chain: false, // disable selecting buy chain
6464
},
6565
},
66-
}});
66+
},
67+
});
6768
```
6869

6970
If you'd like to prefill a purchase with a native token, you can set the chain without passing a token:
7071

7172
```tsx
72-
const { mutate: sendTransaction } = useSendTransaction({
73+
const { mutate: sendTransaction } = useSendTransaction({
7374
payModal: {
7475
prefillBuy: {
7576
chain: base,
7677
},
77-
}}
78-
);
78+
},
79+
});
80+
```
81+
82+
---
83+
84+
## Preferred Provider
85+
86+
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).
87+
88+
```tsx
89+
const { mutate: sendTransaction } = useSendTransaction({
90+
payModal: {
91+
preferredProvider: "STRIPE" | "KADO" | "TRANSAK",
92+
},
93+
});
7994
```
8095

8196
---
@@ -87,21 +102,21 @@ In some cases, you may only want to show users fiat or crypto payment options fo
87102
#### Disable Buy With Crypto
88103

89104
```tsx
90-
const { mutate: sendTransaction } = useSendTransaction({
105+
const { mutate: sendTransaction } = useSendTransaction({
91106
payModal: {
92107
buyWithCrypto: false,
93-
}}
94-
);
108+
},
109+
});
95110
```
96111

97112
#### Disable Buy With Fiat
98113

99114
```tsx
100-
const { mutate: sendTransaction } = useSendTransaction({
115+
const { mutate: sendTransaction } = useSendTransaction({
101116
payModal: {
102117
buyWithFiat: false,
103-
}}
104-
);
118+
},
119+
});
105120
```
106121

107122
---
@@ -117,11 +132,11 @@ You can refer to our [`Theme`](/references/typescript/v5/Theme) page for a full
117132
#### Provided Themes
118133

119134
```tsx
120-
const { mutate: sendTransaction } = useSendTransaction({
135+
const { mutate: sendTransaction } = useSendTransaction({
121136
payModal: {
122137
theme: "dark", // or "light"
123-
}}
124-
);
138+
},
139+
});
125140
```
126141

127142
#### Custom Theme
@@ -130,7 +145,7 @@ const { mutate: sendTransaction } = useSendTransaction({
130145
import { darkTheme } from 'thirdweb/react';
131146

132147
// Using custom theme
133-
const { mutate: sendTransaction } = useSendTransaction({
148+
const { mutate: sendTransaction } = useSendTransaction({
134149
payModal: {
135150
theme: darkTheme({ ... },
136151
}}

‎apps/portal/src/app/connect/pay/onramp-providers/page.mdx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { createMetadata } from "@doc";
2+
3+
export const metadata = createMetadata({
4+
image: {
5+
title: "thirdweb Pay - Onramp Providers",
6+
icon: "thirdweb",
7+
},
8+
title: "thirdweb Pay - Onramp Providers | thirdweb",
9+
description:
10+
"Integrate onramp providers for any onchain transaction and set preferred providers",
11+
});
12+
13+
# Onramp Providers
14+
15+
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.
16+
17+
| Provider | Supported Countries |
18+
| -------- | ------------------------------------------------------------------------------------------------------- |
19+
| Transak | https://transak.notion.site/On-Ramp-Payment-Methods-Fees-Other-Details-b0761634feed4b338a69f4f186d906a5 |
20+
| Kado | https://www.kado.money/supported-countries |
21+
| Stripe | https://docs.stripe.com/crypto/onramp |
22+
23+
## Choosing a Preferred Provider
24+
25+
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).

‎apps/portal/src/app/connect/pay/supported-chains/page.mdx‎ renamed to ‎apps/portal/src/app/connect/pay/supported-chains copy/page.mdx‎

File renamed without changes.

‎apps/portal/src/app/connect/sidebar.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -300,6 +300,10 @@ export const sidebar: SideBar = {
300300
name: "Supported Chains",
301301
href: `${paySlug}/supported-chains`,
302302
},
303+
{
304+
name: "Onramp Providers",
305+
href: `${paySlug}/onramp-providers`,
306+
},
303307

304308
{
305309
name: "Fee Sharing",

0 commit comments

Comments
 (0)