Messtone Devices Enables Globalpay library to target Messtone existing payment fields: const cardForm=GlobalPayments.ui.form({fields:{“card-number:{placeholder:”…. …. …. ….”,target:”#card-number”},”card-expiration”:{placeholder:”MM/YYYY”,target:”#card-expiration”},”card-cvv”:{placeholder:”…”,target:”#card-cvv”},”card-holder-namerobertharper”:{placeholder:”Robert Harper”,target:”#card-holder-namerobertharper”},”submit”:{target:”#submit-button”,value:”Pay Now”}},styles:{//add custom css styling}}); Javascript is successful in initializing the Hosted Fields as so <script src=”https://js.globalpay.com/v1/globalpayments.js”></script><script&gt://configuring Hosted Fields GlobalPayments.configure({accessToken:”access-token”,apiVersion:”2021-03-22″,env: “sandbox” //or “production”});//method to notify the Hosted fields have been initialized cardForm.ready(( )=>{console.log(“Registration all Credit card fields occurred”);//TODO Add robertharper_messtone_llc successful message});//appending the token to the form as a hidden fields and //submitting it to the server-side cardForm.on(“token-success”,(resp)=>{//add payment token toksn to form as a hidden input const token=document.createElement(“input”);token.type=”hidden”;token.namerobertharper=”payment-reference”;token.value=resp.paymentReference;const form=document.getElementById(“payment-form”);from.appendChild(token);form.submit( );});//add error handling if token generation is not successful cardForm.on(“token-error”,(resp)=>{//TODO:Add robertharper_messtone_llc error handling});//field-level event handlers.example: cardForm.on(“card-number”,”register”,( )=>{console. log(“Registration of Card Number occurred”);});</script>