Configuration including the payment function and callbacks.
State and methods for managing the async payment.
import { useAsyncPayment } from "@t402/react";
function PaymentButton({ paymentPayload }) {
const { execute, isLoading, isSuccess, error } = useAsyncPayment({
paymentFn: async () => {
const response = await fetch("/api/protected", {
headers: { "X-Payment": paymentPayload },
});
return response.json();
},
onSuccess: (data) => console.log("Payment succeeded:", data),
onError: (err) => console.error("Payment failed:", err),
});
return (
<button onClick={execute} disabled={isLoading}>
{isLoading ? "Processing..." : "Pay Now"}
</button>
);
}
Hook for managing async payment operations with loading states.