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 (