Skip to main content
Accept one-tap USDC payments with the Base Pay helper function. No additional setup required:
1

Install the Base Account SDK

npm install @base-org/account
2

Import and call the pay() function

PaymentComponent.tsx
import { pay, getPaymentStatus } from '@base-org/account';

async function handlePayment() {
  try {
    const payment = await pay({
      amount: '5.00',           // USD amount
      to: '0xRecipient',      // your recipient address
      testnet: true             // set false for mainnet
    });
    
    console.log(`Payment sent! ID: ${payment.id}`);
    
    // Check payment status
    const { status } = await getPaymentStatus({ 
      id: payment.id,
      testnet: true 
    });
    
    if (status === 'completed') {
      console.log('Payment confirmed!');
    }
  } catch (error) {
    console.error('Payment failed:', error.message);
  }
}
Collecting user info at checkoutWith Base Pay, you can request email, phone, or shipping address by passing a payerInfo object. See the Accept Payments Guide for details.However, this is not supported in Mini Apps yet.
If you intend on using Base Pay, make sure to follow the Brand Guidelines or use the BasePayButton component whenever possible to ensure consistency across all applications.
3

Add the Base Pay Button

Use the pre-built component for a native look-and-feel:
PaymentComponent.tsx
import { BasePayButton } from '@base-org/account-ui/react';
import { pay } from '@base-org/account';

export function Checkout() {
  const handlePayment = async () => {
    try {
      const payment = await pay({ amount: '5.00', to: '0xRecipient' });
      console.log(`Payment sent! Transaction ID: ${payment.id}`);
    } catch (error) {
      console.error(`Payment failed: ${error.message}`);
    }
  };

  return (
    <BasePayButton
      colorScheme="light"
      onClick={handlePayment}
    />
  );
}

Base Pay Reference

Complete reference for the Base Pay helper function

Base Pay Button Reference

Pre-built UI component reference