Skip to content

Commit 4dae477

Browse files
gregfromstlgregfromstl
committed
Update payment documentation: Revise sidebar and add onramp integration guide
- Removed the "Developer Mode" section from the sidebar for clarity. - Renamed "Smart Accounts" to "Swap Smart Accounts" for better specificity. - Added a new guide for "Fiat Onramp Integration," detailing how to integrate fiat-to-crypto onramps using Stripe, Coinbase, and Transak. - Improved organization and navigation within the payment documentation.
1 parent e5adb0d commit 4dae477

File tree

3 files changed

+204
-158
lines changed

3 files changed

+204
-158
lines changed

‎apps/portal/src/app/pay/guides/onramp-integration/page.mdx‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
import {
2+
createMetadata,
3+
Callout,
4+
DocImage,
5+
InstallTabs,
6+
Steps,
7+
Step,
8+
Tabs,
9+
TabsList,
10+
TabsTrigger,
11+
TabsContent,
12+
} from "@doc";
13+
14+
export const metadata = createMetadata({
15+
image: {
16+
title: "thirdweb Universal Bridge - Onramp Integration",
17+
icon: "thirdweb",
18+
},
19+
title: "thirdweb Universal Bridge - Onramp Integration | thirdweb",
20+
description:
21+
"Learn how to integrate fiat-to-crypto onramps using Stripe, Coinbase, and Transak with Universal Bridge.",
22+
});
23+
24+
# Fiat-to-Crypto Onramp Integration
25+
26+
Learn how to integrate seamless fiat-to-crypto onramps using Universal Bridge. This guide covers integration with Stripe, Coinbase, and Transak providers, enabling your users to purchase crypto directly with fiat currency.
27+
28+
Universal Bridge's onramp functionality provides a unified interface across multiple providers, automatic routing to the best rates, and comprehensive status tracking.
29+
30+
---
31+
32+
<Steps>
33+
<Step title='Install the SDK'>
34+
<InstallTabs
35+
npm="npm i thirdweb"
36+
yarn="yarn add thirdweb"
37+
pnpm="pnpm i thirdweb"
38+
/>
39+
</Step>
40+
<Step title='Setup and Configuration'>
41+
42+
Configure your client and understand the available onramp providers:
43+
44+
```typescript
45+
import { createThirdwebClient } from "thirdweb";
46+
import { Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";
47+
48+
const client = createThirdwebClient({
49+
clientId: "your_client_id"
50+
});
51+
```
52+
53+
</Step>
54+
<Step title='Basic Onramp Integration'>
55+
56+
Create a basic onramp experience for your users:
57+
58+
<Tabs defaultValue="stripe">
59+
<TabsList className="grid w-full grid-cols-3">
60+
<TabsTrigger value="stripe">Stripe</TabsTrigger>
61+
<TabsTrigger value="coinbase">Coinbase</TabsTrigger>
62+
<TabsTrigger value="transak">Transak</TabsTrigger>
63+
</TabsList>
64+
65+
<TabsContent value="stripe">
66+
67+
```typescript
68+
import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb";
69+
70+
const onrampSession = await Bridge.Onramp.prepare({
71+
client,
72+
onramp: "stripe",
73+
chainId: 1, // Ethereum
74+
tokenAddress: NATIVE_TOKEN_ADDRESS, // ETH
75+
receiver: userAddress,
76+
amount: toWei("0.1"), // 0.1 ETH
77+
currency: "USD",
78+
country: "US", // User's country - important for compliance
79+
});
80+
81+
window.open(onrampSession.link);
82+
```
83+
84+
</TabsContent>
85+
86+
<TabsContent value="coinbase">
87+
88+
```typescript
89+
import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb";
90+
91+
async function createCoinbaseOnramp(userAddress: string) {
92+
try {
93+
const onrampSession = await Bridge.Onramp.prepare({
94+
client,
95+
onramp: "coinbase",
96+
chainId: 8453, // Base (Coinbase's L2)
97+
tokenAddress: NATIVE_TOKEN_ADDRESS, // ETH on Base
98+
receiver: userAddress,
99+
amount: toWei("0.05"), // 0.05 ETH
100+
currency: "USD",
101+
country: "US",
102+
});
103+
104+
console.log("Coinbase onramp session:", onrampSession.id);
105+
console.log("Estimated cost:", `$${onrampSession.currencyAmount}`);
106+
107+
// Redirect to Coinbase onramp
108+
window.location.href = onrampSession.link;
109+
110+
return onrampSession;
111+
} catch (error) {
112+
console.error("Failed to create Coinbase onramp:", error);
113+
throw error;
114+
}
115+
}
116+
```
117+
118+
</TabsContent>
119+
120+
<TabsContent value="transak">
121+
```typescript
122+
import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb";
123+
124+
async function createTransakOnramp(userAddress: string) {
125+
try {
126+
const onrampSession = await Bridge.Onramp.prepare({
127+
client,
128+
onramp: "transak",
129+
chainId: 137, // Polygon
130+
tokenAddress: NATIVE_TOKEN_ADDRESS, // MATIC
131+
receiver: userAddress,
132+
amount: toWei("10"), // 10 MATIC
133+
currency: "USD",
134+
country: "US",
135+
});
136+
137+
// Redirect to Transak
138+
window.open(onrampSession.link);
139+
140+
return onrampSession;
141+
} catch (error) {
142+
console.error("Failed to create Transak onramp:", error);
143+
throw error;
144+
}
145+
}
146+
```
147+
</TabsContent>
148+
</Tabs>
149+
</Step>
150+
<Step title='Status Monitoring'>
151+
152+
Monitor onramp transactions and handle completion:
153+
154+
```typescript
155+
import { Bridge } from "thirdweb";
156+
157+
// Monitor onramp status
158+
const status = await Bridge.Onramp.status({
159+
sessionId,
160+
client,
161+
});
162+
163+
switch (status.status) {
164+
case "COMPLETED":
165+
console.log("Onramp completed successfully!");
166+
console.log("Transaction hash:", status.transactionHash);
167+
console.log("Amount received:", status.destinationAmount);
168+
// Update your UI to show success
169+
break;
170+
171+
case "PENDING":
172+
console.log("Onramp in progress...");
173+
// Show loading state to user
174+
setTimeout(() => monitorOnrampStatus(sessionId), 10000); // Check again in 10s
175+
break;
176+
177+
case "FAILED":
178+
console.log("Onramp failed:", status.error);
179+
// Show error message to user
180+
break;
181+
182+
case "CANCELLED":
183+
console.log("Onramp was cancelled by user");
184+
// Handle cancellation
185+
break;
186+
187+
default:
188+
console.log("Unknown status:", status.status);
189+
}
190+
```
191+
</Step>
192+
</Steps>
193+
194+
## Next Steps
195+
196+
- **[Onramp Providers](/pay/onramp-providers)** - Detailed provider comparison and features
197+
- **[Webhooks](/pay/webhooks)** - Set up real-time onramp status notifications
198+
- **[Testing](/pay/testing-pay)** - Test onramp flows in development mode
199+
- **[Universal Bridge API](https://bridge.thirdweb.com/reference)** - Complete API reference

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
BracesIcon,
66
CircleDollarSignIcon,
77
CodeIcon,
8-
FlaskConicalIcon,
98
MessageCircleQuestionIcon,
109
PaletteIcon,
1110
RocketIcon,
@@ -64,9 +63,13 @@ export const sidebar: SideBar = {
6463
href: `${paySlug}/guides/cross-chain-swapping`,
6564
},
6665
{
67-
name: "Smart Accounts",
66+
name: "Swap Smart Accounts",
6867
href: `${paySlug}/guides/smart-accounts`,
6968
},
69+
{
70+
name: "Fiat Onramp",
71+
href: `${paySlug}/guides/onramp-integration`,
72+
},
7073
],
7174
},
7275
{
@@ -109,11 +112,6 @@ export const sidebar: SideBar = {
109112
href: `${paySlug}/webhooks`,
110113
icon: <WebhookIcon />,
111114
},
112-
{
113-
name: "Developer Mode",
114-
href: `${paySlug}/testing-pay`,
115-
icon: <FlaskConicalIcon />,
116-
},
117115
{
118116
name: "FAQs",
119117
href: `${paySlug}/faqs`,

‎apps/portal/src/app/pay/testing-pay/page.mdx‎

Lines changed: 0 additions & 151 deletions
This file was deleted.

0 commit comments

Comments
 (0)