Skip to content

checkout.mdx

Latest commit

 

History

History
288 lines (240 loc) · 7.46 KB

checkout.mdx

File metadata and controls

288 lines (240 loc) · 7.46 KB
title Checkout
icon cart-shopping
description Add crypto payment checkout to your e-commerce platform with seamless customer experience
**AI-Generated Content** – This page was generated with AI assistance and may contain inaccuracies. While likely close to accurate, please verify critical details with the [stable documentation](https://docs.request.network) or [contact support](https://github.com/orgs/RequestNetwork/discussions).

Overview

Transform your e-commerce checkout with Request Network's payment infrastructure. Accept crypto payments with support for 80+ wallets, enable crosschain transactions, and provide customers with a seamless payment experience that rivals traditional payment processors.

🚀 Quickstart: Integrate Your First Checkout Payment

**Integrate your first checkout payment in under 1 minute**

Interactive quickstart experience coming soon

Embed the Request Network payment widget in your checkout Set accepted payment currencies and conversion rates Listen for payment confirmations and update order status Automatically match payments to orders with zero manual work

EasyInvoice Demo

Experience checkout payment flows through our demo:

See the payment widget with wallet connection and direct payment forms

<Card title="🔗 Try Checkout Flow" href="https://easy-invoice-demo.vercel.app/pay" icon="external-link"

Experience the complete customer payment journey

Demo Features:

  • 80+ wallet connection support (MetaMask, WalletConnect, Coinbase, etc.)
  • Direct payment forms with QR codes
  • Real-time payment status updates
  • Crosschain payment options
  • Mobile-optimized payment experience

Integration Options

**Best for:** Quick e-commerce integration, existing payment forms 
Embed checkout functionality in existing e-commerce:
- Drop-in payment widget
- Hosted payment pages
- Minimal integration required

*Embed code documentation coming soon*
**Best for:** Custom checkout experience, brand matching 
Tailor checkout flow to match brand/UX requirements:
- Custom payment UI components
- Branded checkout experience
- Advanced payment flow customization

*Fork repository and customization guide coming soon*
**Best for:** Complete control, enterprise integration 
Build checkout with full control over user experience:
- Custom payment logic and validation
- Advanced fraud prevention
- Deep e-commerce platform integration

[Checkout API Documentation →](/api-features/payment-types-overview)

Key API Features for Checkout

Drop-in payment component with 80+ wallet support

<Card title="Crosschain Payments" href="/api-features/payment-types-overview" icon="link"

Accept payments from any supported blockchain

<Card title="Platform Fees" href="/api-features/platform-fees" icon="percentage"

Collect marketplace or processing fees automatically

<Card title="Error Handling" href="/api-features/partial-payments" icon="exclamation-triangle"

Robust error handling for failed or partial payments

<Card title="Payment Routing" href="/api-features/payment-types-overview" icon="route"

Optimize payment paths for best rates and speed

<Card title="Real-time Updates" href="/api-features/webhooks-events" icon="bolt"

Instant payment confirmation and order updates

E-commerce Integration Patterns

Integrate with existing e-commerce platforms: - Shopify, WooCommerce, Magento plugins - Payment gateway replacement - Inventory management integration - Order fulfillment automation Perfect for digital product sales: - Instant payment confirmation - Automated delivery for digital products - Subscription and recurring billing - Global payment acceptance without banking restrictions Enable multi-vendor marketplaces: - Automatic vendor payout splitting - Marketplace fee collection - Escrow and dispute resolution - Multi-party payment flows Handle high-volume event sales: - Instant ticket delivery - Anti-fraud protection - High-throughput payment processing - Global accessibility without regional payment restrictions

Customer Experience Benefits

**80+ Supported Wallets:** - MetaMask, WalletConnect, Coinbase Wallet - Hardware wallets (Ledger, Trezor) - Mobile wallets (Trust Wallet, Rainbow) - Exchange wallets and DeFi wallets **Multiple Payment Options:** - Direct wallet payments - QR code scanning for mobile - Crosschain payment routing - Multiple currency options **Enhanced Security:** - No stored payment credentials - Transparent blockchain transactions - Real-time payment verification - Immutable payment records

Technical Implementation

```javascript React Component import { PaymentWidget } from '@requestnetwork/payment-widget';

function CheckoutPage({ orderTotal, orderId }) { return ( <PaymentWidget amount={orderTotal} currency="USD" paymentCurrencies={["ETH", "USDC", "DAI"]} onPaymentSuccess={(payment) => { // Handle successful payment updateOrderStatus(orderId, 'paid'); }} onPaymentError={(error) => { // Handle payment errors console.error('Payment failed:', error); }} /> ); }


```javascript Webhook Handler
app.post('/webhook/payment', (req, res) => {
  const { eventType, request } = req.body;
  
  if (eventType === 'payment.confirmed') {
    // Update order status
    updateOrder(request.orderId, {
      status: 'paid',
      paymentHash: request.paymentHash,
      paidAt: new Date()
    });
  }
  
  res.status(200).send('OK');
});

What's Next?

Enable recurring billing for subscription products

<Card title="⚙️ Payment Types" href="/api-features/payment-types-overview" icon="cog"

Explore advanced payment options and routing

<Card title="🔑 Get Started" href="/api-setup/getting-started" icon="rocket"

Set up your account and start integrating