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
<scripttype="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
<scripttype="text/javascript"src="https://az763204.vo.msecnd.net/wwjs/stripepayments_2016.10.js"></script>
needs replacing with this
<scripttype="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
<inputtype="text"class="required card-number numberOnly"data-stripe="number"id="CardNumber"maxlength="20">
<inputtype="text"size="2"id="ExpiryMonth" name="ExpiryMonth"class="expiry-date numberOnly"data-stripe="exp-month"/>
<inputtype="text"size="2"id="ExpiryYear"name="ExpiryYear"class="expiry-date numberOnly"data-stripe="exp-year"/>
<inputtype="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
<divid="card-number"class=""></div>
<divid="card-expiry"class=""></div>
<divid="card-cvc"class=""></div>
3. If you have a dropdown to choose the card type - similar to the example below - you should remove it
<labelclass=""for="CardType">Credit Card*</label>
<selectname="CardType"class=""id="CardType">
<optionvalue="VISA">Visa</option>
<optionvalue="MC">MasterCard</option>
<optionvalue="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.