You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Learn how to customize Pay within the `ConnectButton` interface. You can find a selection of popular customizations below. For the full list of props, you can [view the full reference](/references/typescript/v5/ConnectButtonProps).
14
+
Learn how to customize Universal Bridge within the `ConnectButton` interface. You can find a selection of popular customizations below. For the full list of props, you can [view the full reference](/references/typescript/v5/ConnectButtonProps).
15
15
16
16
---
17
17
@@ -39,7 +39,7 @@ You can enable users to select your token on a given chain by passing an array o
39
39
40
40
## Prefill Destination Token
41
41
42
-
In the case you want your users to purchase your token by default in your application, you can choose to pre-fill the Pay purchase flow with `prefillBuy` .
42
+
In the case you want your users to purchase your token by default in your application, you can choose to pre-fill the Universal Bridge purchase flow with `prefillBuy` .
43
43
44
44
For example, if you wanted users to only purchase Ethereum on Base network, you could do as follows:
45
45
@@ -137,7 +137,7 @@ In some cases, you may only want to show users fiat or crypto payment options fo
137
137
138
138
## Theme
139
139
140
-
You can set the theme for the Pay component, which is set to `"dark"` by default. theme can be set to either `"dark"` , `"light"` or a custom theme object.
140
+
You can set the theme for the Universal Bridge component, which is set to `"dark"` by default. theme can be set to either `"dark"` , `"light"` or a custom theme object.
141
141
142
142
We have [`lightTheme`](/references/typescript/v5/lightTheme) or [`darkTheme`](/references/typescript/v5/darkTheme) providers that you can override to kickstart customization.
"thirdweb Pay - Customizing embeddable onramps and crypto purchase flows",
9
+
"thirdweb Universal - Customizing embeddable onramps and crypto purchase flows",
10
10
});
11
11
12
12
# PayEmbed Customization
@@ -129,7 +129,7 @@ In some cases, you may only want to show users fiat or crypto payment options fo
129
129
130
130
## Theme
131
131
132
-
You can set the theme for the Pay component, which is set to `"dark"` by default. theme can be set to either `"dark"` , `"light"` or a custom theme object.
132
+
You can set the theme for the Universal Bridge component, which is set to `"dark"` by default. theme can be set to either `"dark"` , `"light"` or a custom theme object.
133
133
134
134
We have [`lightTheme`](/references/typescript/v5/lightTheme) or [`darkTheme`](/references/typescript/v5/darkTheme) providers that you can override to kickstart customization.
"thirdweb Pay - Customizing point of sale onramps and crypto purchase flows",
9
+
"thirdweb Universal Bridge- Customizing point of sale onramps and crypto purchase flows",
10
10
});
11
11
12
12
# useSendTransaction Customization
13
13
14
-
Learn how to customize the Pay interface when executing a transaction with `useSendTransaction`. You can find a selection of popular customizations below. For the full list of props, you can [view the full reference](/references/typescript/v5/SendTransactionConfig).
14
+
Learn how to customize the Universal Bridge interface when executing a transaction with `useSendTransaction`. You can find a selection of popular customizations below. For the full list of props, you can [view the full reference](/references/typescript/v5/SendTransactionConfig).
You can set the theme for the Pay component, which is set to `"dark"` by default. theme can be set to either `"dark"` , `"light"` or a custom theme object.
126
+
You can set the theme for the Universal Bridge component, which is set to `"dark"` by default. theme can be set to either `"dark"` , `"light"` or a custom theme object.
127
127
128
128
We have [`lightTheme`](/references/typescript/v5/lightTheme) or [`darkTheme`](/references/typescript/v5/darkTheme) providers that you can override to kickstart customization.
Copy file name to clipboardExpand all lines: apps/portal/src/app/connect/pay/faqs/page.mdx
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -85,15 +85,15 @@ All other tokens will require an additional Buy With Crypto step.
85
85
Users will be required to complete KYC verification for their first purchase using 'Buy with Fiat.' After that, no further KYC will be needed for future purchases on the same platform.
86
86
</Details>
87
87
88
-
<Detailssummary="What cryptocurrencies does Pay support?">
89
-
Pay can support any currency on our [supported chains](/connect/pay/supported-chains).
88
+
<Detailssummary="What cryptocurrencies does Universal Bridge support?">
89
+
Universal Bridge can support any currency on our [supported chains](/connect/pay/supported-chains).
90
90
</Details>
91
91
92
-
<Detailssummary="How are cryptocurrency prices set in thirdweb Pay?">
92
+
<Detailssummary="How are cryptocurrency prices set in thirdweb Universal Bridge?">
93
93
Prices are set depending on the liquidity provider used to route your transaction.
94
94
</Details>
95
95
96
-
<Detailssummary="Does thirdweb Pay offer fiat payouts?">
96
+
<Detailssummary="Does thirdweb Universal Bridge offer fiat payouts?">
description: "How to participate in fee sharing with thirdweb Universal Bridge",
11
11
});
12
12
13
13
# Fee Sharing
@@ -18,6 +18,6 @@ For example, if a user purchases $100 worth of Polygon through your application,
18
18
19
19
Plase note that fee sharing only applies to fees collected through swaps and bridges. Fiat purchases do not currently qualify for fee sharing.
20
20
21
-
To participate in fee sharing, all you need to do is set a recipient address in your dashboard. Your recipient address can be configured in your dashboard by navigating to your Team > Project > Connect > Pay in [thirdweb dashboard](https://www.thirdweb.com/team).
21
+
To participate in fee sharing, all you need to do is set a recipient address in your dashboard. Your recipient address can be configured in your dashboard by navigating to your Team > Project > Connect > Universal Bridge in [thirdweb dashboard](https://www.thirdweb.com/team).
Learn how to add onramps and crypto purchases to your application. To see which integration is right for you, refer to our [integrations overview](/connect/pay/overview#integration-options).
24
24
25
-
The following guide uses our React SDK. You can also learn how to integrate Pay with our [Unity SDK](https://portal.thirdweb.com/unity/pay/getbuywithcryptoquote).
25
+
The following guide uses our React SDK. You can also learn how to integrate Universal Bridge with our [Unity SDK](https://portal.thirdweb.com/unity/pay/getbuywithcryptoquote).
26
26
27
27
---
28
28
@@ -66,7 +66,7 @@ Our `ConnectButton` has a number of [customization options](/connect/pay/customi
66
66
67
67
---
68
68
69
-
## Option 2: Embed Pay
69
+
## Option 2: Embed Universal Bridge
70
70
71
71
The `PayEmbed` allows users to onramp and purchase crypto directly from your application interface.
72
72
@@ -84,7 +84,7 @@ export default function App() {
84
84
}
85
85
```
86
86
87
-
The embedded Pay component will be displayed like so in your application interface:
87
+
The embedded Universal Bridge component will be displayed like so in your application interface:
88
88
89
89
<DocImagesrc={GetStartedEmbed} />
90
90
@@ -96,7 +96,7 @@ Our `PayEmbed` has a number of [customization options](/connect/pay/customizatio
96
96
97
97
## Option 3: Send a Transaction with Pay
98
98
99
-
Pay is enabled by default for any contract call sent with `sendTransaction`. It will automatically be invoked when a user does not have enough funds to complete the transaction.
99
+
Universal Bridge is enabled by default for any contract call sent with `sendTransaction`. It will automatically be invoked when a user does not have enough funds to complete the transaction.
100
100
101
101
<Calloutvariant="info">
102
102
ℹ️ `sendTransaction` is available in [Connect SDK v5](/typescript/v5) or
@@ -123,10 +123,10 @@ const onClick = () => {
123
123
};
124
124
```
125
125
126
-
When a user clicks this button, Pay will perform gas estimation to determine if the user has a sufficient balance. If their balance is sufficient, the transaction will execute normally. If their balance is not sufficient, the following modal will pop up asking them to either onramp funds or convert crypto to the required amount:
126
+
When a user clicks this button, Universal Bridge will perform gas estimation to determine if the user has a sufficient balance. If their balance is sufficient, the transaction will execute normally. If their balance is not sufficient, the following modal will pop up asking them to either onramp funds or convert crypto to the required amount:
127
127
128
128
<DocImagesrc={GetStartedSend} />
129
129
130
130
Once a user onramps or converts their funds to the required token, the user will be prompted once more to confirm the transaction. The transaction will then execute as expected.
131
131
132
-
For deeper customization of the Pay transaction modal, you can refer to our [sendTransaction customization guide](/connect/pay/customization/send-transaction).
132
+
For deeper customization of the Universal Bridge transaction modal, you can refer to our [sendTransaction customization guide](/connect/pay/customization/send-transaction).
Copy file name to clipboardExpand all lines: apps/portal/src/app/connect/pay/guides/accept-direct-payments/page.mdx
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,17 +3,17 @@ import DirectPaymentsFlow from "../../assets/direct-payments-flow.png";
3
3
4
4
exportconst metadata =createMetadata({
5
5
image: {
6
-
title: "thirdweb Pay - Accept Direct Payments",
6
+
title: "thirdweb Universal Bridge- Accept Direct Payments",
7
7
icon: "thirdweb",
8
8
},
9
-
title: "thirdweb Pay - Accept Direct Payments | thirdweb",
9
+
title: "thirdweb Universal Bridge - Accept Direct Payments | thirdweb",
10
10
description:
11
-
"Combine Pay and Engine to create a smooth point of sale experience on any chain",
11
+
"Combine Universal Bridge and Engine to create a smooth point of sale experience on any chain",
12
12
});
13
13
14
-
# Accept Direct Payments with Pay & Engine
14
+
# Accept Direct Payments with Universal Bridge & Engine
15
15
16
-
Learn how to accept fiat and crypto from your customers with Pay and trigger Engine actions, like minting NFTs or transferring tokens to user wallets.
16
+
Learn how to accept fiat and crypto from your customers with Universal Bridge and trigger Engine actions, like minting NFTs or transferring tokens to user wallets.
17
17
18
18
### Requirements
19
19
@@ -26,11 +26,11 @@ Before jumping in, it's important to understand the full system, from initial pu
26
26
27
27
<DocImagesrc={DirectPaymentsFlow} />
28
28
29
-
1.**User Initiates Purchase:** User sends specified funds (ETH, MATIC, USD, etc.) to your wallet via thirdweb Pay.
29
+
1.**User Initiates Purchase:** User sends specified funds (ETH, MATIC, USD, etc.) to your wallet via thirdweb Universal Bridge.
30
30
- Your wallet can be any business wallet you choose or your Engine backend wallet.
31
31
- Use the `purchaseData` field to pass any item data needed in the webhook.
32
32
E.g., `{ nftId: 1 }`.
33
-
2.**Pay Processes Purchase:** thirdweb Pay processes the transaction and sends a [Purchase Complete webhook](/connect/pay/webhooks#purchase-complete) to your dapp’s server when the transaction is complete.
33
+
2.**Universal Bridge Processes Purchase:** thirdweb Universal Bridge processes the transaction and sends a [Purchase Complete webhook](/connect/pay/webhooks#purchase-complete) to your dapp’s server when the transaction is complete.
34
34
3.**Your Server Calls Engine:** Your server processes the webhook and sends a contract call to the thirdweb Engine backend wallet to perform the item purchase.
35
35
4.**Engine Executes the Transaction:** Engine backend wallet executes the transaction needed to deliver the token(s) to the user’s address.
36
36
5.**(Optional) User Is Notified :** Your server confirms the completed Engine transaction and notifies the user.
@@ -52,11 +52,11 @@ Now, let's get started.
52
52
53
53
4. Make a plan to monitor and keep the float wallet topped up to avoid any issues with the service.
54
54
</Step>
55
-
<Steptitle="Integrate thirdweb Pay (Client)">
56
-
1.[Integrate thirdweb Pay](https://portal.thirdweb.com/connect/pay/build-a-custom-experience) on the client side to enable fiat and crypto payments.
1.[Integrate thirdweb Universal Bridge](https://portal.thirdweb.com/connect/pay/build-a-custom-experience) on the client side to enable fiat and crypto payments.
57
57
58
58
59
-
2. Specify the required parameters for your Pay transaction.
59
+
2. Specify the required parameters for your Universal Bridge transaction.
60
60
61
61
```ts
62
62
const quote =awaitgetBuyWithFiatQuote({
@@ -84,9 +84,9 @@ Now, let's get started.
84
84
|purchaseData|`Object`|Any details you need to pass in order to track your transaction. If this is a secondary sale, you may want to include details like `{ nftId: 1, orderId: 1 }`|
85
85
86
86
</Step>
87
-
<Steptitle="Integrate thirdweb Pay (Server)">
88
-
1. Log in & create a “Purchase Complete” webhook in your Team > Connect > Pay > Webhooks page.
89
-
2. The [Pay webhook POST response](/connect/pay/webhooks#purchase-complete) will include the BuyWithCryptoStatus or BuyWithFiatStatus in the body.
1. Log in & create a “Purchase Complete” webhook in your Team > Connect > Universal Bridge > Webhooks page.
89
+
2. The [Universal Bridge webhook POST response](/connect/pay/webhooks#purchase-complete) will include the BuyWithCryptoStatus or BuyWithFiatStatus in the body.
90
90
* This will also include the purchaseData you previously passed (metadata identifying the customer information, etc.).
91
91
* A request will be sent on every status change.
92
92
3. Listen for [completed purchase statuses](https://portal.thirdweb.com/connect/pay/build-a-custom-experience#Poll%20for%20Transaction%20Status). Note that if this is a two-step BuyWithFiat transaction (onramp, then swap), you should also listen for `CRYPTO_SWAP_COMPLETED`
"Integrate onramp providers for any onchain transaction and set preferred providers",
11
11
});
12
12
13
13
# Onramp Providers
14
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.
15
+
thirdweb Universal Bridge 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.
Copy file name to clipboardExpand all lines: apps/portal/src/app/connect/pay/overview/page.mdx
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -70,7 +70,7 @@ Universal Bridge allows your users to bridge, swap, and purchase cryptocurrencie
70
70
71
71
## Supported Chains
72
72
73
-
Universal Bridge is supported on select EVM compatible chain. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=pay).
73
+
Universal Bridge is supported on select EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=pay).
74
74
75
75
<DocImagesrc={SupportedChains} />
76
76
@@ -80,7 +80,7 @@ Thirdweb collects a 1% fee per end-user transaction and shares 70% of that fee w
80
80
81
81
Note: Fee sharing applies only to fees from swaps and bridges; fiat purchases are excluded.
82
82
83
-
To enable fee sharing, simply set a recipient address in your dashboard under Team > Project > Connect > Pay in the thirdweb dashboard.
83
+
To enable fee sharing, simply set a recipient address in your dashboard under Team > Project > Connect > Universal Bridge in the thirdweb dashboard.
84
84
85
85
## Onramp providers
86
86
@@ -100,4 +100,4 @@ Specify a preferred onramp provider by setting the preferredProvider parameter i
100
100
|[ConnectButton](/connect/pay/get-started#option-1-connectbutton)| Developers who want out-of-the-box support complete with wallet and social login. |
101
101
|[PayEmbed](/connect/pay/get-started#option-2-embed-pay)| Developers who want onramp and crypto purchase experiences directly in their application. |
102
102
|[Transaction Flow (sendTransaction)](/connect/pay/get-started#option-3-send-a-transaction-with-pay)| Developers who want users to onramp or purchase crypto directly into a transaction. Great for minting and NFT purchase flows. |
103
-
|[Custom Pay Experience](/connect/pay/build-a-custom-experience)| Developers who want full customization over every step of the onramp process, from displaying quotes to polling for transaction statuses. |
103
+
|[Custom Universal Bridge Experience](/connect/pay/build-a-custom-experience)| Developers who want full customization over every step of the onramp process, from displaying quotes to polling for transaction statuses. |
0 commit comments