Activating the 3D Secure checkout process for Strong Customer Authentication (SCA)

For MM 2.4.0+ , 3D Secure 2.0 is enabled for Stripe and Braintree by default.

For those merchants who are located in the European Economic Area (EEA) and who sell to customers also located in the EEA, this allows you to meet the Strong Customer Authentication (SCA) requirement set out by the Revised Payment Services Directive (PSD2). This will go into effect on September 14, 2019. Offsite payment processors, such as PayPal, take you offsite and provide their own process for SCA compliance.

Why enable a 3D Secure checkout?

This is mandatory for customers in the European Economic Area (EEA) in order to be compliant with the Strong Customer Authentication (SCA) requirement of the PSD2. If you are attempting EEA to EEA, one-time or initial purchases through your checkout and this is not enabled, the transaction will likely not be authorized by your customer's bank.

When enabled, your customer will be asked to complete an extra step at checkout where they are prompted by their bank to provide additional information (such as, a one-time code sent to their phone) before the payment will be processed. The credit card fields to input payment information appear on your checkout page but are embedded from Stripe or Braintree (via iFrame). As a result merchants may qualify for a less rigorous PCI-DSS SAQ by enabling the 3D Secure checkout (SAQ A-EP/A vs SAQ D).

For merchants located outside the EEA, it will also benefit you to activate this feature and we highly recommend it. It can help increase security for your customers, cut down on fraudulent charges and may qualify you for a less rigorous PCI-DSS SAQ by enabling the 3D Secure checkout (SAQ A-EP/A vs SAQ D).

It is worth noting that fixed recurring subscriptions and transactions are exempted from the SCA regulation. As long as the payment amount remains the same, future transactions will not need SCA. If the payment amount changes, then the extra SCA authentication will be necessary. This also applies retroactively to any recurring subscriptions that were created prior to September 14, 2019.

Some other notable exemptions are : Merchant-Initiated Transactions (payments made with saved cards) and Transactions below €30

IMPORTANT: Stripe.js and Stripe Elements can only be used at checkout.  Any API transactions are untokenized and this practice results in higher PCI compliance SAQ requirements. See the CreateMember API Call article for more info.

Enabling Stripe Elements (Stripe)

Follow this process if you already have Stripe configured on your site and simply want to enable Stripe Elements. 

If you need to configure Stripe, please refer to this article for complete configuration instructions.

1. From your WordPress Dashboard go to MemberMouse > Payment Settings and click on the Payment Methods tab. Under Onsite Payment Method, select Stripe. This will display the Stripe configuration options.
   
   
2.  Select the checkbox next to ‘Enable Stripe Elements'.
   
   
3. Click the Save Payment Methods button.

Enabling 3D Secure 2.0 (Braintree)

Follow this process if you already have Braintree configured on your site and simply want to enable 3D Secure 2. 

If you need to configure Braintree, please refer to this article about configuring Braintree.

1. From your WordPress Dashboard go to MemberMouse > Payment Settings and click on the Payment Methods tab.
   
   
2. Under Onsite Payment Method, select Braintree. This will display the Braintree configuration options.
   
   
3.  Select the checkbox next to ‘Enable Hosted Fields / 3D Secure 2'.
   
   
   
   
4. Click the Save Payment Methods button

Testing the 3D Secure Checkout

Both Stripe and Braintree have created specific test data for testing payments where Strong Customer Authentication is required. You can find that information as well as general details about the testing process for each payment provider in the below articles.

Testing with Stripe

Testing with Braintree

Formatting the Checkout

Since 3D Secure fields are embedded on your checkout page via iFrame from your chosen payment vendor, your site's CSS styles (font, field height and width, etc) will not apply to these fields.  Instead, any styling must be applied to the containers (divs) that each field is loaded into.  

MemberMouse has applied some CSS to make the field styling as compatible as possible with multiple themes and browsers, but there will be differences. So, we suggest reviewing your site's checkout forms, and adjusting any styles you find necessary.  

We have included some basic instructions to assist you in adjusting those styles that can be adjusted and will be different in all checkouts. If you need assistance with further adjustments and do not have a designer or developer available, we have a list of Qualified Contractors who have experience working with MemberMouse.

Locating Styles

We are including some basic instructions on locating the field classes, as well as any styles already in place, and how to add new styles of your own.  All of the instructions here are for the Chrome desktop browser.  Most other major browsers have similar tools that can be used to achieve the same results.

1. In your browser window, right click the element on the checkout page you want to locate the style for, and cIlick ‘Inspect' at the bottom of the menu to open the Inspector.  The email field works well for text field styles.

2. When the inspector opens, you will see several sections (your layout may look different).

I. The HTML code for the element you right clicked will be highlighted in the inspector.

II. The styles that are active on that element will be displayed in bright colors.

There are three sections to CSS rules.

selector {style:value}

Each rule starts with the selector the rule applies to. For more information, see this article on CSS Selectors.

– Element types like input, p, button will be listed in plain text. Styles applied to an element type will apply to any matching element on the page.

– Classes will be preceded by a period (.). Styles applied to classes will also be applied to any element that has that class added to it.

