1. Home
  2. AccessAlly
  3. AccessAlly E-Commerce
  4. SCA Validation CSS – for “Advanced” Styling

SCA Validation CSS – for “Advanced” Styling

We no longer recommend that you use the Advanced styling option inside AccessAlly’s General Settings > Design area, since you must manually check for and update any CSS styling changes introduced with subsequent AccessAlly releases.

We are also unable to provide support for your custom CSS styling. (Instead, we recommend you use the Custom CSS box).

However, because of the importance of SCA compliance with your order forms, we are providing the necessary CSS for you to add in this case.

If you’re not using the Advanced styling option, you do not need to do anything. Updating AccessAlly to 3.2.0 will automatically take care of this for you.

What the SCA Validation Looks Like on an Order Form

When a credit card requires authentication, clicking on the “Pay Now” button (for Stripe integrations) will show the following popup:

Clicking on the “authenticate now” button takes the user to the required authentication page (Stripe takes care of this page and redirect as a part of their payment processing).

Once authenticated, the user will automatically be returned to the order form and see that their order has been completed successfully.

If the card is not able to be authenticated properly, the user will still be returned to the order form with the following error message:

CSS Code

Below you’ll find the CSS needed to show the popup and order list properly. Once again, you only need to add this CSS to AccessAlly > General Settings > Design IF you have decided to use the Advanced (developer only) design mode, as it does not inherit the CSS from your plugin updates.

/* ------------------------ SCA validation --------------------------- */
.accessally-order-form-cc-validate-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(80,80,80,0.5);
z-index:999999;
}
.accessally-order-form-cc-validate-content{
position:absolute;
top:30%;
left:50%;
margin-left:-150px;
width:300px;
background-color:#fefefe;
padding:20px;
text-align:center;
border:2px solid #00a5b3;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.accessally-order-form-cc-validate-message{
color: #9fa3a7;
font-weight:bold;
text-transform:uppercase;
}
.accessally-order-form-cc-validate-button{
display:inline-block;
height:60px;
border-radius:30px;
color:#ffffff;
margin-top:30px;
background-color:#00a5b3;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
line-height:60px;
min-width:150px;
text-align:center;
text-transform:uppercase;
font-weight:bold;
padding:0 30px;
cursor:pointer;
}
.accessally-order-form-cc-validate-button:hover{
opacity:0.5;
}
/* ------------------------ END SCA validation --------------------------- */


/* ------------------------ SCA validation --------------------------- */
.accessally-list-update-cc-validate-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(80,80,80,0.5);
z-index:9999999;
}
.accessally-list-update-cc-validate-content{
position:absolute;
top:30%;
left:50%;
margin-left:-150px;
width:300px;
background-color:#fefefe;
padding:20px;
text-align:center;
border:2px solid #00a5b3;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.accessally-list-update-cc-validate-message{
color: #9fa3a7;
font-weight:bold;
text-transform:uppercase;
}
.accessally-list-cc-validate-button{
display:inline-block;
height:60px;
border-radius:30px;
color:#ffffff;
margin-top:30px;
background-color:#00a5b3;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
line-height:60px;
min-width:150px;
text-align:center;
text-transform:uppercase;
font-weight:bold;
padding:0 30px;
cursor:pointer;
}
.accessally-list-cc-validate-button:hover{
opacity:0.5;
}
/* ------------------------ END SCA validation --------------------------- */

Updated on September 10, 2019

Was this article helpful?

Related Articles

NO QUESTION GOES UNANSWERED

If you have any questions, we're just an email away at your@accessally.com.

We take your success seriously, and you'll always get a speedy reply from a real person during business hours.

AccessAlly is the #1 WordPress Course and Membership Solution for Industry Leaders

WATCH THE DEMO

You'll get follow-up emails about AccessAlly and new features. Opt out anytime. Full privacy policy here.