Payload Secure Input Bootstrap 4 Style

payload-secure-input-bs4.css

/*
   NOTE:
   You must also override the default invalid class in Javascript
   setting is to "is-invalid".
   
   pl.Form({
     form: document.getElementById('checkout-form'),
     styles: { invalid: 'is-invalid' }
   })
*/

.form-control.pl-input.pl-focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
  outline:none;
}

.form-control.pl-input.pl-focus.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25);
}