PayPal React JS Buttons background color - paypal

Question

I am using react-paypal-js for the payments in the code as follows (Next.JS)
import { useEffect } from "react";
import {
PayPalScriptProvider,
PayPalButtons,
usePayPalScriptReducer
} from "#paypal/react-paypal-js";
import {
Badge,
Button,
Center,
Flex,
Heading,
Image,
Link,
Stack,
Text,
useColorModeValue,
} from '#chakra-ui/react';
const ButtonWrapper = ({ type }: any) => {
const [{ options }, dispatch] = usePayPalScriptReducer();
useEffect(() => {
dispatch({
type: "resetOptions",
value: {
...options,
intent: "subscription",
},
});
}, [dispatch]);
return (<PayPalButtons
createSubscription={(_data, actions) => {
return actions.subscription
.create({
plan_id: "P-3RX065706M3469222L5IFM4I",
})
.then((orderId) => {
return orderId;
});
}}
style={{
label: "subscribe",
color: "silver"
}}
/>);
}
export default function CheckoutPage() {
return (
<Center py={6}>
<Stack
borderWidth="1px"
borderRadius="lg"
w={{ sm: '100%', md: '540px' }}
height={{ sm: '476px', md: '20rem' }}
direction={{ base: 'column', md: 'row' }}
color={"white"}
// bg={useColorModeValue('white', 'gray.900')}
boxShadow={'2xl'}
padding={4}>
<Stack
flex={1}
flexDirection="column"
justifyContent="center"
alignItems="center"
p={1}
pt={2}>
<Heading fontSize={'2xl'} fontFamily={'body'}>
Checkout
</Heading>
<PayPalScriptProvider options={{
"client-id": "test",
components: "buttons",
intent: "subscription",
vault: true,
}}>
<ButtonWrapper type="subscription"></ButtonWrapper>
</PayPalScriptProvider>
</Stack>
</Stack>
</Center>
);
}
But due to dark mode on the website, the buttons appear to be really weird and I tried changing the color with classnames but it doesn't change to black.
I doubt if we can do anything to change the color but it seems as if this is not the issue if I plan to use the script in browser render as shown here
Please help me out on how can I change the background color to black
Updated image:

Answer 1

Using this Storybook demo as a simpler starting point, you can just add a black background div:
<div style={{ maxWidth: "750px", minHeight: "200px", backgroundColor: "black"}}>
<PayPalScriptProvider
options={{
"client-id": "test",
components: "buttons",
intent: "subscription",
vault: true,
}}
>
<ButtonWrapper type="subscription" />
</PayPalScriptProvider>
</div>
This seems to produce what you want. It's only viable for Subscriptions, not one-time checkouts, because for Subscriptions the black "Debit or Credit Card" button does not open an inline form.
For one-time payments, if including that black button the inline form it expands would have dark text that does not look correct on a dark background. The only viable option for a dark background site that includes this black button would be to put the buttons within a light-colored well, similar to the following (using plain HTML/JS to keep this example simple and universal, but the same can be done with react)
<script src="https://www.paypal.com/sdk/js?client-id=test&currency=USD"></script>
<div id="paypal-button-container" style="background-color:white; padding:5px; border-radius:5px;"></div>
<script>
paypal.Buttons({}).render('#paypal-button-container');
</script>
On a dark background page, this gives: