PayPal React JS Buttons background color

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: