gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AW-104-express-checkout-edits

Browse Source
This commit is contained in:
Денис Катаев 2024-06-13 00:43:32 +00:00 committed by Daniil Chemerkin
parent 2fb3606989
commit 90ad1b8a16
10 changed files with 40 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/PaymentPage/methods/ExpressCheckoutStripe/index.tsx
View File

@ -10,6 +10,7 @@ import {
AvailablePaymentMethods,
StripeExpressCheckoutElementReadyEvent,
} from "@stripe/stripe-js";
import { checkExpressCheckoutStripeFormAvailable } from "@/data/paymentMethods";
interface IExpressCheckoutStripeProps {
clientSecret: string;
@ -22,20 +23,6 @@ interface IExpressCheckoutStripeProps {
onChangeLoading?: (isLoading: boolean) => void;
}
const checkFormAvailable = (
availablePaymentMethods: undefined | AvailablePaymentMethods
) => {
if (!availablePaymentMethods) return false;
let result = false;
for (const key in availablePaymentMethods) {
if (availablePaymentMethods[key as keyof AvailablePaymentMethods]) {
result = true;
break;
}
}
return result;
};
function ExpressCheckoutStripe({
clientSecret,
returnUrl = "https://${window.location.host}/payment/result/",
@ -95,7 +82,9 @@ function ExpressCheckoutStripe({
};
const onReady = (event: StripeExpressCheckoutElementReadyEvent) => {
const _isAvailable = checkFormAvailable(event.availablePaymentMethods);
const _isAvailable = checkExpressCheckoutStripeFormAvailable(
event.availablePaymentMethods
);
setIsAvailable(_isAvailable);
onAvailable && onAvailable(_isAvailable, event.availablePaymentMethods);
onChangeLoading && onChangeLoading(false);
@ -107,6 +96,13 @@ function ExpressCheckoutStripe({
onReady={onReady}
onLoadError={() => onChangeLoading && onChangeLoading(false)}
onConfirm={onConfirm}
options={{
layout: {
maxColumns: 1,
overflow: "never",
},
paymentMethodOrder: ["apple_pay", "google_pay", "amazon_pay", "link"],
}}
/>
{errorMessage && <p className={styles.error}>{errorMessage}</p>}
</div>

2
src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx
View File

@ -185,7 +185,7 @@ function PaymentModal({
)}
</div>
<SecurityPayments />
<p className={styles.address}>500 N RAINBOW BLVD LAS VEGAS, NV 89107</p>
<p className={styles.address}>1123 Rimer Dr Moraga, California 94556</p>
</div>
</>
);

1
src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/styles.module.css
View File

@ -37,6 +37,7 @@
.address {
margin-bottom: 24px;
text-transform: uppercase;
}
.payment-method {

2
src/components/pages/AdditionalPurchases/components/PaymentAddress/index.tsx
View File

@ -2,7 +2,7 @@ import styles from "./styles.module.css"
function PaymentAddress() {
return (
<p className={styles.address}>500 N RAINBOW BLVD LAS VEGAS, NV 89107</p>
<p className={styles.address}>1123 Rimer Dr Moraga, California 94556</p>
)
}

1
src/components/pages/AdditionalPurchases/components/PaymentAddress/styles.module.css
View File

@ -4,4 +4,5 @@
text-align: center;
margin-top: 9px;
color: rgb(130, 130, 130);
text-transform: uppercase;
}

2
src/components/pages/SinglePaymentPage/PaymentForm/index.tsx
View File

@ -34,7 +34,7 @@ function PaymentForm({
)}
</div>
<SecurityPayments />
<p className={styles.address}>500 N RAINBOW BLVD LAS VEGAS, NV 89107</p>
<p className={styles.address}>1123 Rimer Dr Moraga, California 94556</p>
</div>
);
}

1
src/components/pages/SinglePaymentPage/PaymentForm/styles.module.css
View File

@ -41,4 +41,5 @@
.address {
color: gray;
font-size: 10px;
text-transform: uppercase;
}

2
src/components/pages/TrialPayment/components/PaymentModal/index.tsx
View File

@ -190,7 +190,7 @@ function PaymentModal({
)}
</div>
<SecurityPayments />
<p className={styles.address}>500 N RAINBOW BLVD LAS VEGAS, NV 89107</p>
<p className={styles.address}>1123 Rimer Dr Moraga, California 94556</p>
</div>
</>
);

1
src/components/pages/TrialPayment/components/PaymentModal/styles.module.css
View File

@ -37,6 +37,7 @@
.address {
margin-bottom: 24px;
text-transform: uppercase;
}
.payment-method {

22
src/data/paymentMethods.tsx
View File

@ -1,6 +1,7 @@
import { TCanMakePaymentResult } from "@/components/PaymentPage/methods/StripeButton";
import CreditCard from "@/components/ui/PaymentMethodsButtons/CreditCard";
import PaymentButtons from "@/components/ui/PaymentMethodsButtons/PaymentButtons";
import { AvailablePaymentMethods } from "@stripe/stripe-js";
export enum EPaymentMethod {
CREDIT_CARD = "card",
@ -23,6 +24,20 @@ export interface IPaymentMethod {
// },
// ];
export const checkExpressCheckoutStripeFormAvailable = (
availablePaymentMethods: undefined | AvailablePaymentMethods
) => {
if (!availablePaymentMethods) return false;
let result = false;
for (const key in availablePaymentMethods) {
if (availablePaymentMethods[key as keyof AvailablePaymentMethods]) {
result = true;
break;
}
}
return result;
};
export function paymentMethods(
availableMethods: TCanMakePaymentResult
): IPaymentMethod[] {
@ -37,7 +52,12 @@ export function paymentMethods(
},
];
if (!availableMethods) {
if (
!availableMethods ||
!checkExpressCheckoutStripeFormAvailable(
availableMethods as AvailablePaymentMethods
)
) {
methods = methods.filter(
(method) => method.id !== EPaymentMethod.PAYMENT_BUTTONS
);