Personalización del checkout

Buena tarde, disculpen, he estado tratando de personalizar el checkout de conekta pero no se modifica ningun estilo, solo el theme que se pone en rojo y ya, a que se debe esto?, aquí está el código:

<html>
    <head>
        <meta charset="utf-8">
        <title>Checkout</title>
        <script type="module" src="https://assets.conekta.com/component/2.0.0/assets/iframe.min.js"></script>
      <!--  el script init-iframe.js almacena la configuración, 
            puedes verlo en la siguiente pestaña de código  -->
      
        <script type="module" crossorigin defer>
            const config = {
                targetIFrame: "conektaIframeContainer",
                checkoutRequestId: "X",
                publicKey: "X",
                locale: "es",
            };
            const callbacks = {
                onFinalizePayment: (event) => console.log(event),
                onErrorPayment: (event) => console.log(event),
                onGetInfoSuccess: (event) => console.log(event),
            }
            const options = {
                styles: {
                    logo: {
                        size: 'small', // small | medium | large
                        typeImage: 'url', // url | base64
                        source: 'https://s3-conektacdn-staging.s3.amazonaws.com/cpanel/statics/assets/brands/logos/logo petsy.svg'
                    }
                }
            }
            window.ConektaCheckoutComponents.Integration({ config, callbacks, options });
        </script>
      
      <!--  es importante el atributo defer del script, 
            este permitirá que se cargue primero
            el archivo js del component y luego se ejecute el init  -->
    </head>
    <body>
    <div id="conektaIframeContainer" style="height: 700px;"></div>
    </body>
</html>