76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
|
/**
|
||
|
|
* CheckoutPaymentForm — Formulaire de paiement Hyperswitch
|
||
|
|
* v0.402 P1.5: Intégration @juspay-tech/react-hyper-js pour client_secret
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { useState, useEffect } from 'react';
|
||
|
|
import { loadHyper } from '@juspay-tech/hyper-js';
|
||
|
|
import { HyperElements, UnifiedCheckout } from '@juspay-tech/react-hyper-js';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import type { HyperInstance } from '@juspay-tech/hyper-js';
|
||
|
|
|
||
|
|
interface CheckoutPaymentFormProps {
|
||
|
|
clientSecret: string;
|
||
|
|
returnUrl?: string; // Set at payment creation; kept for potential override
|
||
|
|
onCancel: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
function PaymentFormInner({ onCancel }: { onCancel: () => void }) {
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<UnifiedCheckout
|
||
|
|
onPaymentComplete={() => {
|
||
|
|
// Hyperswitch redirects via return_url (set at payment creation) on success
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<div className="pt-4">
|
||
|
|
<Button type="button" variant="outline" onClick={onCancel}>
|
||
|
|
Cancel
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function CheckoutPaymentForm({ clientSecret, onCancel }: CheckoutPaymentFormProps) {
|
||
|
|
const publishableKey = import.meta.env.VITE_HYPERSWITCH_PUBLISHABLE_KEY;
|
||
|
|
const [hyperPromise, setHyperPromise] = useState<Promise<HyperInstance | null> | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (publishableKey) {
|
||
|
|
setHyperPromise(loadHyper(publishableKey));
|
||
|
|
}
|
||
|
|
}, [publishableKey]);
|
||
|
|
|
||
|
|
if (!publishableKey) {
|
||
|
|
return (
|
||
|
|
<div className="space-y-4 p-4 rounded-lg bg-muted/50">
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
Configure VITE_HYPERSWITCH_PUBLISHABLE_KEY in .env.local to enable payment form.
|
||
|
|
</p>
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
For now, you can complete payment via the Hyperswitch hosted page or use simulated payments (HYPERSWITCH_ENABLED=false).
|
||
|
|
</p>
|
||
|
|
<Button variant="outline" onClick={onCancel}>
|
||
|
|
Back to cart
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!hyperPromise) {
|
||
|
|
return <div className="animate-pulse h-32 bg-muted/50 rounded-lg" />;
|
||
|
|
}
|
||
|
|
|
||
|
|
const options = {
|
||
|
|
clientSecret,
|
||
|
|
locale: 'en',
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<HyperElements hyper={hyperPromise} options={options}>
|
||
|
|
<PaymentFormInner onCancel={onCancel} />
|
||
|
|
</HyperElements>
|
||
|
|
);
|
||
|
|
}
|