chore(payment): update ezpay dev redirect notice

This commit is contained in:
2026-06-22 17:37:53 +08:00
parent 21b9954351
commit dd95dd8a26
2 changed files with 45 additions and 1 deletions
@@ -17,7 +17,7 @@ import { StripePaymentDialog } from "./stripe-payment-dialog";
import { SubscriptionCtaButton } from "./subscription-cta-button"; import { SubscriptionCtaButton } from "./subscription-cta-button";
import styles from "./subscription-cta-button.module.css"; import styles from "./subscription-cta-button.module.css";
const EZPAY_DEVELOPMENT_REDIRECT_DELAY_MS = 3000; const EZPAY_DEVELOPMENT_REDIRECT_DELAY_MS = 5000;
export interface SubscriptionCheckoutButtonProps { export interface SubscriptionCheckoutButtonProps {
/** 是否可用(未选套餐 / 未勾选协议 → false) */ /** 是否可用(未选套餐 / 未勾选协议 → false) */
@@ -149,6 +149,14 @@ export function SubscriptionCheckoutButton({
stripeClientSecret !== null && stripeClientSecret !== null &&
stripeClientSecret !== hiddenStripeClientSecret && stripeClientSecret !== hiddenStripeClientSecret &&
!payment.isPaid; !payment.isPaid;
const pendingEzpayRedirectOrderId =
AppEnvUtil.isDevelopment() &&
payment.payParams &&
isEzpayPayment(payment.payParams) &&
getPaymentUrl(payment.payParams) &&
payment.currentOrderId
? payment.currentOrderId
: null;
return ( return (
<> <>
@@ -174,6 +182,16 @@ export function SubscriptionCheckoutButton({
{payment.errorMessage} {payment.errorMessage}
</p> </p>
) : null} ) : null}
{pendingEzpayRedirectOrderId ? (
<div className={styles.pendingRedirect} role="status">
<span className={styles.pendingRedirectLabel}>
Ezpay order created. Redirecting in 3 seconds.
</span>
<span className={styles.pendingRedirectOrder}>
Order No. {pendingEzpayRedirectOrderId}
</span>
</div>
) : null}
{shouldShowStripeDialog ? ( {shouldShowStripeDialog ? (
<StripePaymentDialog <StripePaymentDialog
clientSecret={stripeClientSecret} clientSecret={stripeClientSecret}
@@ -60,6 +60,32 @@
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
} }
.pendingRedirect {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: var(--spacing-sm);
padding: 10px 12px;
border: 1px solid rgba(246, 87, 160, 0.2);
border-radius: 14px;
background: #ffffff;
color: #3c3b3b;
text-align: center;
}
.pendingRedirectLabel {
font-size: var(--font-size-sm);
line-height: 1.3;
}
.pendingRedirectOrder {
color: #1e1e1e;
font-size: var(--font-size-md);
font-weight: 700;
line-height: 1.3;
word-break: break-all;
}
@keyframes spin { @keyframes spin {
to { to {
transform: rotate(360deg); transform: rotate(360deg);