GaurdedPay Checkout Icon Script

/**

 * ============================================================

 * GUARDEDPAY PRO — Phase 2: Heading + Trust Badges (v2)

 * ============================================================

 * 

 * PURPOSE: Injects "Complete Your Order" heading, supporting text,

 *          and trust badges INSIDE the GuardedPay payment method

 *          area — between the radio label and the gray compliance

 *          widget. Uses JS injection since WooCommerce has no

 *          hook for this exact position.

 * 

 * INSTALL: Code Snippets plugin → "Run Everywhere"

 * ============================================================

 */

add_action( 'wp_head', 'gp_phase2_styles' );

function gp_phase2_styles() {

    if ( ! is_checkout() && ! is_wc_endpoint_url( 'order-pay' ) ) {

        return;

    }

    ?>

    <style id="gp-phase2-styles">

        #gp-checkout-header,

        #gp-checkout-header * {

            text-transform: none !important;

        }

        #gp-checkout-header {

            padding: 16px 20px 12px 20px;

            margin: 0;

        }

        #gp-checkout-header h3 {

            font-size: 16px;

            font-weight: 600;

            margin: 0 0 4px 0;

            padding: 0;

            line-height: 1.4;

            color: inherit;

            font-family: inherit;

            letter-spacing: 0;

        }

        #gp-checkout-header .gp-subtext {

            font-size: 13px;

            margin: 0 0 12px 0;

            padding: 0;

            color: #6b7280;

            line-height: 1.5;

        }

        #gp-checkout-header .gp-badges {

            display: flex;

            align-items: center;

            flex-wrap: wrap;

            gap: 10px;

            padding: 8px 12px;

            background: #f9fafb;

            border: 1px solid #e5e7eb;

            border-radius: 5px;

        }

        #gp-checkout-header .gp-badges img.gp-icon {

            height: 20px;

            width: auto;

            flex-shrink: 0;

        }

        #gp-checkout-header .gp-badges .gp-encrypted,

        #gp-checkout-header .gp-badges .gp-secure-text {

            font-size: 12px;

            font-weight: 600;

            color: #059669;

            letter-spacing: 0.02em;

        }

        #gp-checkout-header .gp-badges .gp-divider {

            width: 1px;

            height: 18px;

            background: #d1d5db;

            flex-shrink: 0;

        }

        #gp-checkout-header .gp-badges img.gp-card {

            height: 24px;

            width: auto;

            flex-shrink: 0;

        }

        @media (max-width: 480px) {

            #gp-checkout-header {

                padding: 12px 14px 10px 14px;

            }

            #gp-checkout-header h3 {

                font-size: 15px;

            }

            #gp-checkout-header .gp-badges {

                gap: 8px;

                padding: 8px 10px;

            }

        }

    </style>

    <?php

}

add_action( 'wp_footer', 'gp_phase2_inject_header' );

function gp_phase2_inject_header() {

    if ( ! is_checkout() && ! is_wc_endpoint_url( 'order-pay' ) ) {

        return;

    }

    ?>

    <script id="gp-phase2-inject">

    (function() {

        'use strict';

        var HEADER_ID = 'gp-checkout-header';

        var headerHTML = ''

            + '<div id="' + HEADER_ID + '">'

            +   '<h3>Complete Your Order</h3>'

            +   '<p class="gp-subtext">Your payment is processed securely through our authorized payment partner.</p>'

            +   '<div class="gp-badges">'

            +     '<img class="gp-icon" src="https://purepeptides.bio/wp-content/uploads/2026/03/padlock-lock-svgrepo-com.svg" alt="Padlock">'

            +     '<span class="gp-encrypted">256-bit encrypted</span>'

            +     '<span class="gp-divider"></span>'

            +     '<img class="gp-card" src="https://purepeptides.bio/wp-content/uploads/2026/03/visa-4-logo-svgrepo-com.svg" alt="Visa">'

            +     '<img class="gp-card" src="https://purepeptides.bio/wp-content/uploads/2026/03/mastercard-old-3-svgrepo-com.svg" alt="Mastercard">'

            +     '<span class="gp-divider"></span>'

            +     '<img class="gp-icon" src="https://purepeptides.bio/wp-content/uploads/2026/03/shield-svgrepo-com.svg" alt="Shield">'

            +     '<span class="gp-secure-text">Secure Checkout</span>'

            +   '</div>'

            + '</div>';

        function inject() {

            // Don't duplicate

            if (document.getElementById(HEADER_ID)) return true;

            // Target: the GuardedPay payment box

            var box = document.querySelector('.payment_box.payment_method_guardedpay_pro');

            if (!box) return false;

            // Insert as the first child of the payment box (above the gray widget content)

            box.insertAdjacentHTML('afterbegin', headerHTML);

            return true;

        }

        // Try immediately

        if (!inject()) {

            document.addEventListener('DOMContentLoaded', function() {

                if (!inject()) {

                    setTimeout(inject, 500);

                    setTimeout(inject, 1500);

                }

            });

        }

        // Re-inject after WooCommerce AJAX checkout updates (payment area rebuilds)

        var observer = new MutationObserver(function() {

            inject();

        });

        function startObserving() {

            var payment = document.getElementById('payment');

            if (payment) {

                observer.observe(payment, { childList: true, subtree: true });

            }

        }

        if (document.readyState === 'loading') {

            document.addEventListener('DOMContentLoaded', startObserving);

        } else {

            startObserving();

        }

        if (typeof jQuery !== 'undefined') {

            jQuery(document.body).on('updated_checkout', function() {

                setTimeout(inject, 100);

            });

        }

    })();

    </script>

    <?php

}