Paypal 按钮容器将背景设置为白色

Question

我正在使用 paypal api，目前正在实现 paypal 按钮（沙盒模式）。当我创建它们时，容器背景设置为白色并且无法更改它。我目前正在使用 svelte 和 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>

这里是问题的截图：

我希望背景是透明的，但它是白色的

Answer 1

2025 更新：黑色借记卡或信用卡表单字段现在应该能够处理深色背景（并显示清晰的文本），因此这个答案可能已过时

旧答案如下

---

当您使用展开内联表单的黑色“借记卡或信用卡”按钮时，不建议按钮本身使用深色背景，因为该表单中的某些元素会在深色上显示深色文本（难以辨认），并且没有办法改变这种行为。

因此，最好的解决方案实际上是白色背景，但带有一些填充和边框半径以保持整洁，如另一个答案中所述。

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

这给出了：