Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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).

---

Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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.

Expand Down
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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.

Expand Down
Original file line number Diff line number Diff line change
@@ -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).

---

Expand Down Expand Up @@ -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.

Expand Down
8 changes: 4 additions & 4 deletions apps/portal/src/app/connect/pay/faqs/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
</Details>

<Details summary="What cryptocurrencies does Pay support?">
Pay can support any currency on our [supported chains](/connect/pay/supported-chains).
<Details summary="What cryptocurrencies does Universal Bridge support?">
Universal Bridge can support any currency on our [supported chains](/connect/pay/supported-chains).
</Details>

<Details summary="How are cryptocurrency prices set in thirdweb Pay?">
<Details summary="How are cryptocurrency prices set in thirdweb Universal Bridge?">
Prices are set depending on the liquidity provider used to route your transaction.
</Details>

<Details summary="Does thirdweb Pay offer fiat payouts?">
<Details summary="Does thirdweb Universal Bridge offer fiat payouts?">
Fiat payouts are not currently available.
</Details>

Expand Down
8 changes: 4 additions & 4 deletions apps/portal/src/app/connect/pay/fee-sharing/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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).

<DocImage src={paySettingsImage} />
12 changes: 6 additions & 6 deletions apps/portal/src/app/connect/pay/get-started/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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).

---

Expand Down Expand Up @@ -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.

Expand All @@ -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:

<DocImage src={GetStartedEmbed} />

Expand All @@ -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.

<Callout variant="info">
ℹ️ `sendTransaction` is available in [Connect SDK v5](/typescript/v5) or
Expand All @@ -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:

<DocImage src={GetStartedSend} />

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).
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -26,11 +26,11 @@ Before jumping in, it's important to understand the full system, from initial pu

<DocImage src={DirectPaymentsFlow} />

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.
Expand All @@ -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.
</Step>
<Step title="Integrate thirdweb Pay (Client)">
1. [Integrate thirdweb Pay](https://portal.thirdweb.com/connect/pay/build-a-custom-experience) on the client side to enable fiat and crypto payments.
<Step title="Integrate thirdweb Universal Bridge (Client)">
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({
Expand Down Expand Up @@ -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 }` |

</Step>
<Step title="Integrate thirdweb Pay (Server)">
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.
<Step title="Integrate thirdweb Universal Bridge (Server)">
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`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions apps/portal/src/app/connect/pay/onramp-providers/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
| -------- | ------------------------------------------------------------------------------------------------------- |
Expand Down
6 changes: 3 additions & 3 deletions apps/portal/src/app/connect/pay/overview/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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).

<DocImage src={SupportedChains} />

Expand All @@ -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

Expand All @@ -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. |
8 changes: 4 additions & 4 deletions apps/portal/src/app/connect/pay/supported-chains/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Loading
Loading