Skip to content

Commit 35f7a75

Browse files
gregfromstlgregfromstl
committed
Enhance payment documentation: Update feature cards and add SDK modules section
- Replaced existing feature cards with new titles and descriptions, including "Cross-Chain Asset Routing" and "Fiat-to-Crypto Onramps." - Introduced new features such as "Webhook Integration" and "Real-time Status Tracking." - Added a detailed SDK modules section outlining key functionalities for developers. - Improved overall clarity and organization of the payment documentation.
1 parent dfe4cf0 commit 35f7a75

File tree

1 file changed

+105
-40
lines changed

1 file changed

+105
-40
lines changed

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

Lines changed: 105 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createMetadata, DocImage, Grid, SDKCard, FeatureCard } from "@doc";
22
import PayOverviewImage from "./assets/pay-overview.png";
33
import SupportedChains from "../_images/supported-chains.png";
4-
import {RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon} from "lucide-react";
4+
import {RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon} from "lucide-react";
55

66
export const metadata = createMetadata({
77
image: {
@@ -10,7 +10,7 @@ export const metadata = createMetadata({
1010
},
1111
title: "thirdweb Universal Bridge Docs: Web3 Payments, On-ramping, bridging & swapping",
1212
description:
13-
"Learn everything about thirdweb’s web3 payments solution, Universal Bridge. Technical docs on onramping, bridging + swapping.",
13+
"Learn everything about thirdweb's web3 payments solution, Universal Bridge. Technical docs on onramping, bridging + swapping.",
1414
});
1515

1616
# Universal Bridge
@@ -25,50 +25,56 @@ Universal Bridge allows you to create both simple and advanced payment flows for
2525
className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-2 "
2626
>
2727
<FeatureCard
28-
title="Avoid chargeback & liability"
29-
description="Automatic screening for sanctioned wallets and regions to ensure application safety."
30-
iconUrl={<RocketIcon />}
28+
title="Cross-Chain Asset Routing"
29+
description="Intelligent multi-hop routing to find optimal paths between any supported tokens and chains."
30+
iconUrl={<ArrowLeftRightIcon />}
3131
/>
3232

3333
<FeatureCard
34-
title="Global Coverage"
35-
description="Bridging support in over 160+ countries to reach a truly global audience."
36-
iconUrl={<GlobeIcon />}
34+
title="Fiat-to-Crypto Onramps"
35+
description="Direct integration with Stripe, Coinbase, and Transak for seamless fiat onramps."
36+
iconUrl={<PiggyBankIcon />}
3737
/>
38+
3839
<FeatureCard
39-
title="Earn revenue"
40-
description="Monetize your application and earn swap fees on each transaction."
41-
iconUrl={<PiggyBankIcon />}
42-
/>
43-
<FeatureCard
44-
title="Transact Securely"
45-
description="Strict one-time approvals ensuring funds are not at risk of exploits."
40+
title="Real-time Status Tracking"
41+
description="Monitor transaction progress across chains with comprehensive status APIs."
4642
iconUrl={<ShieldCheckIcon />}
4743
/>
48-
<FeatureCard
49-
title="Easy-to-integrate Components"
50-
description="Easily integrate components for buying funds, e-commerce checkouts, and more."
51-
iconUrl={<ComponentIcon />}
52-
/>
53-
44+
5445
<FeatureCard
55-
title="Customizable Flows"
56-
description="Create your own customized headless flows using the Universal Bridge SDK or API."
57-
iconUrl={<PencilIcon />}
46+
title="Global Coverage"
47+
description="Support for 160+ countries and regions for fiat onramps and cross-chain transactions."
48+
iconUrl={<GlobeIcon />}
5849
/>
59-
<FeatureCard
60-
title="Flexible Wallet Payments"
61-
description="Enable payments with any wallet that has funds not just the one connected."
62-
iconUrl={<WalletIcon />}
50+
51+
<FeatureCard
52+
title="Webhook Integration"
53+
description="Real-time notifications for transaction completion and status updates."
54+
iconUrl={<WebhookIcon />}
6355
/>
64-
<FeatureCard
65-
title="Multi-hop Routing"
66-
description="Handle multiple swaps at once within one session for a seamless swap experience."
67-
iconUrl={<ArrowLeftRightIcon />}
56+
57+
<FeatureCard
58+
title="Revenue Generation"
59+
description="Earn revenue by charging fees on every transaction that flows through your application."
60+
iconUrl={<WalletIcon />}
6861
/>
6962

7063
</div>
7164

65+
## SDK Modules
66+
67+
The Universal Bridge SDK is organized into several modules, each handling specific functionality:
68+
69+
| Module | Purpose | Key Functions |
70+
|--------|---------|---------------|
71+
| **Buy** | Cross-chain token purchasing | `quote()`, `prepare()` |
72+
| **Sell** | Token selling and swapping | `quote()`, `prepare()` |
73+
| **Transfer** | Same-chain and cross-chain transfers | `prepare()` |
74+
| **Onramp** | Fiat-to-crypto conversion | `prepare()`, `status()` |
75+
| **Routes** | Route discovery and filtering | `routes()` |
76+
| **Status** | Transaction status tracking | `status()` |
77+
7278
## Supported Chains
7379

7480
Universal Bridge is supported on select EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=pay).
@@ -83,12 +89,71 @@ Universal Bridge is supported on select EVM compatible chains. To view the full
8389
| Stripe | https://docs.stripe.com/crypto/onramp |
8490
| Coinbase | https://docs.cdp.coinbase.com/onramp/docs/payment-methods/ |
8591

86-
## Integration Options
92+
## Implementation Approaches
93+
94+
| APPROACH | DESCRIPTION | BEST FOR |
95+
| -------- | ----------- | -------- |
96+
| **[TypeScript SDK](https://portal.thirdweb.com/typescript/v5/buy/quote)** | Full-featured SDK with quote, prepare, and status functions | Developers building custom applications with complete control |
97+
| **[REST API](https://bridge.thirdweb.com/reference)** | Direct API access for any programming language | Backend services, mobile apps, or non-JavaScript environments |
98+
| **[Webhooks](https://portal.thirdweb.com/pay/webhooks)** | Real-time transaction status notifications | Applications requiring instant completion updates |
99+
| **[Playground](https://playground.thirdweb.com/connect/pay)** | Interactive testing environment | Testing and prototyping bridge functionality |
100+
101+
## Quick Start Examples
102+
103+
### Basic Cross-Chain Purchase
104+
```typescript
105+
import { Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";
106+
107+
// Get a quote for purchasing ETH on Optimism using ETH on Mainnet
108+
const quote = await Bridge.Buy.quote({
109+
originChainId: 1, // Ethereum Mainnet
110+
originTokenAddress: NATIVE_TOKEN_ADDRESS,
111+
destinationChainId: 10, // Optimism
112+
destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
113+
amount: toWei("0.01"),
114+
client: thirdwebClient,
115+
});
116+
117+
// Prepare finalized transactions
118+
const prepared = await Bridge.Buy.prepare({
119+
originChainId: 1,
120+
originTokenAddress: NATIVE_TOKEN_ADDRESS,
121+
destinationChainId: 10,
122+
destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
123+
amount: toWei("0.01"),
124+
sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
125+
receiver: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
126+
client: thirdwebClient,
127+
});
128+
```
129+
130+
### Fiat Onramp
131+
```typescript
132+
// Prepare a Stripe onramp to purchase ETH
133+
const onramp = await Bridge.Onramp.prepare({
134+
client: thirdwebClient,
135+
onramp: "stripe",
136+
chainId: 1,
137+
tokenAddress: NATIVE_TOKEN_ADDRESS,
138+
receiver: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
139+
amount: toWei("10"),
140+
country: "US",
141+
});
142+
143+
// Redirect user to onramp.link to complete purchase
144+
```
145+
146+
### Status Tracking
147+
```typescript
148+
// Check transaction status
149+
const status = await Bridge.status({
150+
transactionHash: "0x5959b9321ec581640db531b80bac53cbd968f3d34fc6cb1d5f4ea75f26df2ad7",
151+
chainId: 137,
152+
client: thirdwebClient,
153+
});
87154

88-
| OPTION | BEST FOR |
89-
| --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
90-
| [Buy Crypto](https://playground.thirdweb.com/connect/pay/) | Developers who want onramp and crypto purchase experiences directly in their application. |
91-
| [Transactions](https://playground.thirdweb.com/connect/pay/transactions) | Developers who want users to onramp or purchase crypto directly into a transaction. Great for minting and NFT purchase flows. |
92-
| [In-App Purchases](https://playground.thirdweb.com/connect/pay/commerce) | Developers who want to take payments from Fiat or Crypto directly to a seller wallet |
93-
| [SDK](https://portal.thirdweb.com/typescript/v5/buy/quote) | Build your own UI with the SDK. |
94-
| [API](https://playground.thirdweb.com/connect/pay/backend) | Control the full experience with the API. |
155+
if (status.status === "COMPLETED") {
156+
console.log("Bridge completed!");
157+
console.log("Final amount:", status.destinationAmount);
158+
}
159+
```

0 commit comments

Comments
 (0)