– IDs will be preceded by a hash (#).  The ID for each element should be unique, so styles applied to an ID will only apply to that instance of that element.

Then, in curly brackets, you will see the style type followed by a colon and the style value.

For example, all input elements on this page will have a border that is 2 pixels wide, solid, with a color hex of #d4d0ba.

In the upper right of this section, you will see the file or location the CSS was loaded from.

III. Styles can be overridden by CSS rules loaded later in the page. Styles that would have been applied, but were overridden, will appear in strikeout text.

IV. This section shows computed styles. It is very detailed, so it can be difficult to extract what you are looking for. But, if you can't find the applied style in the first section, this is another way to locate the active style for an element.

Changing Styles

Once located, you can add any CSS style rules to the Additional CSS box of your theme located in WordPress > Appearance > Customize > Additional CSS. The rules listed below will cover most of the style differences that you might see between the hosted fields and the other fields on your checkout page.  Once you have located the style value for the type of element you want to mimic, you can use them to adjust the rules below so that the hosted fields will better match with the other styles on your page. 

Field Size

MemberMouse has included CSS to match the height and width as closely as possible to the field size in most themes, but if you find the size doesn't work for your theme, you can adjust them using the rules below to better fit.

Height – Determines how tall an element is. Can be listed in multiple measurement types.  See the linked article for more information.

This will set the height of the fields to 2.5 times the page's font size, which is used as the basic unit of measurement in CSS. You can set the value higher or lower to make the field taller or shorter, or you can change the type of measurement used.

.StripeElement, .mm-braintree-hosted-field {height: 2.5em;}

Width – Determines how wide an element is. Can be listed in multiple measurement types.  See the linked article for more information.  Since the input fields hold different types of information, you may want them to be different widths, so the rules for width target each field type individually.

This will set the width of the credit card fields as a percentage of the parent element (Billing Details container). You can set the value higher or lower to make the field wider or narrower, or you can change the type of measurement used.

##mm_braintree_cc_number, #mm_field_cc_number_div {width: 50%;}

This rule sets the width for the CVV and Expiration text fields as a percentage of the parent element (Billing Details container).

#mm_braintree_cc_cvv, #mm_field_cc_cvv_div, #mm_field_cc_exp_div {width: 25%;}

This will set the with for the credit card expiration month and year dropdown selectors in Braintree as a percentage of the parent element (Billing Details container).

#mm_braintree_cc_exp_month, #mm_braintree_cc_exp_year {width: 25%;}

Border

MemberMouse includes a basic border for some fields. You can modify the rule below with values from any of the MemberMouse text input fields to change the hosted fields to match your theme.

Border – The border property is shorthand for the border-width, border-style, and border-color properties.  If your theme has them listed separately, you can combine them into a single rule to apply them to the hosted fields.

This rule will apply a 2 pixel, dotted border with a color value of #d55c9f.

.StripeElement, #mm_braintree_cc_number, #mm_braintree_cc_cvv {border: 2px dotted #d55c9f;}

Box Styling

The browser stylesheet for the border-radius and box-shadow properties tend to change between desktop and mobile devices.  You may want to view your page in different browsers and devices to decide if you want to set these styles explicitly to match your theme (if present), or one of the browser types.

You can use the following CSS in the Additional CSS box of your theme (WordPress > Appearance > Customize > Additional CSS) to set these characteristics on the MemberMouse input and embedded payment fields. For detailed instructions on any property, click the linked property name.

Border Radius – sets the curve of the field corners. Only applies to fields with set borders.

For rounded borders.  Increase the pixel size for larger curves, decrease for more pointed corners.:

.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {border-radius: 5px;}

To remove the border element on all fields:

.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {border-radius: none;}

Box Shadow – Adds a shadow to an element.  Can be set to any direction, inside or out.

This will set a slight dark grey shadow to the bottom and slightly to the right.  

The first number is the vertical align.  Make the number higher to move the farther to the right, or negative to the left.  

The second number is the horizontal align. Higher numbers move it farther down, negative numbers move it above the box.  

The third number is the blur. Higher numbers will make the shadow appear less sharp.  

The last set is the color.  You can use the HTML Colors page for information on more options.  Adding ‘inset' after the color set will make the shadow appear inside the box instead of out.

.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {box-shadow: 1px 1px 5px rgb(120,120,120);}

This will remove the shadow from all fields

.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {none;}

Fonts

By their nature, font styles cannot be applied to the div containers, meaning that the font family, size, and other characteristics cannot be altered in the Stripe/Braintree fields.  Both the Stripe and Braintree fields pull the property values from the browser it is being displayed on, and these properties tend to be fairly consistent. If your theme's font is very different, in order to get the font on your checkout page to match throughout, you may want to consider adding custom rules to change your theme's font on that page to better match the embedded fields instead.

Font – Sets properties like font weight, font size, and font family.

This will match your MemberMouse Checkout page's font to the average browser's properties.  The first value is weight, larger numbers will make the font thicker.  The second is size, and the third is the font family.:

.mm-textField, .mm-selectList {font: 400 13px sans-serif;}