Add a Cash App Afterpay Banner to Shopify

{% if section.settings.should_show_banner %}
{% case section.settings.banner_color %}
    {% when 'black' %}
        {% assign banner_bg_color = '#000000' %}
        {% assign banner_text_color = '#ffffff' %}
        {% assign logo_color_scheme = 'color' %}
    {% when 'white' %}
        {% assign banner_bg_color = '#ffffff' %}
        {% assign banner_text_color = '#000000' %}
        {% assign logo_color_scheme = 'color' %}
    {% when 'green' %}
        {% assign banner_bg_color = '#00d633' %}
        {% assign banner_text_color = '#000000' %}
        {% assign logo_color_scheme = 'mono' %}
{% endcase %}
<style>
    .shopify-section .cash-app-afterpay-banner {
        background-color: {{ banner_bg_color }};
        text-align: center;
        text-decoration: none;
    }
    .shopify-section .cash-app-afterpay-banner-inner {
        font-size: medium;
        color: {{ banner_text_color }};
        margin: 0;
        padding: 10px 0; 
    }
    .shopify-section .cash-app-afterpay-banner-inner square-placement {
        vertical-align: middle;
    }
</style>
<div class="cash-app-afterpay-banner">
    <p class="cash-app-afterpay-banner-inner">
        <square-placement
            data-mpid={{ shop.permanent_domain | json }}
            data-currency={{ shop.currency | json }}
            data-type="logo"
            data-color-scheme={{ logo_color_scheme }}
            data-appearance="auto"
            data-platform="Shopify - Banner - CashApp Afterpay"
        ></square-placement>
        is here! Shop now, pay later in 4 easy installments
        <a href="javascript:void(0);"
            style="text-decoration: none; color: {{ banner_text_color }};"
            data-afterpay-modal="{{ request.locale.iso_code }}_{{ shop.address.country_code }}">ⓘ</a>
    </p>
</div>
<script src="https://js.squarecdn.com/square-marketplace.js" defer></script>
{% endif %}
{% schema %}
{
    "name": "Cash App Afterpay Banner",
    "settings": [
        {
            "type": "checkbox",
            "id": "should_show_banner",
            "label": "Show Afterpay banner",
            "default": true
        },
        {
            "type": "select",
            "id": "banner_color",
            "label": "Banner color",
            "options": [
                {
                    "group": "Color options",
                    "value": "black",
                    "label": "Black"
                },
                {
                    "group": "Color options",
                    "value": "white",
                    "label": "White"
                },
                {
                    "group": "Color options",
                    "value": "green",
                    "label": "Green"
                }
            ],
            "default": "white"
        }
    ]
}
{% endschema %}