Tutorial 3: Payment Widget
A drop-in payment component for merchants to accept SOL payments with passkey authentication.
Live Demo
Coffee Shop
Premium Coffee (Large)
Amount to pay
0.0100 SOL
Secured by LazorKit
Try Different Configurations
0.001 SOL0.1 SOL
How to Integrate
import { PaymentWidget }
from "@/components/payment";
<PaymentWidget
merchantAddress="YOUR_WALLET"
merchantName="Your Store"
description="Product description"
amount={0.05}
enableGasless
onPaymentSuccess={(result) => {
console.log("Paid!",
result.signature);
}}
/>Widget Props
merchantAddressstring (required)amountnumbermerchantNamestringdescriptionstringenableGaslessbooleanallowCustomAmountbooleanonPaymentSuccessfunctionUse Cases
🛒
E-commerce
Checkout
💰
Donations
Tip jars
🎮
Gaming
In-app
📱
Mobile
Quick pay
Widget Features
- ✓Gasless Payments - Paymaster sponsors fees
- ✓Passkey Auth - Biometric signing, no seed phrases
- ✓Customizable - Branding, amounts, callbacks
- ✓Real-time Status - Processing, success, error