Skip to content
This repository has been archived by the owner on Aug 5, 2024. It is now read-only.

Grammatical & Structural Clarifications for Pay Docs #396

Merged
merged 3 commits into from
May 10, 2024
Merged
Show file tree
Hide file tree
Changes from 2 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
49 changes: 34 additions & 15 deletions src/app/connect/pay/build-a-custom-experience/page.mdx
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import { createMetadata, DocImage, Steps, Step } from "@doc";
import {
createMetadata,
Callout,
DocImage,
InstallTabs,
Steps,
Step,
} from "@doc";
import OnrampStepOne from "../assets/avax-to-usd.png";

export const metadata = createMetadata({
Expand All @@ -13,35 +20,47 @@ export const metadata = createMetadata({

# Build a Custom Pay Experience

Learn how to enable your users to purchase your application’s token with any fiat payment method with our headless flow. In this guide, we’ll show you how to onramp users into Base ETH.
Learn how to enable your users to purchase your application’s token with any fiat payment method with our headless flow.

Our `PayEmbed` component handles the complexity of the process detailed below and can be integrated in minutes. We encourage you to check out the [PayEmbed guide here](/connect/pay/get-started#embed-pay).
In this guide, we'll show you how to purchase 0.01 Base ETH from USD in Typescript.

Buying with Fiat can require one or two steps depending on your destination token.

In this guide, we will show you how to purchase 0.01 Base ETH from USD in Typescript.
<Callout variant="info">
Our `PayEmbed` component handles the complexity of the process detailed below
and can be integrated in minutes. We encourage you to check out the [PayEmbed
guide here](/connect/pay/get-started#embed-pay).
</Callout>

---

<Steps>
<Step title='Install the Connect SDK'>
<InstallTabs
npm="npm i thirdweb"
yarn="yarn install thirdweb"
pnpm="pnpm i thirdweb"
/>
<Step title='Get Your Client ID'>

Log in to the [thirdweb dashboard](https://thirdweb.com/dashboard). Navigate to the **Settings** page and create an API key to get your **Client ID**. You'll need your Client ID to interact with the Connect SDK.

</Step>
</Step>
<Step title='Get a “Buy with Fiat” quote'>
- If desired token can be bought directly with fiat currency
- Your users will onramp directly to their destination token
- If desired token can not be bought directly with fiat currency
- Your users will onramp to an intermediate token
- Your users will be prompted to convert the onramp token to the destination token
Buying with fiat can require one or two steps depending on your destination token:

If the destination token _*can*_ be bought directly with fiat, your users can onramp directly to their destination token.

If the destination token _*can not*_ be bought directly with fiat, your users will need to onramp to an intermediate token, then convert the onramp token to the destination token.

For example, when Buying Base ETH:

1. Users will receive Avalance AVAX ( native token ) in exchange of USD
2. Users will be prompted to convert Avalance AVAX to Base ETH
1. Users will receive Avalance AVAX ( native token ) in exchange for USD
2. Users will be prompted to convert Avalanche AVAX to Base ETH

<DocImage src={OnrampStepOne} />

This process requires your user's wallet address. Refer to [this guide](https://portal.thirdweb.com/typescript/v5/connecting-wallets) to learn how to connect a wallet.

Thirdweb SDK requires a client. You can [view this reference](https://portal.thirdweb.com/typescript/v5/client) to create a client.

```tsx
import { getBuyWithFiatQuote } from "thirdweb/pay";
import { NATIVE_TOKEN_ADDRESS } from "thirdweb";
Expand Down
2 changes: 1 addition & 1 deletion src/app/connect/pay/faqs/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Pay currently requires KYC for first-time purchases. Subsequent purchases will n

### What cryptocurrencies does Pay support?

Pay can support any currency on our [supported chains](https://www.notion.so/Supported-Chains-fc4dc21ea46a4a11aed62bee0a82536a?pvs=21).
Pay can support any currency on our [supported chains](/connect/pay/supported-chains).

### How are cryptocurrency prices set in thirdweb Pay?

Expand Down
2 changes: 1 addition & 1 deletion src/app/connect/pay/get-started/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ The following guide uses our Typescript SDK. You can also learn how to integrate
</Step>
<Step title="Get Your Client ID">

Log in to [the thirdweb dashboard](https://thirdweb.com/dashboard). Navigate to the **Settings** page and create an API key to get your **Client ID**.
Log in to [the thirdweb dashboard](https://thirdweb.com/dashboard). Navigate to the **Settings** page and create an API key to get your **Client ID**. You'll need your Client ID to interact with the Connect SDK.

</Step>
</Steps>
Expand Down
Loading