Accept Payments

Accept one-tap USDC payments with the Base Pay helper function.

Accept one-tap USDC payments with the Base Pay helper function. No additional setup required - just import and call:

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 checkout

With 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.

Add 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