You can add styling to the inputs when passing the options argument to customcheckout.create().

// Styles to be applied to the text rendered in the iframevarstyle={error:{color:'red',':focus':{fontStyle:'italic',},},};// Classes to be applied to the element wrapping the iframevarclasses={error:'my-error-class',};varoptions={placeholder:'Card number',style:style,classes:classes,brands:['visa','mastercard'],};varcardNumber=customCheckout.create('card-number',options);

Third, add an event listener so that you can handle validation errors.

customCheckout.on('error',function(event){if(event.field==='card-number'){console.log('Card number has errors: '+JSON.stringify(event));}elseif(event.field==='cvv'){console.log('CVV has errors: '+JSON.stringify(event));}elseif(event.field==='expiry'){console.log('Expiry has errors: '+JSON.stringify(event));}});customCheckout.on('complete',function(event){if(event.field==='card-number'){console.log('Card number is complete: '+JSON.stringify(event));}elseif(event.field==='cvv'){console.log('CVV is complete: '+JSON.stringify(event));}elseif(event.field==='expiry'){console.log('Expiry is complete: '+JSON.stringify(event));}});

Step 2: Create a token

You request a token for the card data in the Custom Checkout text inputs at any time using customCheckout.createToken. It will only return a token if the card data is valid, otherwise it will return an error.

Step 3: Create a payment

Once you have a token representing credit card data, the next step is to pass to one of our APIs via your server. You can either pass it to the Payment API to create a payment immediately, or pass it to the Payment Profile API to save the card data for future payments.

You can find out more about getting up-and-running with our APIs here.