Skip to content

Add onramp providers page to Pay overview #5836

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 14, 2025
Merged

Add onramp providers page to Pay overview #5836

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
17 changes: 17 additions & 0 deletions apps/portal/src/app/connect/pay/customization/connectbutton/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,23 @@ If you'd like to prefill a purchase with a native token, you can set the chain w

---

## Preferred Provider

You can specify which onramp provider to present to your users. By default, we choose a recommended provider based on the location of the user, KYC status, and currency. Please make sure your set provider is [available in your country](../onramp-providers).

```tsx
<ConnectButton
client={client}
detailsModal={{
payOptions: {
preferredProvider: "STRIPE" | "KADO" | "TRANSAK",
},
}}
/>
```

---

## Disable Payment Methods

In some cases, you may only want to show users fiat or crypto payment options for your onchain goods or services. You can do this by setting either `buyWithCrypto` or `buyWithFiat` to `false`.
Expand Down
15 changes: 15 additions & 0 deletions apps/portal/src/app/connect/pay/customization/payembed/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,21 @@ If you'd like to prefill a purchase with a native token, you can set the chain w

---

## Preferred Provider

You can specify which onramp provider to present to your users. By default, we choose a recommended provider based on the location of the user, KYC status, and currency. Please make sure your set provider is [available in your country](../onramp-providers).

```tsx
<PayEmbed
client={client}
payOptions={{
preferredProvider: "STRIPE" | "KADO" | "TRANSAK",
}}
/>
```

---

## Disable Payment Methods

In some cases, you may only want to show users fiat or crypto payment options for your onchain goods or services. You can do this by setting either `buyWithCrypto` or `buyWithFiat` to `false`.
Expand Down
49 changes: 32 additions & 17 deletions apps/portal/src/app/connect/pay/customization/send-transaction/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Learn how to customize the Pay interface when executing a transaction with `useS
You can enable users to select your token on a given chain by passing an array of `SupportedTokens`. Note that this array overrides all default tokens listed for that chain.

```tsx
const { mutate: sendTransaction } = useSendTransaction({
const { mutate: sendTransaction } = useSendTransaction({
payModal: {
supportedTokens: {
"1": [
Expand All @@ -32,7 +32,7 @@ const { mutate: sendTransaction } = useSendTransaction({
},
],
},
}
},
});
```

Expand All @@ -47,7 +47,7 @@ For example, if you wanted users to only purchase Ethereum on Base network, you
```tsx
import { base } from "thirdweb/chains";

const { mutate: sendTransaction } = useSendTransaction({
const { mutate: sendTransaction } = useSendTransaction({
payModal: {
prefillBuy: {
token: {
Expand All @@ -63,19 +63,34 @@ const { mutate: sendTransaction } = useSendTransaction({
chain: false, // disable selecting buy chain
},
},
}});
},
});
```

If you'd like to prefill a purchase with a native token, you can set the chain without passing a token:

```tsx
const { mutate: sendTransaction } = useSendTransaction({
const { mutate: sendTransaction } = useSendTransaction({
payModal: {
prefillBuy: {
chain: base,
},
}}
);
},
});
```

---

## Preferred Provider

You can specify which onramp provider to present to your users. By default, we choose a recommended provider based on the location of the user, KYC status, and currency. Please make sure your set provider is [available in your country](../onramp-providers).

```tsx
const { mutate: sendTransaction } = useSendTransaction({
payModal: {
preferredProvider: "STRIPE" | "KADO" | "TRANSAK",
},
});
```

---
Expand All @@ -87,21 +102,21 @@ In some cases, you may only want to show users fiat or crypto payment options fo
#### Disable Buy With Crypto

```tsx
const { mutate: sendTransaction } = useSendTransaction({
const { mutate: sendTransaction } = useSendTransaction({
payModal: {
buyWithCrypto: false,
}}
);
},
});
```

#### Disable Buy With Fiat

```tsx
const { mutate: sendTransaction } = useSendTransaction({
const { mutate: sendTransaction } = useSendTransaction({
payModal: {
buyWithFiat: false,
}}
);
},
});
```

---
Expand All @@ -117,11 +132,11 @@ You can refer to our [`Theme`](/references/typescript/v5/Theme) page for a full
#### Provided Themes

```tsx
const { mutate: sendTransaction } = useSendTransaction({
const { mutate: sendTransaction } = useSendTransaction({
payModal: {
theme: "dark", // or "light"
}}
);
},
});
```

#### Custom Theme
Expand All @@ -130,7 +145,7 @@ const { mutate: sendTransaction } = useSendTransaction({
import { darkTheme } from 'thirdweb/react';

// Using custom theme
const { mutate: sendTransaction } = useSendTransaction({
const { mutate: sendTransaction } = useSendTransaction({
payModal: {
theme: darkTheme({ ... },
}}
Expand Down
25 changes: 25 additions & 0 deletions apps/portal/src/app/connect/pay/onramp-providers/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { createMetadata } from "@doc";

export const metadata = createMetadata({
image: {
title: "thirdweb Pay - Onramp Providers",
icon: "thirdweb",
},
title: "thirdweb Pay - 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.

| Provider | Supported Countries |
| -------- | ------------------------------------------------------------------------------------------------------- |
| Transak | https://transak.notion.site/On-Ramp-Payment-Methods-Fees-Other-Details-b0761634feed4b338a69f4f186d906a5 |
| Kado | https://www.kado.money/supported-countries |
| Stripe | https://docs.stripe.com/crypto/onramp |

## Choosing a Preferred Provider

It is possible to specify a preferred onramp provider by setting the `preferredProvider` parameter in the ConnectButton, PayEmbed, or Headless Integration. Go to [customizations](../pay/customization/connectbutton#preferredProvider) for more detail, or checkout the [API Reference for preferredProvider](https://portal.thirdweb.com/references/typescript/v5/GetBuyWithFiatQuoteParams).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The relative path ../pay/customization/connectbutton#preferredProvider needs to be updated to ../customization/connectbutton#preferred-provider. The anchor portion of the URL should use kebab-case to match the auto-generated heading ID from the markdown processor.

Spotted by Graphite Reviewer

Is this helpful? React 👍 or 👎 to let us know.

0 ...app/connect/pay/supported-chains/page.mdx → ...onnect/pay/supported-chains copy/page.mdx
View file
Open in desktop
File renamed without changes.
4 changes: 4 additions & 0 deletions apps/portal/src/app/connect/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,10 @@ export const sidebar: SideBar = {
name: "Supported Chains",
href: `${paySlug}/supported-chains`,
},
{
name: "Onramp Providers",
href: `${paySlug}/onramp-providers`,
},

{
name: "Fee Sharing",
Expand Down
Loading