diff --git a/.changeset/nasty-maps-bathe.md b/.changeset/nasty-maps-bathe.md new file mode 100644 index 00000000..150e5f11 --- /dev/null +++ b/.changeset/nasty-maps-bathe.md @@ -0,0 +1,5 @@ +--- +"@godaddy/react": patch +--- + +Add optional appearance to checkout session diff --git a/packages/react/src/components/checkout/checkout.tsx b/packages/react/src/components/checkout/checkout.tsx index 5a693fe0..0f04eeb3 100644 --- a/packages/react/src/components/checkout/checkout.tsx +++ b/packages/react/src/components/checkout/checkout.tsx @@ -226,8 +226,8 @@ export function Checkout(props: CheckoutProps) { >(undefined); const { t } = useGoDaddyContext(); - useTheme(); - useVariables(props?.appearance?.variables); + useTheme(session?.appearance?.theme); + useVariables(session?.appearance?.variables || props?.appearance?.variables); const formSchema = React.useMemo(() => { const extendedSchema = checkoutFormSchema diff --git a/packages/react/src/components/checkout/express-checkout/express-checkout.tsx b/packages/react/src/components/checkout/express-checkout/express-checkout.tsx index e1ecaad7..52f4c483 100644 --- a/packages/react/src/components/checkout/express-checkout/express-checkout.tsx +++ b/packages/react/src/components/checkout/express-checkout/express-checkout.tsx @@ -94,8 +94,8 @@ export function DraftOrderExpressCheckout(props: ExpressCheckoutProps) { paypalConfig, } = props; - useTheme(); - useVariables(props?.appearance?.variables); + useTheme(session?.appearance?.theme); + useVariables(session?.appearance?.variables || props?.appearance?.variables); const [isConfirmingCheckout, setIsConfirmingCheckout] = React.useState(false); const [checkoutErrors, setCheckoutErrors] = React.useState< diff --git a/packages/react/src/components/checkout/payment/checkout-buttons/express/godaddy.tsx b/packages/react/src/components/checkout/payment/checkout-buttons/express/godaddy.tsx index aa92fe5d..8ada5640 100644 --- a/packages/react/src/components/checkout/payment/checkout-buttons/express/godaddy.tsx +++ b/packages/react/src/components/checkout/payment/checkout-buttons/express/godaddy.tsx @@ -412,7 +412,7 @@ export function ExpressCheckoutButton() { buttonOptions: { type: 'plain', margin: '0', - height: '48px', + height: '50px', width: '100%', justifyContent: 'flex-start', onClick: handleExpressPayClick, diff --git a/packages/react/src/components/checkout/payment/checkout-buttons/paypal/paypal.tsx b/packages/react/src/components/checkout/payment/checkout-buttons/paypal/paypal.tsx index 0e16613b..4495dbfe 100644 --- a/packages/react/src/components/checkout/payment/checkout-buttons/paypal/paypal.tsx +++ b/packages/react/src/components/checkout/payment/checkout-buttons/paypal/paypal.tsx @@ -87,7 +87,7 @@ function PayPalButtonsWrapper() { }; if (isPending || !isResolved) { - return ; + return ; } return ( @@ -97,7 +97,7 @@ function PayPalButtonsWrapper() { label: 'pay', shape: 'rect', borderRadius: 8, - height: 40, + height: 50, }} disabled={isPaypalDisabled || isPaymentDisabled} onClick={handleClick} diff --git a/packages/react/src/components/checkout/payment/checkout-buttons/paze/godaddy.tsx b/packages/react/src/components/checkout/payment/checkout-buttons/paze/godaddy.tsx index 0a39c0c6..5e2f06ff 100644 --- a/packages/react/src/components/checkout/payment/checkout-buttons/paze/godaddy.tsx +++ b/packages/react/src/components/checkout/payment/checkout-buttons/paze/godaddy.tsx @@ -76,7 +76,7 @@ export function PazeCheckoutButton() { buttonOptions: { type: 'plain', margin: '0', - height: '48px', + height: '50px', width: '100%', justifyContent: 'flex-start', onClick: handlePazeClick, diff --git a/packages/react/src/components/checkout/payment/payment-form.tsx b/packages/react/src/components/checkout/payment/payment-form.tsx index 90090bee..c753e7be 100644 --- a/packages/react/src/components/checkout/payment/payment-form.tsx +++ b/packages/react/src/components/checkout/payment/payment-form.tsx @@ -263,7 +263,8 @@ export function PaymentForm( return (