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

"use client";

import { useId } from "react";
import {
    useAirwallexCard,
    useAirwallexCardState
} from "@/lib/Airwallex/useAirwallexCard";

export default function AirwallexCardInput() {
    const id = useId();
    const {
        cardNumberErrorMsg,
        expiryErrorMsg,
        cvcErrorMsg
    } = useAirwallexCardState();
    const cardNumberId = `airwallex_cardNumber_${id}`;
    const cvcId = `airwallex_cvc_${id}`;
    const expiryId = `airwallex_expiry_${id}`;
    useAirwallexCard({
        cardNumber: cardNumberId, 
        cvc: cvcId, 
        expiry: expiryId
    });

    return (

        <div id="airwallex-dropIn-card-container" className="w-full">
            <div className="w-full">
                <div id={cardNumberId} className="w-full box-border border-1 border-ly-inputborder h-11.5 pl-3 flex items-center"></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={expiryId} className="w-full box-border border-1 border-ly-inputborder h-11.5 pl-3 flex items-center"></div>
                    {expiryErrorMsg && <p className="text-ly-12 text-ly-errorcolor">{expiryErrorMsg}</p>}
                </div>
                <div className="w-full">
                    <div id={cvcId} className="w-full box-border border-1 border-ly-inputborder h-11.5 pl-3 flex items-center"></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>
    )
}