87 lines
2.8 KiB
React
87 lines
2.8 KiB
React
import { useTranslation } from "react-i18next";
|
|
import { usePaymentForm } from "../hooks/usePaymentForm";
|
|
|
|
export default function PaymentForm({ bookingId = "", token = "" }) {
|
|
const { t } = useTranslation();
|
|
const form = usePaymentForm(bookingId, token);
|
|
|
|
return (
|
|
<section className="payments">
|
|
<div className="payments-header">
|
|
<div>
|
|
<h2>{t("payment.title")}</h2>
|
|
<p className="payments-subtitle">{t("payment.subtitle")}</p>
|
|
</div>
|
|
<span className="payments-badge">{t("payment.badge")}</span>
|
|
</div>
|
|
|
|
<form
|
|
className="payments-form"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
form.submit();
|
|
}}
|
|
>
|
|
<label className="field">
|
|
<span>{t("payment.bookingId")}</span>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
value={form.bookingIdInput}
|
|
onChange={(e) => form.setBookingIdInput(e.target.value)}
|
|
placeholder="123"
|
|
required
|
|
/>
|
|
</label>
|
|
<label className="field">
|
|
<span>{t("payment.sourceType")}</span>
|
|
<select
|
|
value={form.sourceType}
|
|
onChange={(e) => form.setSourceType(e.target.value)}
|
|
>
|
|
<option value="stcpay">{t("payment.sources.stcpay")}</option>
|
|
<option value="token">{t("payment.sources.token")}</option>
|
|
<option value="applepay">{t("payment.sources.applepay")}</option>
|
|
<option value="samsungpay">{t("payment.sources.samsungpay")}</option>
|
|
</select>
|
|
</label>
|
|
<label className="field">
|
|
<span>{t("payment.sourceValue")}</span>
|
|
<input
|
|
type="text"
|
|
value={form.sourceValue}
|
|
onChange={(e) => form.setSourceValue(e.target.value)}
|
|
placeholder={t("payment.sourceValuePlaceholder")}
|
|
/>
|
|
</label>
|
|
<label className="field">
|
|
<span>{t("payment.callbackUrl")}</span>
|
|
<input
|
|
type="url"
|
|
value={form.callbackUrl}
|
|
onChange={(e) => form.setCallbackUrl(e.target.value)}
|
|
placeholder="https://example.com/payments/return"
|
|
/>
|
|
</label>
|
|
<div className="payments-actions">
|
|
<button type="submit" disabled={form.status === "loading"}>
|
|
{form.status === "loading"
|
|
? t("payment.processing")
|
|
: t("payment.payNow")}
|
|
</button>
|
|
<p className="helper">
|
|
{t("payment.idempotency")}: {form.idempotencyKey}
|
|
</p>
|
|
</div>
|
|
</form>
|
|
|
|
{form.status === "error" && form.error && (
|
|
<p className="error">{form.error}</p>
|
|
)}
|
|
{form.status === "ready" && form.result && (
|
|
<pre className="payment-result">{JSON.stringify(form.result, null, 2)}</pre>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|