> ## Documentation Index
> Fetch the complete documentation index at: https://daehan-base.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# paymasterService

> Enable sponsored transactions using ERC-4337 paymaster web services

export const Button = ({children, disabled, variant = "primary", size = "medium", iconName, roundedFull = false, className = '', fullWidth = false, onClick = undefined}) => {
  const variantStyles = {
    primary: 'bg-blue text-black border border-blue hover:bg-blue-80 active:bg-[#06318E] dark:text-white',
    secondary: 'bg-white border border-white text-palette-foreground hover:bg-zinc-15 active:bg-zinc-30',
    outlined: 'bg-transparent text-white border border-white hover:bg-white hover:text-black active:bg-[#E3E7E9]'
  };
  const sizeStyles = {
    medium: 'text-md px-4 py-2 gap-3',
    large: 'text-lg px-6 py-4 gap-5'
  };
  const sizeIconRatio = {
    medium: '0.75rem',
    large: '1rem'
  };
  const classes = ['text-md px-4 py-2 whitespace-nowrap', 'flex items-center justify-center', 'disabled:opacity-40 disabled:pointer-events-none', 'transition-all', variantStyles[variant], sizeStyles[size], roundedFull ? 'rounded-full' : 'rounded-lg', fullWidth ? 'w-full' : 'w-auto', className];
  const buttonClasses = classes.filter(Boolean).join(' ');
  const iconSize = sizeIconRatio[size];
  return <button type="button" disabled={disabled} className={buttonClasses} onClick={onClick}>
      <span>{children}</span>
      {iconName && <Icon name={iconName} width={iconSize} height={iconSize} color="currentColor" />}
    </button>;
};

export const BaseBanner = ({content = null, id, dismissable = true}) => {
  const LOCAL_STORAGE_KEY_PREFIX = 'cb-docs-banner';
  const [isVisible, setIsVisible] = useState(false);
  const onDismiss = () => {
    localStorage.setItem(`${LOCAL_STORAGE_KEY_PREFIX}-${id}`, 'false');
    setIsVisible(false);
  };
  useEffect(() => {
    const storedValue = localStorage.getItem(`${LOCAL_STORAGE_KEY_PREFIX}-${id}`);
    setIsVisible(storedValue !== 'false');
  }, []);
  if (!isVisible) {
    return null;
  }
  return <div className="fixed bottom-0 left-0 right-0 bg-white py-8 px-4 lg:px-12 z-50 text-black dark:bg-black dark:text-white border-t dark:border-gray-95">
      <div className="flex items-center max-w-8xl mx-auto">
        {typeof content === 'function' ? content({
    onDismiss
  }) : content}
        {dismissable && <button onClick={onDismiss} className="flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors" aria-label="Dismiss banner">
          ✕
        </button>}
      </div>
    </div>;
};

