Not being able to style <StripeCheckout>

This is the html:

<StripeCheckout className='payBtn' />

And this is how it looks right now:

And this is the .scss for it:

.payBtn {
        display: block;
        background-color: rgba(160, 255, 223, 0.596);
        color: black;
        font-size: 1.3rem;
        line-height: 1;
        font-weight: 200;
        width: 100%;
        margin: 0 auto;
        padding: 1rem 0;
        border: 0;
        outline: none;
        text-transform: uppercase;
        cursor: pointer;
    
        &:hover {
            background-color: rgba(114, 250, 205, 0.699);
        }
    }

What I'm trying to make it look like: what it needs to look like

Everything else on the page is styled according to the stylesheet. Even the size of the button of pay with card is. But the colors and stuff are not changing. Any help would be appreciated, thanks :D