Apple pay button not showing correctly

I'm implementing a payment-checkout which is a white-label of ACI and the payment provider is VR-payment. So far everything worked smooth except the displaying of the apple pay button. The button works correctly and I can pay with it but it doesn't have the correct styling. ACI/VR-payment are saying in their documenation that the button doesn't need any styling just like the credit card and gpay. I'm using React as Framework and as far as I know the HTML-Script-Tags doesn't work. That's why I implemented it with a workaround which is shown below. Maybe someone used the same Framework and also used ACI/VR-payment for implementing the payment.

This is how the button looks like:

Here is the documentation of VR-payment: https://vr-pay-ecommerce.docs.oppwa.com/tutorials/integration-guide/fast-checkout/apple-pay

` import * as React from "react" import {useEffect} from "react"; import {FaRegCreditCard} from'react-icons/fa'; import "../../styles/shoppingBag.css";

export function RenderPaymentScript({checkoutId,orderId}) { console.log(checkoutId); const id = localStorage.getItem("restaurantUid"); const isSafari = window.safari !== undefined;

useEffect(async ()=>{
    window.wpwlOptions={
        applePay: {
            displayName: "example",
            total: { label: "example" },
            style: "white-with-line"
        },
        style: "plain",
        locale:"de",
        googlePay:{
        }
    };
    const script = document.createElement("script");
    script.src =`${process.env.REACT_APP_VR_PAYMENT_URL}${checkoutId}`;
    script.async = true;
    document.body.appendChild(script);

    return () => {
        document.body.removeChild(script);
    }
},[]);

return (
    <div>
        <form action={`${process.env.REACT_APP_SIZZLY_URL}/checkout/${id}/${orderId}/`} className="paymentWidgets" data-brands="APPLEPAY" /*data-brands={`${paymentMethod}`}*//>
        <form action={`${process.env.REACT_APP_SIZZLY_URL}/checkout/${id}/${orderId}/`} className="paymentWidgets" data-brands="GOOGLEPAY"/>
            <div className="paymentBox">
                <text>Kreditkarte</text>
                <FaRegCreditCard size={25} color={'#6C5AF2'} className="paymentIcon"/>
            </div>
        <form action={`${process.env.REACT_APP_SIZZLY_URL}/checkout/${id}/${orderId}/`} className="paymentWidgets" data-brands="VISA MASTER"/>
    </div>
)

}

export default RenderPaymentScript;

This error message showed up when loading the script

Apple pay button not showing correctly
 
 
Q