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