Paypal button container sets background to white

Question

I'm using the paypal api and I'm currently implementing the paypal buttons(sandbox mode). When I create them, the container background is set to white and can't change it. I'm currently using svelte and paypal-js.

<script>
  import { loadScript } from "@paypal/paypal-js";
  import { onMount } from "svelte";
  import { userState } from "../stores/userStores";
  import { get } from "svelte/store";
  export let id = "";

  const CLIENT_ID =
    "AU-sL3infZxD_5xBKmtNPEZDTe5_MKEgAOAe00k3-k0qWjdhfVZwo4AHt428r2gNJIaYlJRVp-9iUC4H";
  let payload = {
        id: id,
      };
  loadScript({
    clientId:
      "AU-sL3infZxD_5xBKmtNPEZDTe5_MKEgAOAe00k3-k0qWjdhfVZwo4AHt428r2gNJIaYlJRVp-9iUC4H",
  }).then((paypal) => {
    paypal
      .Buttons({
        style: {
          color: "black",
          shape: "pill",
        },
        createOrder: async () => {
          // Set up the transaction
          console.log(payload);
          const request = await fetch(
            "http://127.0.0.1:3000/payments/request",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify(payload),
            }
          );

          const data = await request.json();
          return data.id;
        },
        onApprove: async (data, actions) => {
          const request = await fetch(
            "http://127.0.0.1:3000/payments/capture",
            {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                orderID: data.orderID,
                email : $userState.email,
              }),
            }
          );
          const captureData = await request.json();
          return captureData;
        },
        onError: (err) => {
          // Log error if something goes wrong during approval
          console.error(err);
        },
      })
      .render("#paypal-button-container");
  });
</script>

<div
  id="paypal-button-container"
/>

<style>

</style>

Here a screenshot of the problem:

I would the background to be transparent but it's white

Answer 1

2025 update: the black Debit or Credit card form fields should be able to handle a dark background now (and show legible text), so this answer is likely obsolete

Old answer follows

---

As you are using the black "Debit or Credit Card" button which expands an inline form, a dark background for the buttons themselves is not advisable because some elements in that form will show dark text on dark (illegible) and there is no way to change this behavior.

Thus, the best solution is in fact a white background but with some padding and a border-radius for neatness, as described in another answer.

<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>

Which gives: