Merge branch 'develop' into 'main'
Develop See merge request witapp/aura-webapp!181
This commit is contained in:
commit
498ccdddea
@ -17,6 +17,7 @@ interface ICheckoutFormProps {
|
||||
subscriptionReceiptId?: string;
|
||||
returnUrl?: string;
|
||||
confirmType?: "payment" | "setup";
|
||||
isHide?: boolean;
|
||||
}
|
||||
|
||||
export default function CheckoutForm({
|
||||
@ -24,6 +25,7 @@ export default function CheckoutForm({
|
||||
subscriptionReceiptId,
|
||||
returnUrl,
|
||||
confirmType = "payment",
|
||||
isHide = false,
|
||||
}: ICheckoutFormProps) {
|
||||
const stripe = useStripe();
|
||||
const elements = useElements();
|
||||
@ -70,13 +72,19 @@ export default function CheckoutForm({
|
||||
|
||||
return (
|
||||
<form
|
||||
className="payment-form-stripe"
|
||||
className={`payment-form-stripe ${isHide ? styles.hide : ""}`}
|
||||
id="payment-form"
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{children ? children : null}
|
||||
<PaymentElement
|
||||
options={{ terms: { card: "never" } }}
|
||||
options={{
|
||||
terms: { card: "never" },
|
||||
wallets: {
|
||||
googlePay: "never",
|
||||
applePay: "never",
|
||||
},
|
||||
}}
|
||||
onReady={() => setFormReady(true)}
|
||||
/>
|
||||
<MainButton
|
||||
|
||||
@ -9,6 +9,11 @@
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.hide {
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.payment-loader {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -94,7 +94,10 @@ function ExpressCheckoutStripe({
|
||||
<div className={`${styles.container} ${isHideForm ? styles.hide : ""}`}>
|
||||
<ExpressCheckoutElement
|
||||
onReady={onReady}
|
||||
onLoadError={() => onChangeLoading && onChangeLoading(false)}
|
||||
onLoadError={(e) => {
|
||||
console.log("Error: ", e);
|
||||
onChangeLoading && onChangeLoading(false);
|
||||
}}
|
||||
onConfirm={onConfirm}
|
||||
options={{
|
||||
layout: {
|
||||
@ -102,6 +105,10 @@ function ExpressCheckoutStripe({
|
||||
overflow: "never",
|
||||
},
|
||||
paymentMethodOrder: ["apple_pay", "google_pay", "amazon_pay", "link"],
|
||||
wallets: {
|
||||
googlePay: "always",
|
||||
applePay: "always",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{errorMessage && <p className={styles.error}>{errorMessage}</p>}
|
||||
|
||||
@ -160,28 +160,31 @@ function PaymentModal({
|
||||
)}
|
||||
<div className={styles["payment-method-container"]}>
|
||||
{stripePromise && clientSecret && (
|
||||
<Elements stripe={stripePromise} options={{ clientSecret }}>
|
||||
<ExpressCheckoutStripe
|
||||
clientSecret={clientSecret}
|
||||
returnUrl={returnUrl}
|
||||
isHide={
|
||||
selectedPaymentMethod !== EPaymentMethod.PAYMENT_BUTTONS
|
||||
}
|
||||
onAvailable={(_isAvailable, _availableMethods) =>
|
||||
onAvailableExpressCheckout(_isAvailable, _availableMethods)
|
||||
}
|
||||
onChangeLoading={(isLoading) =>
|
||||
setIsLoadingExpressCheckout(isLoading)
|
||||
}
|
||||
/>
|
||||
{selectedPaymentMethod === EPaymentMethod.CREDIT_CARD && (
|
||||
<>
|
||||
<Elements stripe={stripePromise} options={{ clientSecret }}>
|
||||
<ExpressCheckoutStripe
|
||||
clientSecret={clientSecret}
|
||||
returnUrl={returnUrl}
|
||||
isHide={
|
||||
selectedPaymentMethod !== EPaymentMethod.PAYMENT_BUTTONS
|
||||
}
|
||||
onAvailable={(_isAvailable, _availableMethods) =>
|
||||
onAvailableExpressCheckout(_isAvailable, _availableMethods)
|
||||
}
|
||||
onChangeLoading={(isLoading) =>
|
||||
setIsLoadingExpressCheckout(isLoading)
|
||||
}
|
||||
/>
|
||||
</Elements>
|
||||
<Elements stripe={stripePromise} options={{ clientSecret }}>
|
||||
<CheckoutForm
|
||||
confirmType={paymentType}
|
||||
subscriptionReceiptId={paymentIntentId}
|
||||
returnUrl={returnUrl}
|
||||
isHide={selectedPaymentMethod !== EPaymentMethod.CREDIT_CARD}
|
||||
/>
|
||||
)}
|
||||
</Elements>
|
||||
</Elements>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<SecurityPayments />
|
||||
|
||||
@ -165,28 +165,31 @@ function PaymentModal({
|
||||
)}
|
||||
<div className={styles["payment-method-container"]}>
|
||||
{stripePromise && clientSecret && (
|
||||
<Elements stripe={stripePromise} options={{ clientSecret }}>
|
||||
<ExpressCheckoutStripe
|
||||
clientSecret={clientSecret}
|
||||
returnUrl={returnUrl}
|
||||
isHide={
|
||||
selectedPaymentMethod !== EPaymentMethod.PAYMENT_BUTTONS
|
||||
}
|
||||
onAvailable={(_isAvailable, _availableMethods) =>
|
||||
onAvailableExpressCheckout(_isAvailable, _availableMethods)
|
||||
}
|
||||
onChangeLoading={(isLoading) =>
|
||||
setIsLoadingExpressCheckout(isLoading)
|
||||
}
|
||||
/>
|
||||
{selectedPaymentMethod === EPaymentMethod.CREDIT_CARD && (
|
||||
<>
|
||||
<Elements stripe={stripePromise} options={{ clientSecret }}>
|
||||
<ExpressCheckoutStripe
|
||||
clientSecret={clientSecret}
|
||||
returnUrl={returnUrl}
|
||||
isHide={
|
||||
selectedPaymentMethod !== EPaymentMethod.PAYMENT_BUTTONS
|
||||
}
|
||||
onAvailable={(_isAvailable, _availableMethods) =>
|
||||
onAvailableExpressCheckout(_isAvailable, _availableMethods)
|
||||
}
|
||||
onChangeLoading={(isLoading) =>
|
||||
setIsLoadingExpressCheckout(isLoading)
|
||||
}
|
||||
/>
|
||||
</Elements>
|
||||
<Elements stripe={stripePromise} options={{ clientSecret }}>
|
||||
<CheckoutForm
|
||||
confirmType={paymentType}
|
||||
subscriptionReceiptId={paymentIntentId}
|
||||
returnUrl={returnUrl}
|
||||
isHide={selectedPaymentMethod !== EPaymentMethod.CREDIT_CARD}
|
||||
/>
|
||||
)}
|
||||
</Elements>
|
||||
</Elements>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<SecurityPayments />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user