Customisation

customising your web sdk integration form customisation the iframeconfiguration object is key for customising the look and behaviour of the iframe you can change the appearance, behaviour and language, by passing the json configuration object into createcarddetails const iframeconfiguration = { iframe { } } var judo = new judopay("yourapitoken", true); var payment = judo createcarddetails("payment iframe", iframeconfiguration); it is optional to provide the iframeconfiguration object in the createcarddetails call if it is not provided, the customisation properties will be set as their default values styles properties configuration to style fields is within the styles object styles can be applied to all fields by placing the style attribute in the default object inside styles you can also apply styles individually to fields, directly to the field name the styles object has six properties default focus error valid cv2 expirydate each of the above properties has two properties field label the properties for field and label mapped to the style objects of the input and label html elements the properties for focus, error and valid mapped on state transition allowing the functionality to be consistent with other forms on your site any property defined in default will be applied to all the fields any property defined in a field will take priority over a default property, the fields are expirydate and cv2 all valid style properties are supported and take the form of camel cased css properties, eg padding bottom becomes paddingbottom styles object example styles { default { field { backgroundcolor '#0a0a0a', color '#eee', padding '10px', margin '0 20px', width '90%', borderradius '4px', boxshadow 'rgba(255, 255, 255, 0 8) 0px 0px 10px inset' }, label { color '#eee', padding '10px 10px 0 25px', fontweight 'bold', texttransform 'capitalize' } }, focus { field { backgroundcolor '#2a2a2a', color '#eee' }, }, error { field { backgroundcolor '#1a0a0a', color '#990000' } }, valid { field { color '#cfc' } }, cv2 { field { margin "0 20px 10px;" }, expirydate { field { marginbottom "10px;" } } form layout three layout options are provided vertical compact horizontal form fonts an array of json objects each representing a font, are added to the page they can be referenced from the style object each object can have the following properties property name values example value family specifies the name of the font face value properties roboto src specifies the resource containing the font data "/fonts/opensans regular webfont woff2" display determines how a font face is displayed based on whether and when it is downloaded and ready to use auto style specifies the font styles italic unicoderange the range of font unicode code points to be used u+0025 00ff, u+4?? weight specifies the font weight, or boldness 400 assigning font example //the following example loads roboto from google fonts and assigns it fonts \[ { family 'roboto', src 'https //fonts gstatic com/s/roboto/v18/kfomcnqeu92fr1mu72xkozy woff2', display 'auto', style 'normal', unicoderange 'u+0000 00ff, u+0131, u+0152 0153, u+02bb 02bc, u+02c6, u+02da, u+02dc, u+2000 206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd', weight '400' } ], styles { default { field { fontfamily "'roboto', sans serif", }, label { fontfamily "'roboto', sans serif", } }, adding a new language you can add any language you need override some or all of the translations of an existing language the web sdk supports en, de, fr, es, pt to add a new language define a dictionary of the language(s) you wish to add or override this is an object of languages, along with their translation keys and values ensure the keys have no spelling errors, otherwise the translations will not work to define a new language supply all translation keys and values to override an existing language supply only the translation key / pair values to override for the purpose of this exercise, the following example dictionary object contains translations for a new language italian translations for an existing language english example dictionary object const exampledictionary = { //this defines a new language so all keys must be provided it { fieldlabels { cardnumberlabel 'numero di carta', expirydatelabel 'data di scadenza', cardverificationcodelabel 'cvc', postcodelabel 'post codice', countrylabel 'paese', cardholdernamelabel 'nome del titolare' }, fieldplaceholders { cardnumberplaceholder 'numero di carta', expirydateplaceholder 'mm / yy', cardverificationcodeplaceholder 'cvc', postcodeplaceholder 'post codice', countryplaceholder 'paese', cardholdernameplaceholder 'nome del titolare' }, //will translate countrylist items from websdk version 0 0 39 countrylist { uk 'ru', usa 'usa', canada 'canada', other 'altro' }, errors { onlynumbersallowed 'il numero della carta può contenere solo numeri', invalidcardnumber 'numero della carta non valido', cardtypenotrecognized 'tipo di carta non riconosciuto, ricontrolla il tuo numero', cardtypenotsupported '{1} non è supportato', // from websdk version 0 0 39 cardnumberrequired 'numero della carta richiesto', cardexpired 'la carta è scaduta', invalidcardexpirydate 'la data di scadenza della carta non è valida', expirydaterequired 'data di scadenza richiesta', codetooshort '{0} codice troppo corto per {1} scheda', codetoolong '{0} codice troppo lungo per {1} scheda', onlynumbersallowedincode '{0} il codice può contenere solo numeri', coderequired '{0} codice richiesto per {1} scheda', invalidpostcode 'il codice postale/postale non è valido', generic 'mi dispiace, si è verificato un errore, non ti è stato addebitato ', cardholdernamerequired 'è richiesto il nome del titolare della carta', cardholdernametooshort 'il nome del titolare della carta non può essere inferiore a 4 caratteri', cardholdernamespecialchars 'il nome del titolare della carta non può contenere numeri o caratteri speciali' } }, //this defines an already existing language //not all keys are required, but those that are will override the sdk's values en { fieldlabels { cardnumberlabel 'credit card number', expirydatelabel 'expiration date', cardverificationcodelabel 'cvc' }, fieldplaceholders { cardnumberplaceholder 'xxxx xxxx xxxx xxxx', expirydateplaceholder 'mm / yy ', cardverificationcodeplaceholder 'xxx' }, errors { generic 'sorry, an error has occurred ', cardholdernamerequired 'please enter a cardholder name', cardholdernametooshort "card name can't be less than 4 characters", cardholdernamespecialchars "card name can't contain numbers or special characters" } } } it is important the language dictionary follows this structure with inner dictionaries and strings, so the translations can be applied error message strings the above example dictionary object contains error message strings which contain values {0} and {1} the {0} and {1} values will be will be swapped for strings at runtime, depending on the current state of the iframe form for example {0} will change to the card verification code acronym this will be named depending on the card type, for example cvc, or cvv {1} will refer to the detected card type, for example visa, mastercard, diners club international or discover ensure you include {1} or {0} in your translation strings (for appropriate keys), to enable this behaviour for more information on error messages, including these dynamic values, see payment form error messages docid\ qfxawpaql 2evfp8y94d set the customlanguages property in your iframe configuration object to the dictionary object you have defined changing the form language judopay's web sdk supports multiple languages the default property is english language code english en french fr spanish es portuguese pt german ge you can also add other languages or override an existing language, see customisation docid\ fvh6jg8c0jc7q7oc9uoac set the language variable in your iframe configuration object to the alpha 2 country code (above) for the desired language for the purpose of this exercise, the language is set to spanish when the iframe is initially loaded onto the page set to spanish on page load \<script> // judopay websdk setup const config = { isgeolocationgatheringallowed true, iframe { // other iframe properties language 'es' } } judopay createcarddetails('judopay payment iframe', config); \</script> you can change the language used in the form at run time this is useful for consumers running a single page application (spa) call the web sdk method for updating the language changeiframelanguage('de') you can call this method when an event occurs, such when a button is clicked, to dynamically changing the language for the purpose of this exercise, the method is called when a button is clicked, and the iframe language is changed to german set to german on button click \<button onclick="onbuttonclick()">translate to german\</button> \<script> function onbuttonclick() { judo changeiframelanguage('de'); } \</script> configuration file example below is an example configuration object that customises the payment iframe it is provided as a parameter to the createcarddetails web sdk call judo createcarddetails('payment iframe', iframeconfiguration) iframe configuration example const iframeconfiguration = { isgeolocationgatheringallowed true, iframe { language 'en', errorfieldid 'judopay errors', cardtypeiconright ' 400px', cardtypeicontop ' 50x', backgroundcolor '#eaecef', showcardtypeicons true, layout 'vertical', enabledpaymentmethods \['card'], defaultcountrycode 'us', iscountryandpostcodevisible false, iscardholdernamevisible false, disableunderline true, errorsdisplay 'hide under fields', shouldautofocus false, fonts \[ { family 'roboto', src 'https //fonts gstatic com/s/roboto/v18/kfomcnqeu92fr1mu72xkozy woff2', display 'auto', style 'normal', unicoderange 'u+0000 00ff, u+0131, u+0152 0153, u+02bb 02bc, u+02c6, u+02da, u+02dc, u+2000 206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd', weight '400' } ], styles { default { field { fontfamily 'roboto, sans serif', fontsize '17px', backgroundcolor '#e5e5e5', bordertop 'none', borderright 'none', borderleft 'none', boxshadow 'none', margin ' 10px 0 5px', padding '6px 0' }, label { color '#f77', fontfamily "'roboto', sans serif", opacity '0', height '15px', fontsize '8px', display 'inline block', transition 'opacity 0 6s', marginleft '5px', position 'relative', bottom ' 10px', zindex '100' } }, focus { field { backgroundcolor '#f0f0f0', color 'rgb(130, 130, 130)', padding '12px 6px 0', fontsize '16px' }, label { opacity '1', color 'rgb(130, 130, 130)' } }, error { field { backgroundcolor '#e5ecff', padding '12px 6px 0' }, label { opacity '1' } }, valid { field { backgroundcolor '#e5ffec', color 'green', padding '12px 6px 0' }, label { color 'green', opacity '1' } }, customlanguages { en { fieldlabels { cardnumberlabel 'credit card number', expirydatelabel 'expiration date', cardverificationcodelabel 'cvc' }, fieldplaceholders { cardnumberplaceholder 'xxxx xxxx xxxx xxxx', expirydateplaceholder 'mm / yy ', cardverificationcodeplaceholder 'xxx' }, errors { generic 'sorry, an error has occurred ', cardholdernamerequired 'please enter a cardholder name', cardholdernametooshort "card name can't be less than 4 characters", cardholdernamespecialchars "card name can't contain numbers or special characters" } } } } } }