How to update reCAPTCHA V2 in BigCommerce Templates

recaptcha-v2

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="&lt;script&gt;" title="&lt;script&gt;" />    
<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:)

 
<script type="text/javascript"> 
 var RecaptchaOptions = { 
 theme : 'clean' or 'white' 
 }; 
 </script> 

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):

 
<script type="text/javascript"
src="https://www.google.com/recaptcha/api/challenge?k=%%GLOBAL_ReCaptchaAPIKeyPublic%%">
</script>

<noscript>
<iframe src="https://www.google.com/recaptcha/api/noscript?k=%%GLOBAL_ReCaptchaAPIKeyPublic%%"
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>

…with this (after):

%%GLOBAL_ReCaptchaMarkup%%

For more detail on how to add reCAPTCHA v2 support to a theme
Ask our BigCommerce Developer

About the Author

Minank Mori

Minank Mori

Technical Lead at PSDCenter, he would like to get the challenge from the field of Computer Application and Information Technology to make himself best in this field.

View All Posts