nshop-front-m/src/app/(checkout)/checkout/_components/PaymentMethodAdditional/AirwallexCardInput.tsx

"use client";

export default function AirwallexCardInput({ 
    cardNumberErrorMsg,
    expiryErrorMsg,
    cvcErrorMsg,
} : {
    cardNumberErrorMsg: string;
    expiryErrorMsg: string;
    cvcErrorMsg: string;
}) {

    return (

        <div id="airwallex-dropIn-card-container" className="w-full">
            <div className="w-full">
                <div id="airwallex_cardNumber" className="w-full border-1 border-ly-inputborder h-11.5"></div>
                {cardNumberErrorMsg && <p className="text-ly-12 text-ly-errorcolor">{cardNumberErrorMsg}</p>}
            </div>
            <div className="mt-3 flex justify-between gap-4">
                <div className="w-full">
                    <div id="airwallex_expiry" className="w-full border-1 border-ly-inputborder h-11.5"></div>
                    {expiryErrorMsg && <p className="text-ly-12 text-ly-errorcolor">{expiryErrorMsg}</p>}
                </div>
                <div className="w-full">
                    <div id="airwallex_cvc" className="w-full border-1 border-ly-inputborder h-11.5"></div>
                    {cvcErrorMsg && <p className="text-ly-12 text-ly-errorcolor">{cvcErrorMsg}</p>}
                </div>
            </div>
           
            <div className="mt-2 w-full flex items-center">
                <svg className="flex-none w-4.5 h-4.5 mr-2" xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24" id="pci-svg">
                    <path d="m18,8l-1,0l0,-2c0,-2.76 -2.24,-5 -5,-5s-5,2.24 -5,5l0,2l-1,0c-1.1,0 -2,0.9 -2,2l0,10c0,1.1 0.9,2 2,2l12,0c1.1,0 2,-0.9 2,-2l0,-10c0,-1.1 -0.9,-2 -2,-2zm-6,9c-1.1,0 -2,-0.9 -2,-2s0.9,-2 2,-2s2,0.9 2,2s-0.9,2 -2,2zm3.1,-9l-6.2,0l0,-2c0,-1.71 1.39,-3.1 3.1,-3.1c1.71,0 3.1,0.92125 3.1,2.84372l0,-0.78122l0,3.0375z"></path>
                </svg>
                <p className="text-ly-12 leading-ly-18">
                    Your card details are protected using PCI DSS v3.2 security standards.      
                </p>
            </div>
        </div>
    )
}