ReCaptcha CSS not applied in Meteor

Question

I'm trying to insert the reCaptcha in a meteor Template.

The ReCaptcha works but it doesn't have any css styles and the configuration keys are not applied.

I've added the config script before the form:

<script type="text/javascript">
 var RecaptchaOptions = {
     theme : 'white',
     lang : 'en'
 };
</script>

and inside the form I added:

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcBoO8SAAAAAKNgu2AWLuAiqzgM0CSAywJJzCwU">
</script>
<noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LcBoO8SAAAAAKNgu2AWLuAiqzgM0CSAywJJzCwU"
                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>

Answer 1

I finally made the recaptcha show with CSS by using the recaptcha AJAX API. In the HTML template I added the following code in the form:

<div class="captcha-container">
    <div id="rendered-captcha-container"></div>
</div>

In the client.js file I loaded the script after the template is rendered. Waited for the script to load then created the recaptcha:

Template.myTemplate.rendered = function() {
     $.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js', function() {

        Recaptcha.create('add_your_public_key_here', 'rendered-captcha-container', {
            theme: 'red',
            callback: Recaptcha.focus_response_field
        });

    });    
}