How to update reCAPTCHA V2 in BigCommerce Templates

How to Upgrade
To add reCAPTCHA v2 support to a theme, you will need to update script references in three template files:

• Create-Account Template
• Write-Review Template
• Contact-Us Template

According to the subsections below, replace each “before” code block with the corresponding “after” code.
View All Changes
You can see the complete set of updates in a diff view starting here.

Note: Updating Safely Please back up each template file before making any changes.

The instructions below are based on Stencil’s default Cornerstone theme. Your own HTML markup might vary, depending on customizations you have already made to this theme, or to other Marketplace themes.

Create-Account Template

In your theme’s templates/pages/auth/create-account.html template, make the changes shown below, based on this Cornerstone model:

Replace this (before):

{#if forms.create_account.recaptcha.enabled }}
<div class="panel">
<header class="panel-header">
<h3 class="panel-title">{{lang 'create_account.captcha_heading' }}</h3>
</header>
<div class="panel-body">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fwww.google.com%2Frecaptcha%2Fapi%2Fchallenge%3Fk%3D%7B%7Bforms.create_account.recaptcha.public_key%7D%7D%22%3E%20%20%20%20%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<noscript>
<iframe src="https://www.google.com/recaptcha/api/noscript?k={{forms.create_account.recaptcha.public_key}}" height="300" width="500" frameborder="0"></iframe>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
</div>
</div>
{{/if}}
…with this (after):
{{{ forms.create_account.recaptcha.markup}}}
Write-Review Template
 In your theme’s templates/components/products/modals/writeReview.html template, make the changes shown below, based on this Cornerstone model:
Replace this (before):
{{#if product.reviews.captcha}}
<header class="panel-header">
<h3 class="panel-title">{{lang 'products.reviews.captcha_heading' }}</h3>
</header>
<div class="panel-body">
<script type="text/javascript"
src="https://www.google.com/recaptcha/api/challenge?k={{product.reviews.captcha}}">
</script>    

<noscript>
<iframe src="https://www.google.com/recaptcha/api/noscript?k={{product.reviews.captcha}}"
height="300" width="500" frameborder="0"></iframe>
<br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
</div>
{{/if}}

…with this (after):
{{{product.reviews.recaptcha.markup}}}
Contact-Us Template
In your theme’s templates/components/page/contact-us-form.html template, make the changes shown below, based on this Cornerstone model:
Replace this (before):
{{#if forms.contact.recaptcha.enabled}}    

<div class="panel">
<header class="panel-header">
<h3 class="panel-title">{{lang 'forms.contact_us.captcha'}}</h3>
</header>    

<div class="panel-body">
<script type="text/javascript"
src="https://www.google.com/recaptcha/api/challenge?k={{forms.contact.recaptcha.public_key}}">
</script>    

<noscript>
<iframe src="https://www.google.com/recaptcha/api/noscript?k={{forms.contact.recaptcha.public_key}}" height="300" width="500" frameborder="0"></iframe>
<br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
</div>    

</div>
{{/if}}

…with this (after):
{{{forms.contact.recaptcha.markup}}}
For more detail on how to add reCAPTCHA v2 support to a theme
 Ask our BigCommerce Developer
To incorporate reCAPTCHA v2.0, you’ll need to update script references in these three template files:
Panels/CreateAccountForm.html
page_contact_form.html
product_comments.html
Note: Updating Safely Please take backup of all file before making any changes.
Following instructions are based on the default Blueprint theme, as it was last distributed in BigCommerce’s Theme Marketplace. Hence, the HTML markup will change, based on customizations you have made to this theme, or to other Marketplace themes.
Script Tag to Remove
Find each of the three template files for a <script> tag just like below. If you find it, delete the whole tag. (Because this script invokes a legacy reCAPTCHA v1.0 challenge:)
&amp;lt;script type="text/javascript"&amp;gt;
 var RecaptchaOptions = {
 theme : 'clean' or 'white'
 };
 &amp;lt;/script&amp;gt;
Variable to Remove
Alternately, you might see the same RecaptchaOptions variable inside a different <script> tag at the top of the same three templates. If so, delete the lines shown here:
var RecaptchaOptions = {
 theme : 'clean' or 'white'
 };

reCAPTCHA Script to Update
And next, in each of the three template files, replace the “before” code block just below with the simplified “after” code that follows.
Replace this (before):
&amp;lt;script type="text/javascript"
src="https://www.google.com/recaptcha/api/challenge?k=%%GLOBAL_ReCaptchaAPIKeyPublic%%"&amp;gt;
&amp;lt;/script&amp;gt;

&amp;lt;noscript&amp;gt;
&amp;lt;iframe src="https://www.google.com/recaptcha/api/noscript?k=%%GLOBAL_ReCaptchaAPIKeyPublic%%"
height="300" width="500" frameborder="0"&amp;gt;&amp;lt;/iframe&amp;gt;
&amp;lt;br&amp;gt;
&amp;lt;textarea name="recaptcha_challenge_field" rows="3" cols="40"&amp;gt;
&amp;lt;/textarea&amp;gt;
&amp;lt;input type="hidden" name="recaptcha_response_field"
value="manual_challenge"&amp;gt;
&amp;lt;/noscript&amp;gt;

…with this (after):
%%GLOBAL_ReCaptchaMarkup%%
For more detail on how to add reCAPTCHA v2 support to a theme
 Ask our BigCommerce Developer