Accept Payments

Enable one-tap USDC payments with Base Pay.

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

1. Install the Base Account SDK

   npm

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

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