If you have any Stripe Web Widgets created prior to 12th September 2019, they will need to be updated to include the Strong Customer Authentication (SCA) compliance code. The following article provides the information and steps on how to do this. 

Note - these steps are not needed if you are using Campaign Donation Pages.
Any newly created Web Widgets after 12th September 2019 will automatically be compliant.

Making the Changes

To update your widgets to use Strong Customer Authentication they will need changing to use Stripe Elements 

This will require making some changes to the HTML of any Stripe web widgets you have - this is summarised below - also refer to steps 1 & 2 of the Stripe migration documentation for more details. 

You may want to create a copy of your widget and update the copy to use Stripe Elements. When you are happy with the changes you can then switch over to using the updated widget.

Edit the HTML of your Widget as follows

1. Update the references to Javascript files to the newer versions as follows

• Replace https://js.stripe.com/v2/ with https://js.stripe.com/v3/, for example, you may have a line like this 

<script type="text/javascript" src="https://js.stripe.com/v2/"></script> 

it will need changing to look like this

<script type="text/javascript" src="https://js.stripe.com/v3/"></script>

You need to replace https://az763204.vo.msecnd.net/wwjs/stripepayments_2016.10.js with https://az763204.vo.msecnd.net/wwjs/stripepayments_2019.7.1.js  Note your widget may use an older version of the stripe payment javascript file - e.g. stripepayments_2016.9.js

This 

<script type="text/javascript" src="https://az763204.vo.msecnd.net/wwjs/stripepayments_2016.10.js"></script>

needs replacing with this

<script type="text/javascript" src="https://az763204.vo.msecnd.net/wwjs/stripepayments_2019.7.1.js"></script>

2. Replace the inputs used for the card number, card expiry date, and cvc number - e.g. you might have inputs like this

<input type="text" class="required card-number numberOnly" data-stripe="number" id="CardNumber" maxlength="20">

<input type="text" size="2" id="ExpiryMonth"  name="ExpiryMonth" class="expiry-date numberOnly" data-stripe="exp-month" />
<input type="text" size="2" id="ExpiryYear" name="ExpiryYear" class="expiry-date numberOnly" data-stripe="exp-year" />

<input type="text" class="required check-cvc numberOnly" name="CVC" size="4" data-stripe="cvc" id="CVC" maxlength="4" title="Please enter the security code for the card - usually the last 3 digits on the signature strip">

These need to be changed to placeholder divs like this - Stripe will insert the inputs for the card number etc into these divs

<div id="card-number" class=""></div>

<div id="card-expiry" class=""></div>

<div id="card-cvc" class=""></div>

3. If you have a dropdown to choose the card type - similar to the example below - you should remove it

<label class="" for="CardType">Credit Card*</label>
<select name="CardType" class="" id="CardType">
<option value="VISA">Visa</option>
<option value="MC">MasterCard</option>
<option value="AMX">American Express</option>
</select>

4. Add an empty InitialiseForm function at the bottom of the widget - like the example below - this allows you to style the Stripe elements if needed - see this for more information

<script>
function InitialiseForm() {}
</script>

Testing Your Changes

Load the page containing your updated widget in your browser - you should find that the fields for card number, expiry date and CVC code have been inserted into your widget via Stripe Elements - you should then be able to put through a donation 

If the fields for card number etc do not look like the other fields on your form you need to

• Style the placeholder divs - e.g. adding a border, background color, etc, and/or 
• Use the InitialiseForm function to style them - see this for more information.

Troubleshooting

If you have problems with the widget please refer to this article.