diff --git a/apps/portal/src/app/connect/pay/customization/connectbutton/page.mdx b/apps/portal/src/app/connect/pay/customization/connectbutton/page.mdx index 851ad2684c0..1883483fe74 100644 --- a/apps/portal/src/app/connect/pay/customization/connectbutton/page.mdx +++ b/apps/portal/src/app/connect/pay/customization/connectbutton/page.mdx @@ -1,17 +1,17 @@ import { createMetadata, DocImage } from "@doc"; export const metadata = createMetadata({ image: { - title: "thirdweb Pay - Customize ConnectButton", + title: "thirdweb Universal Bridge - Customize ConnectButton", icon: "thirdweb", }, - title: "thirdweb Pay - Customize ConnectButton - thirdweb", + title: "thirdweb Universal Bridge - Customize ConnectButton - thirdweb", description: - "thirdweb Pay - Customizing ConnectButton onramps and crypto purchase flows", + "thirdweb Universal Bridge - Customizing ConnectButton onramps and crypto purchase flows", }); # Customize ConnectButton -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). +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). --- @@ -39,7 +39,7 @@ You can enable users to select your token on a given chain by passing an array o ## Prefill Destination Token -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` . +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` . For example, if you wanted users to only purchase Ethereum on Base network, you could do as follows: @@ -137,7 +137,7 @@ In some cases, you may only want to show users fiat or crypto payment options fo ## Theme -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. +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. We have [`lightTheme`](/references/typescript/v5/lightTheme) or [`darkTheme`](/references/typescript/v5/darkTheme) providers that you can override to kickstart customization. diff --git a/apps/portal/src/app/connect/pay/customization/payembed/page.mdx b/apps/portal/src/app/connect/pay/customization/payembed/page.mdx index 136048ca23b..7487ef7141c 100644 --- a/apps/portal/src/app/connect/pay/customization/payembed/page.mdx +++ b/apps/portal/src/app/connect/pay/customization/payembed/page.mdx @@ -1,12 +1,12 @@ import { createMetadata, DocImage } from "@doc"; export const metadata = createMetadata({ image: { - title: "thirdweb Pay - Customize PayEmbed", + title: "thirdweb Universal Bridge - Customize PayEmbed", icon: "thirdweb", }, - title: "thirdweb Pay - Customize PayEmbed - thirdweb", + title: "thirdweb Universal Bridge - Customize PayEmbed - thirdweb", description: - "thirdweb Pay - Customizing embeddable onramps and crypto purchase flows", + "thirdweb Universal Bridge - Customizing embeddable onramps and crypto purchase flows", }); # PayEmbed Customization @@ -129,7 +129,7 @@ In some cases, you may only want to show users fiat or crypto payment options fo ## Theme -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. +You can set the theme for the component, which is set to `"dark"` by default. theme can be set to either `"dark"` , `"light"` or a custom theme object. We have [`lightTheme`](/references/typescript/v5/lightTheme) or [`darkTheme`](/references/typescript/v5/darkTheme) providers that you can override to kickstart customization. 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 index d2111141a80..d92e7e83625 100644 --- a/apps/portal/src/app/connect/pay/customization/send-transaction/page.mdx +++ b/apps/portal/src/app/connect/pay/customization/send-transaction/page.mdx @@ -1,17 +1,17 @@ import { createMetadata, DocImage } from "@doc"; export const metadata = createMetadata({ image: { - title: "thirdweb Pay - Customize sendTransaction", + title: "thirdweb Universal Bridge - Customize sendTransaction", icon: "thirdweb", }, - title: "thirdweb Pay - Customize sendTransaction - thirdweb", + title: "thirdweb Universal Bridge - Customize sendTransaction - thirdweb", description: - "thirdweb Pay - Customizing point of sale onramps and crypto purchase flows", + "thirdweb Universal Bridge- Customizing point of sale onramps and crypto purchase flows", }); # useSendTransaction Customization -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). +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). --- @@ -123,7 +123,7 @@ const { mutate: sendTransaction } = useSendTransaction({ ## Theme -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. +You can set the theme for the component, which is set to `"dark"` by default. theme can be set to either `"dark"` , `"light"` or a custom theme object. We have [`lightTheme`](/references/typescript/v5/lightTheme) or [`darkTheme`](/references/typescript/v5/darkTheme) providers that you can override to kickstart customization. diff --git a/apps/portal/src/app/connect/pay/faqs/page.mdx b/apps/portal/src/app/connect/pay/faqs/page.mdx index d0ceced4839..31a633f51e3 100644 --- a/apps/portal/src/app/connect/pay/faqs/page.mdx +++ b/apps/portal/src/app/connect/pay/faqs/page.mdx @@ -85,15 +85,15 @@ All other tokens will require an additional Buy With Crypto step. 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. -
-Pay can support any currency on our [supported chains](/connect/pay/supported-chains). +
+Universal Bridge can support any currency on our [supported chains](/connect/pay/supported-chains).
-
+
Prices are set depending on the liquidity provider used to route your transaction.
-
+
Fiat payouts are not currently available.
diff --git a/apps/portal/src/app/connect/pay/fee-sharing/page.mdx b/apps/portal/src/app/connect/pay/fee-sharing/page.mdx index 25633d98867..84b67aa60ac 100644 --- a/apps/portal/src/app/connect/pay/fee-sharing/page.mdx +++ b/apps/portal/src/app/connect/pay/fee-sharing/page.mdx @@ -3,11 +3,11 @@ import paySettingsImage from "../assets/pay-settings.png"; export const metadata = createMetadata({ image: { - title: "thirdweb Pay - Fee Sharing", + title: "thirdweb Universal Bridge - Fee Sharing", icon: "thirdweb", }, - title: "thirdweb Pay - Fee Sharing | thirdweb", - description: "How to participate in fee sharing with thirdweb Pay.", + title: "thirdweb Universal Bridge - Fee Sharing | thirdweb", + description: "How to participate in fee sharing with thirdweb Universal Bridge", }); # Fee Sharing @@ -18,6 +18,6 @@ For example, if a user purchases $100 worth of Polygon through your application, Plase note that fee sharing only applies to fees collected through swaps and bridges. Fiat purchases do not currently qualify for fee sharing. -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). +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). diff --git a/apps/portal/src/app/connect/pay/get-started/page.mdx b/apps/portal/src/app/connect/pay/get-started/page.mdx index 38573f89f0b..c631050fb09 100644 --- a/apps/portal/src/app/connect/pay/get-started/page.mdx +++ b/apps/portal/src/app/connect/pay/get-started/page.mdx @@ -22,7 +22,7 @@ export const metadata = createMetadata({ 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). -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). +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). --- @@ -66,7 +66,7 @@ Our `ConnectButton` has a number of [customization options](/connect/pay/customi --- -## Option 2: Embed Pay +## Option 2: Embed The `PayEmbed` allows users to onramp and purchase crypto directly from your application interface. @@ -84,7 +84,7 @@ export default function App() { } ``` -The embedded Pay component will be displayed like so in your application interface: +The embedded component will be displayed like so in your application interface: @@ -96,7 +96,7 @@ Our `PayEmbed` has a number of [customization options](/connect/pay/customizatio ## Option 3: Send a Transaction with Pay -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. +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. ℹ️ `sendTransaction` is available in [Connect SDK v5](/typescript/v5) or @@ -123,10 +123,10 @@ const onClick = () => { }; ``` -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: +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: 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. -For deeper customization of the Pay transaction modal, you can refer to our [sendTransaction customization guide](/connect/pay/customization/send-transaction). +For deeper customization of the Universal Bridge transaction modal, you can refer to our [sendTransaction customization guide](/connect/pay/customization/send-transaction). diff --git a/apps/portal/src/app/connect/pay/guides/accept-direct-payments/page.mdx b/apps/portal/src/app/connect/pay/guides/accept-direct-payments/page.mdx index 664937c2a01..d55d7710209 100644 --- a/apps/portal/src/app/connect/pay/guides/accept-direct-payments/page.mdx +++ b/apps/portal/src/app/connect/pay/guides/accept-direct-payments/page.mdx @@ -3,17 +3,17 @@ import DirectPaymentsFlow from "../../assets/direct-payments-flow.png"; export const metadata = createMetadata({ image: { - title: "thirdweb Pay - Accept Direct Payments", + title: "thirdweb Universal Bridge - Accept Direct Payments", icon: "thirdweb", }, - title: "thirdweb Pay - Accept Direct Payments | thirdweb", + title: "thirdweb Universal Bridge - Accept Direct Payments | thirdweb", description: - "Combine Pay and Engine to create a smooth point of sale experience on any chain", + "Combine Universal Bridge and Engine to create a smooth point of sale experience on any chain", }); -# Accept Direct Payments with Pay & Engine +# Accept Direct Payments with Universal Bridge & Engine -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. +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. ### Requirements @@ -26,11 +26,11 @@ Before jumping in, it's important to understand the full system, from initial pu -1. **User Initiates Purchase:** User sends specified funds (ETH, MATIC, USD, etc.) to your wallet via thirdweb Pay. +1. **User Initiates Purchase:** User sends specified funds (ETH, MATIC, USD, etc.) to your wallet via thirdweb Universal Bridge. - Your wallet can be any business wallet you choose or your Engine backend wallet. - Use the `purchaseData` field to pass any item data needed in the webhook. E.g., `{ nftId: 1 }`. -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. +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. 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. 4. **Engine Executes the Transaction:** Engine backend wallet executes the transaction needed to deliver the token(s) to the user’s address. 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. 4. Make a plan to monitor and keep the float wallet topped up to avoid any issues with the service. - - 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. - 2. Specify the required parameters for your Pay transaction. + 2. Specify the required parameters for your Universal Bridge transaction. ```ts const quote = await getBuyWithFiatQuote({ @@ -84,9 +84,9 @@ Now, let's get started. |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 }` | - - 1. Log in & create a “Purchase Complete” webhook in your Team > Connect > Pay > Webhooks page. - 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. + 2. The [Universal Bridge webhook POST response](/connect/pay/webhooks#purchase-complete) will include the BuyWithCryptoStatus or BuyWithFiatStatus in the body. * This will also include the purchaseData you previously passed (metadata identifying the customer information, etc.). * A request will be sent on every status change. 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` diff --git a/apps/portal/src/app/connect/pay/guides/build-a-custom-experience/page.mdx b/apps/portal/src/app/connect/pay/guides/build-a-custom-experience/page.mdx index 184461922bf..b617f7c281d 100644 --- a/apps/portal/src/app/connect/pay/guides/build-a-custom-experience/page.mdx +++ b/apps/portal/src/app/connect/pay/guides/build-a-custom-experience/page.mdx @@ -10,12 +10,12 @@ import OnrampStepOne from "../../assets/avax-to-usd.png"; export const metadata = createMetadata({ image: { - title: "thirdweb Pay - Custom Experience", + title: "thirdweb Universal Bridge - Custom Experience", icon: "thirdweb", }, - title: "thirdweb Pay - Buy With Fiat - Custom Experience | thirdweb", + title: "thirdweb Universal Bridge - Buy With Fiat - Custom Experience | thirdweb", description: - "Learn how to build a custom onramp experience with thirdweb Pay.", + "Learn how to build a custom onramp experience with thirdweb Universal Bridge.", }); # Build a Custom Fiat Experience diff --git a/apps/portal/src/app/connect/pay/onramp-providers/page.mdx b/apps/portal/src/app/connect/pay/onramp-providers/page.mdx index ca2f44bc6ad..01541517ba5 100644 --- a/apps/portal/src/app/connect/pay/onramp-providers/page.mdx +++ b/apps/portal/src/app/connect/pay/onramp-providers/page.mdx @@ -2,17 +2,17 @@ import { createMetadata } from "@doc"; export const metadata = createMetadata({ image: { - title: "thirdweb Pay - Onramp Providers", + title: "thirdweb Universal Bridge - Onramp Providers", icon: "thirdweb", }, - title: "thirdweb Pay - Onramp Providers | thirdweb", + title: "thirdweb Universal Bridge - 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. +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. | Provider | Supported Countries | | -------- | ------------------------------------------------------------------------------------------------------- | diff --git a/apps/portal/src/app/connect/pay/overview/page.mdx b/apps/portal/src/app/connect/pay/overview/page.mdx index b0767bc68e5..d83de00d2f1 100644 --- a/apps/portal/src/app/connect/pay/overview/page.mdx +++ b/apps/portal/src/app/connect/pay/overview/page.mdx @@ -70,7 +70,7 @@ Universal Bridge allows your users to bridge, swap, and purchase cryptocurrencie ## Supported Chains -Universal Bridge is supported on select EVM compatible chain. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=pay). +Universal Bridge is supported on select EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=pay). @@ -80,7 +80,7 @@ Thirdweb collects a 1% fee per end-user transaction and shares 70% of that fee w Note: Fee sharing applies only to fees from swaps and bridges; fiat purchases are excluded. -To enable fee sharing, simply set a recipient address in your dashboard under Team > Project > Connect > Pay in the thirdweb dashboard. +To enable fee sharing, simply set a recipient address in your dashboard under Team > Project > Connect > Universal Bridge in the thirdweb dashboard. ## Onramp providers @@ -100,4 +100,4 @@ Specify a preferred onramp provider by setting the preferredProvider parameter i | [ConnectButton](/connect/pay/get-started#option-1-connectbutton) | Developers who want out-of-the-box support complete with wallet and social login. | | [PayEmbed](/connect/pay/get-started#option-2-embed-pay) | Developers who want onramp and crypto purchase experiences directly in their application. | | [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. | -| [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. | +| [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. | diff --git a/apps/portal/src/app/connect/pay/supported-chains/page.mdx b/apps/portal/src/app/connect/pay/supported-chains/page.mdx index 7b37aa976a6..c838e904627 100644 --- a/apps/portal/src/app/connect/pay/supported-chains/page.mdx +++ b/apps/portal/src/app/connect/pay/supported-chains/page.mdx @@ -2,15 +2,15 @@ import { createMetadata } from "@doc"; export const metadata = createMetadata({ image: { - title: "thirdweb Pay - Supported Chains", + title: "thirdweb Universal Bridge - Supported Chains", icon: "thirdweb", }, - title: "thirdweb Pay - Supported Chains | thirdweb", - description: "List of chains supported by Pay.", + title: "thirdweb Universal Bridge - Supported Chains | thirdweb", + description: "List of chains supported by Universal Bridge.", }); # Supported Chains -[View all supported chains with Pay](https://thirdweb.com/chainlist?service=pay). +[View all supported chains with Universal Bridge](https://thirdweb.com/chainlist?service=pay). If you’d like to suggest a chain for us to support, [contact us](https://thirdweb.com/contact-us). diff --git a/apps/portal/src/app/connect/sidebar.tsx b/apps/portal/src/app/connect/sidebar.tsx index de8ee143a41..ad6bacd3ef7 100644 --- a/apps/portal/src/app/connect/sidebar.tsx +++ b/apps/portal/src/app/connect/sidebar.tsx @@ -297,15 +297,7 @@ export const sidebar: SideBar = { ], }, { - name: "Webhooks", - href: `${paySlug}/webhooks`, - }, - { - name: "Testing Pay", - href: `${paySlug}/testing-pay`, - }, - { - name: "Guides", + name: "Tutorials", isCollapsible: true, links: [ @@ -338,6 +330,14 @@ export const sidebar: SideBar = { }, ], }, + { + name: "Webhooks", + href: `${paySlug}/webhooks`, + }, + { + name: "Developer Mode", + href: `${paySlug}/testing-pay`, + }, { name: "FAQs", href: `${paySlug}/faqs`,