Defined in [ERC-7677](https://eips.ethereum.org/EIPS/eip-7677)

<Info>
  The paymasterService capability enables apps to sponsor user transactions using ERC-4337 paymaster web services. This allows users to execute transactions without paying gas fees directly.
</Info>

<Warning>
  This capability is not yet finalized and may change in future iterations.
</Warning>

## Parameters

<ParamField body="url" type="string" required>
  The URL of the ERC-7677-compliant paymaster service that will sponsor the transactions.

  **Format:** Must be a valid HTTPS URL pointing to a paymaster service endpoint.
</ParamField>

## Returns

<ResponseField name="paymasterService" type="object">
  The paymaster service capability configuration for the specified chain.

  <Expandable title="PaymasterService capability properties">
    <ResponseField name="supported" type="boolean">
      Indicates whether the wallet supports paymaster service integration.
    </ResponseField>
  </Expandable>
</ResponseField>

## Example Usage

<RequestExample>
  ```typescript Check Paymaster Support theme={null}
  const capabilities = await provider.request({
    method: 'wallet_getCapabilities',
    params: [userAddress]
  });

  const paymasterSupport = capabilities["0x2105"]?.paymasterService;
  ```

  ```typescript Send Sponsored Transaction theme={null}
  const result = await provider.request({
    method: 'wallet_sendCalls',
    params: [{
      version: "1.0",
      chainId: "0x2105",
      from: userAddress,
      calls: [{
        to: "0x1234567890123456789012345678901234567890",
        value: "0x0",
        data: "0xa9059cbb000000000000000000000000..."
      }],
      capabilities: {
        paymasterService: {
          url: "https://your-paymaster-service.xyz"
        }
      }
    }]
  });
  ```
</RequestExample>

<ResponseExample>
  ```json Capability Response (Supported) theme={null}
  {
    "0x2105": {
      "paymasterService": {
        "supported": true
      }
    }
  }
  ```

  ```json Capability Response (Unsupported) theme={null}
  {
    "0x2105": {
      "paymasterService": {
        "supported": false
      }
    }
  }
  ```
</ResponseExample>

## Error Handling

| Code | Message                         | Description                                                          |
| ---- | ------------------------------- | -------------------------------------------------------------------- |
| 4100 | Paymaster service not supported | Wallet does not support paymaster service integration                |
| 4200 | Invalid paymaster URL           | The provided paymaster service URL is invalid or unreachable         |
| 4300 | Paymaster service error         | The paymaster service returned an error or is unavailable            |
| 5700 | Paymaster capability required   | Transaction requires paymaster service but wallet doesn't support it |

## Paymaster Service Implementation

The paymaster service must implement ERC-7677 compliance with these endpoints:

### 1. Gas Estimation Endpoint

```typescript theme={null}
// pm_getPaymasterStubData
POST /rpc
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "pm_getPaymasterStubData",
  "params": [
    userOp, // User operation object
    entryPoint, // Entry point address
    chainId, // Chain ID
    context // Additional context
  ]
}
```

### 2. Paymaster Data Endpoint

```typescript theme={null}
// pm_getPaymasterData
POST /rpc
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "pm_getPaymasterData", 
  "params": [
    userOp, // User operation object
    entryPoint, // Entry point address
    chainId, // Chain ID
    context // Additional context
  ]
}
```

## Complete Example

Here's a complete example of implementing sponsored transactions:

```typescript theme={null}
class SponsoredTransactionManager {
  private paymasterUrl = "https://api.example.com/paymaster";
  
  async executeSponsored(calls: any[]) {
    try {
      // 1. Check paymaster capability
      const capabilities = await provider.request({
        method: 'wallet_getCapabilities',
        params: [userAddress]
      });
      
      if (!capabilities["0x2105"]?.paymasterService?.supported) {
        throw new Error("Paymaster services not supported");
      }
      
      // 2. Execute sponsored transaction
      const result = await provider.request({
        method: 'wallet_sendCalls',
        params: [{
          version: "1.0",
          chainId: "0x2105",
          from: userAddress,
          calls,
          capabilities: {
            paymasterService: {
              url: this.paymasterUrl
            }
          }
        }]
      });
      
      console.log("Sponsored transaction submitted:", result);
      return result;
      
    } catch (error) {
      console.error("Sponsored transaction failed:", error);
      throw error;
    }
  }
  
  // Example: Sponsored token transfer
  async sponsoredTransfer(token: string, to: string, amount: string) {
    const calls = [{
      to: token,
      value: "0x0",
      data: this.encodeTransfer(to, amount)
    }];
    
    return this.executeSponsored(calls);
  }
  
  private encodeTransfer(to: string, amount: string): string {
    // Encode ERC-20 transfer function call
    // This is a simplified example
    return `0xa9059cbb${to.slice(2).padStart(64, '0')}${BigInt(amount).toString(16).padStart(64, '0')}`;
  }
}

// Usage
const sponsoredTx = new SponsoredTransactionManager();

// Execute sponsored token transfer
await sponsoredTx.sponsoredTransfer(
  "0xA0b86a33E6441b8a2f0d2d2a71Cba0F42c4B1D2E", // USDC token
  "0x742d35Cc4Bf53E0e6C42E5d9F0A8D2F6D8A8B7C9", // recipient
  "1000000" // 1 USDC (6 decimals)
);
```

## Error Handling

Handle paymaster-related errors appropriately:

```typescript theme={null}
async function executeWithPaymaster(calls: any[]) {
  try {
    const result = await provider.request({
      method: 'wallet_sendCalls',
      params: [{
        version: "1.0",
        chainId: "0x2105",
        from: userAddress,
        calls,
        capabilities: {
          paymasterService: {
            url: "https://paymaster.example.com"
          }
        }
      }]
    });
    
    return result;
    
  } catch (error) {
    if (error.code === 4100) {
      console.error("Paymaster service not supported");
      // Fallback to regular transaction
      return executeRegularTransaction(calls);
    } else if (error.message.includes("paymaster")) {
      console.error("Paymaster service error:", error);
      // Handle paymaster-specific errors
      throw new Error("Transaction sponsorship failed");
    } else {
      console.error("Transaction failed:", error);
      throw error;
    }
  }
}
```

## Use Cases

### Gaming Applications

```typescript theme={null}
// Sponsor in-game item purchases
const gameItemPurchase = await provider.request({
  method: 'wallet_sendCalls',
  params: [{
    version: "1.0",
    chainId: "0x2105",
    from: playerAddress,
    calls: [{
      to: gameContractAddress,
      value: "0x0",
      data: purchaseItemCallData
    }],
    capabilities: {
      paymasterService: {
        url: "https://game-paymaster.example.com"
      }
    }
  }]
});
```

### DeFi Onboarding

```typescript theme={null}
// Sponsor first-time user transactions
const onboardingTx = await provider.request({
  method: 'wallet_sendCalls',
  params: [{
    version: "1.0", 
    chainId: "0x2105",
    from: newUserAddress,
    calls: [
      // Stake tokens
      {
        to: stakingContract,
        value: "0x0",
        data: stakeCallData
      }
    ],
    capabilities: {
      paymasterService: {
        url: "https://defi-onboarding-paymaster.example.com"
      }
    }
  }]
});
```

## Best Practices

1. **Validate Paymaster URLs**: Ensure paymaster service URLs are trustworthy and ERC-7677 compliant
2. **Handle Failures Gracefully**: Implement fallbacks for when paymaster services are unavailable
3. **Monitor Costs**: Track paymaster usage to manage sponsorship costs
4. **User Communication**: Clearly communicate when transactions are sponsored

<Info>
  The paymaster service capability enables seamless user experiences by removing the need for users to hold native tokens for gas fees.
</Info>

<BaseBanner
  id="privacy-policy"
  dismissable={false}
  content={({ onDismiss }) => (
<div className="flex items-center">
  <div className="mr-2">
    We're updating the Base Privacy Policy, effective July 25, 2025, to reflect an expansion of Base services. Please review the updated policy here:{" "}
    <a
      href="https://docs.base.org/privacy-policy-2025"
      target="_blank"
      className="whitespace-nowrap"
    >
      Base Privacy Policy
    </a>. By continuing to use Base services, you confirm that you have read and understand the updated policy.
  </div>
  <Button onClick={onDismiss}>I Acknowledge</Button>
</div>
)}
/>