> ## Documentation Index
> Fetch the complete documentation index at: https://docs.streambird.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Card Payments

The **pay with card** funding option enables users to purchase cryptocurrency with debit or credit cards, including browser payment methods like **Apple Pay** and **Google Pay**. This is particularly useful for users who may not hold crypto outside of your application and are purchasing cryptocurrency for the first time.

<Note>
  Users must be authenticated through MoonKey to use card funding methods. A valid access token is required for the user to proceed with card funding.
</Note>

MoonKey facilitates card purchases through MoonPay, a trusted onramp provider embedded directly within your app. This provides a seamless experience where users never need to leave your application to fund their wallets.

<Warning>
  **Mainnet only:** Card and fiat onramp purchases are supported on mainnets only. On testnets (e.g. Sepolia, Base Sepolia, Solana Devnet), onramps cannot purchase testnet tokens, so this flow will not be available.
</Warning>

## How it works

When a user initiates a card purchase:

1. **Select amount** - User chooses how much cryptocurrency to purchase
2. **Choose payment method** - User selects debit/credit card, Apple Pay, or Google Pay
3. **MoonPay onboarding** - User completes any required verification steps (KYC/AML)
4. **Complete payment** - User enters payment details and confirms the purchase
5. **Funds delivered** - Cryptocurrency is delivered to the user's embedded wallet

The entire flow happens within your application, providing a seamless user experience.

## Payment methods

### Debit and credit cards

Users can pay directly with:

* **Debit cards** - Visa, Mastercard, and other major providers
* **Credit cards** - Visa, Mastercard, and other major providers

<Tip>
  **Debit cards generally have higher approval rates** than credit cards for cryptocurrency purchases. Consider guiding users toward debit card payments when possible.
</Tip>

### Apple Pay

Users on Safari or iOS devices can use Apple Pay for faster checkout:

* Stored payment methods from Apple Wallet
* Biometric authentication (Face ID, Touch ID)
* One-tap payment experience

### Google Pay

Users on Chrome or Android devices can use Google Pay:

* Stored payment methods from Google account
* Quick and secure checkout
* Simplified payment flow

## Supported assets

MoonPay supports purchasing a variety of cryptocurrencies across different networks. Users can purchase:

* **Native tokens** - ETH, SOL, and other network currencies
* **Stablecoins** - USDC, USDT, and other stablecoins
* **Popular tokens** - Various ERC-20 and SPL tokens

