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.app', 
})

For checkout flows where your page already displays the payment details before the user clicks, the SDK defaults to blind signing. If you want 1auth to show its visible review UI instead, opt into Clear Signing on the shared client:

client.ts

export const client = new OneAuthClient({
  providerUrl: 'https://passkey.1auth.app',
  blind_signing: false,
})

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