Skip to content

Commit 9985ed3

Browse files
committed
Update payment documentation: Modify sidebar link for Universal Bridge and enhance NFT checkout guide with new imports for improved functionality.
1 parent 6366174 commit 9985ed3

File tree

2 files changed

+5
-46
lines changed
  • apps
    • dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/universal-bridge
    • portal/src/app/pay/guides/nft-checkout

2 files changed

+5
-46
lines changed

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/universal-bridge/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default async function Layout(props: {
3333
tokens via cross-chain routing.{" "}
3434
<UnderlineLink
3535
target="_blank"
36-
href="https://portal.thirdweb.com/connect/pay/overview"
36+
href="https://portal.thirdweb.com/pay"
3737
>
3838
Learn more
3939
</UnderlineLink>

apps/portal/src/app/pay/guides/nft-checkout/page.mdx

Lines changed: 4 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ function WalletAuth({ onConnect }: { onConnect: (address: string) => void }) {
156156
Create the main checkout component that handles the complete purchase flow:
157157
158158
```typescript
159-
import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb";
159+
import { Bridge, NATIVE_TOKEN_ADDRESS, toWei, sendTransaction } from "thirdweb";
160160
import { prepareContractCall } from "thirdweb";
161161
import { mintTo } from "thirdweb/extensions/erc721";
162162
import { useState, useEffect } from "react";
@@ -672,6 +672,8 @@ Put it all together in your main application:
672672
673673
```typescript
674674
import { ThirdwebProvider } from "thirdweb/react";
675+
// Import all the components we defined earlier
676+
import { NFTCheckout, WalletAuth, PaymentOptions, ProcessingStep, SuccessStep, ErrorStep } from "./nft-checkout-components";
675677

676678
function App() {
677679
return (
@@ -699,47 +701,4 @@ function App() {
699701
}
700702

701703
export default App;
702-
```
703-
704-
<Callout variant="info">
705-
This creates a complete NFT purchase flow where users can sign in with familiar social accounts, choose their preferred payment method, and have their NFT automatically minted after payment completion - all in a seamless single-click experience.
706-
</Callout>
707-
708-
</Step>
709-
</Steps>
710-
711-
## Key Features
712-
713-
### **Seamless User Experience**
714-
- **One-Click Payments**: Users select "Pay with [Provider]" and everything happens automatically
715-
- **Social Login**: Users sign in with Google, Apple, or email
716-
- **Real-time Progress**: Clear visual feedback showing payment → confirmation → minting
717-
- **Auto-completion**: NFT mints automatically after successful payment
718-
719-
### **Production Ready**
720-
- **Multiple Providers**: Stripe, Coinbase, and Transak options with clear fee comparison
721-
- **Session Persistence**: Resume interrupted flows
722-
- **Error Recovery**: Graceful handling of failed transactions
723-
- **Mobile Optimized**: Responsive design for all devices
724-
725-
### **Security & Compliance**
726-
- **Provider Verification**: All payments processed through established, compliant providers
727-
- **Secure Authentication**: Industry-standard OAuth flows
728-
- **Transaction Verification**: Blockchain confirmation before success
729-
730-
## Use Cases
731-
732-
This streamlined NFT checkout pattern is perfect for:
733-
734-
- **Gaming Platforms**: In-game item purchases with instant delivery
735-
- **Art Marketplaces**: Digital art and collectibles with zero friction
736-
- **Event Ticketing**: NFT-based tickets with immediate access
737-
- **Membership Programs**: Exclusive access tokens with instant activation
738-
- **Brand Collectibles**: Loyalty rewards and limited drops
739-
740-
## Next Steps
741-
742-
- **[Swap with Smart Accounts](/pay/guides/smart-accounts)** - Add batched transactions and gas sponsorship
743-
- **[Fiat Onramp](/pay/guides/onramp-integration)** - Dive deeper into onramp configuration
744-
- **[Webhooks](/pay/webhooks)** - Set up server-side transaction monitoring
745-
- **[Testing](/pay/testing-pay)** - Test your checkout flow in development mode
704+
```

0 commit comments

Comments
 (0)