<Info>
  For a complete list of supported cryptocurrencies and networks, see [MoonPay's supported assets documentation](https://support.moonpay.com/customers/docs/list-of-supported-cryptocurrencies).
</Info>

## Integration

### React SDK

Use the MoonKey React SDK to trigger the card funding flow:

<Tabs>
  <Tab title="Ethereum">
    ```tsx theme={null}
    import { useWallets, useFundWallet } from '@moon-key/react-auth/ethereum';

    function FundWalletButton() {
      const { wallets } = useWallets();
      const { fundWallet } = useFundWallet();
      
      const handleFund = async () => {
        if (wallets.length === 0) return;
        
        const selectedWallet = wallets[0];
        
        try {
          await fundWallet(selectedWallet.address, {
            chain: 'eip155:1',
            amount: '0.1'
          });
          console.log('Funding initiated');
        } catch (error) {
          console.error('Funding failed:', error);
        }
      };
      
      return (
        <button onClick={handleFund}>
          Add Funds
        </button>
      );
    }
    ```
  </Tab>

  <Tab title="Solana">
    ```tsx theme={null}
    import { useWallets, useFundWallet } from '@moon-key/react-auth/solana';

    function FundWalletButton() {
      const { wallets } = useWallets();
      const { fundWallet } = useFundWallet();
      
      const handleFund = async () => {
        if (wallets.length === 0) return;
        
        const selectedWallet = wallets[0];
        
        try {
          await fundWallet(selectedWallet.address, {
            cluster: 'solana:mainnet',
            amount: '0.1'
          });
          console.log('Funding initiated');
        } catch (error) {
          console.error('Funding failed:', error);
        }
      };
      
      return (
        <button onClick={handleFund}>
          Fund Wallet
        </button>
      );
    }
    ```
  </Tab>
</Tabs>

### Parameters

<ParamField path="address" type="string" required>
  The wallet address to fund.
</ParamField>

<ParamField path="config" type="EthereumFundingConfig | SolanaFundingConfig" required>
  Configuration options for the funding request.
</ParamField>

#### EthereumFundingConfig

<ParamField path="chain" type="string">
  The Ethereum chain to fund on. Use `'eip155:1'` for Ethereum mainnet, or other chain IDs for different networks.

  **Example:** `'eip155:1'` (Ethereum mainnet)
</ParamField>

<ParamField path="amount" type="string">
  The amount of ETH to purchase.

  **Example:** `'0.1'`
</ParamField>

#### SolanaFundingConfig

<ParamField path="cluster" type="string">
  The Solana cluster to fund on. Use `'solana:mainnet'` for mainnet.

  **Example:** `'solana:mainnet'`
</ParamField>

<ParamField path="amount" type="string">
  The amount of SOL to purchase.

  **Example:** `'0.1'`
</ParamField>

## User experience

### First-time users

For users making their first purchase through MoonPay:

1. **Account creation** - User creates a MoonPay account
2. **Identity verification** - User completes KYC verification (name, address, ID)
3. **Payment** - User completes the purchase
4. **Future purchases** - Faster checkout with saved information

<Info>
  KYC verification is typically quick but may take longer in some cases. This is a one-time process required by regulations.
</Info>

### Returning users

For users who have previously used MoonPay:

1. **Pre-filled information** - Saved payment methods and details
2. **Quick checkout** - Streamlined purchase flow
3. **Faster processing** - No additional verification needed

## Complete example

Here's a complete example with wallet funding:

<Tabs>
  <Tab title="Ethereum">
    ```tsx theme={null}
    'use client';
    import { useWallets } from '@moon-key/react-auth/ethereum';
    import { useFundWallet } from '@moon-key/react-auth';
    import { useState } from 'react';

    export default function WalletFunding() {
      const { wallets } = useWallets();
      const { fundWallet } = useFundWallet();
      const [isFunding, setIsFunding] = useState(false);
      
      const handleFund = async () => {
        if (wallets.length === 0) {
          alert('No wallet found');
          return;
        }
        
        const selectedWallet = wallets[0];
        setIsFunding(true);
        
        try {
          await fundWallet(selectedWallet.address, {
            chain: 'eip155:1',
            amount: '0.1'
          });
          
          alert('Purchase initiated! Funds will arrive shortly.');
        } catch (error) {
          console.error('Funding failed:', error);
          alert('Purchase failed. Please try again.');
        } finally {
          setIsFunding(false);
        }
      };
      
      if (wallets.length === 0) {
        return <div>No wallet found</div>;
      }
      
      const selectedWallet = wallets[0];
      
      return (
        <div className="wallet-funding">
          <h2>Wallet</h2>
          <p>{selectedWallet.address}</p>
          
          <button 
            onClick={handleFund}
            disabled={isFunding}
          >
            {isFunding ? 'Processing...' : 'Add Funds'}
          </button>
          
          <div className="info">
            <p>• Pay with card, Apple Pay, or Google Pay</p>
            <p>• Debit cards have higher approval rates</p>
            <p>• Amount: 0.1 ETH</p>
          </div>
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Solana">
    ```tsx theme={null}
    'use client';
    import { useWallets } from '@moon-key/react-auth/solana';
    import { useFundWallet } from '@moon-key/react-auth';
    import { useState } from 'react';

    export default function WalletFunding() {
      const { wallets } = useWallets();
      const { fundWallet } = useFundWallet();
      const [isFunding, setIsFunding] = useState(false);
      
      const handleFund = async () => {
        if (wallets.length === 0) {
          alert('No wallet found');
          return;
        }
        
        const selectedWallet = wallets[0];
        setIsFunding(true);
        
        try {
          await fundWallet(selectedWallet.address, {
            cluster: 'solana:mainnet',
            amount: '0.1'
          });
          
          alert('Purchase initiated! Funds will arrive shortly.');
        } catch (error) {
          console.error('Funding failed:', error);
          alert('Purchase failed. Please try again.');
        } finally {
          setIsFunding(false);
        }
      };
      
      if (wallets.length === 0) {
        return <div>No wallet found</div>;
      }
      
      const selectedWallet = wallets[0];
      
      return (
        <div className="wallet-funding">
          <h2>Wallet</h2>
          <p>{selectedWallet.address}</p>
          
          <button 
            onClick={handleFund}
            disabled={isFunding}
          >
            {isFunding ? 'Processing...' : 'Add Funds'}
          </button>
          
          <div className="info">
            <p>• Pay with card, Apple Pay, or Google Pay</p>
            <p>• Debit cards have higher approval rates</p>
            <p>• Amount: 0.1 SOL</p>
          </div>
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

## Next steps

<CardGroup cols={2}>
  <Card title="Configure Funding" icon="gear" href="/wallet-as-a-service/funding/configure">
    Set up funding in your application
  </Card>

  <Card title="Funding Overview" icon="wallet" href="/wallet-as-a-service/funding/overview">
    Learn about MoonKey's funding features
  </Card>
</CardGroup>