Checkout

Add one-click payments to your app with the PayButton component. Users click, authenticate with their passkey, and the transaction executes.

Using PayButton

The PayButton component handles the entire payment flow: authentication, signing, and transaction execution.

Install the SDK

npm install @rhinestone/1auth

Create client.ts

Create a client instance for the PayButton component:

client.ts

import { OneAuthClient } from '@rhinestone/1auth'
 
// Create the 1auth client 
export const client = new OneAuthClient({ 
  providerUrl: 'https://passkey.1auth.box', 
})

Add PayButton

Import and use the PayButton component:

Handle success

Use the onSuccess callback to update your UI or backend:

Done

You have successfully added one-click payments to your app!

Contract interactions

PayButton supports any contract call, not just simple transfers:

import { encodeFunctionData } from 'viem'
 
<PayButton
  client={client}
  intent={{
    targetChain: 8453,
    calls: [{
      to: contractAddress,
      data: encodeFunctionData({
        abi: contractAbi,
        functionName: 'mint',
        args: [tokenId],
      }),
      value: parseEther('0.05'),
    }],
  }}
  onSuccess={(result) => toast.success('NFT minted!')}
>
  Mint NFT
</PayButton>

Custom styling

Apply your own styles with className:

<PayButton
  client={client}
  intent={intent}
  className="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg"
>
  Complete Purchase
</PayButton>

Props reference

Prop	Type	Required	Description
`client`	`OneAuthClient`	Yes	SDK client instance
`intent`	`SendIntentOptions`	Yes	Transaction parameters (calls, targetChain, tokenRequests)
`onSuccess`	`(result: SendIntentResult) => void`	No	Called on successful transaction
`onError`	`(error: Error) => void`	No	Called on error
`closeOn`	`CloseOnStatus`	No	When to close dialog: "claimed", "preconfirmed", "filled", or "completed". Default: "preconfirmed"
`children`	`ReactNode`	No	Button text (default: "Pay with 1auth")
`className`	`string`	No	Custom CSS class
`style`	`React.CSSProperties`	No	Custom inline styles (merged with defaults)
`disabled`	`boolean`	No	Disabled state
`hideIcon`	`boolean`	No	Hide the fingerprint icon

See the full PayButton API reference for more details.

Next steps

Crosschain - Execute transactions on any chain
Batch Transactions - Queue multiple operations