<script src="https://web.judopay.com/js/0.0/judopay.min.js"></script>
<style>
apple-pay-button {
    --apple-pay-button-width: 100%;
    --apple-pay-button-height: 48px;
    --apple-pay-button-border-radius: 5px;
    --apple-pay-button-padding: 5px 0px;
}
</style>

<script>
const Judopay = {{ config|json_encode|raw }};

Judopay.judo = new JudoPay(Judopay.token, Judopay.testmode);
Judopay.iframe = {
    language: 'en',
    errorFieldId: 'judopay__errors',
    showCardTypeIcons: true,
    cardTypeIconRight: '10px',
    cardTypeIconTop: '-2px',
    backgroundColor: '#ffffff',
    layout: 'compact',
    enabledPaymentMethods: ['CARD'],
    defaultCountryCode: 'US',
    isCountryAndPostcodeVisible: false,
    isCardHolderNameVisible: true,
    errorsDisplay: 'HIDE_UNDER_FIELDS',
    disableUnderline: false,
    styles: {
        default: {
            field: {
                fontFamily: "'Roboto', sans-serif",
                fontSize: '16px',
                backgroundColor: 'white',
                color: '#2b2b2c',
                borderTop: 'solid 1px #c3c4c6',
                borderRight: 'solid 1px #c3c4c6',
                borderLeft: 'solid 1px #c3c4c6',
                borderBottom: 'solid 1px #c3c4c6',
                margin: '0',
                padding: '8px 8px 4px 8px'
            },
            label: {
                color: '#2b2b2c',
                fontFamily: "'Roboto', sans-serif",
                opacity: '0.7',
                height: '16px',
                fontSize: '12px',
                display: 'inline-block',
                transition: 'opacity 0.6s',
                margin: '2px 0 0 8px',
                position: 'relative',
                bottom: '-10px',
                zIndex: '100'
            }
        },
        focus: {
            field: {
                backgroundColor: 'white',
                color: '#2b2b2c',
                padding: '8px 8px 4px 8px',
                fontSize: '16px'
            },
            label: {
                opacity: '0'
            }
        },
        error: {
            field: {
                backgroundColor: '#fff5f5',
                color: '#c70000',
                padding: '8px 8px 4px 8px'
            },
            label: {
                opacity: '0'
            }
        },
        valid: {
            field: {
                backgroundColor: 'white',
                color: '#2b2b2c',
                padding: '8px 8px 4px 8px'
            },
            label: {
                opacity: '0'
            }
        }
    }
};
</script>