Meteor Template Helpers causing a Client-side Stripe Elements error

Question

I've been trying to add Stripe Elements (v3) for a subscription form on Meteor.

I've managed to get it up and running and can successfully create a subscription, but only when there are no Template helpers on the page.

Weirdly, as soon as I add Template helpers, I get an error:

"IntegrationError: The selector you specified (#card-element) applies to no DOM elements that are currently on the page. Make sure the element exists on the page before calling mount()."

Here is the JS code:

Template.admin.onRendered(() => {

    const stripe = Stripe('pk_test_xxxxxx');
    const elements = stripe.elements();
    const form = document.getElementById('subscription-form');
    const displayError = document.getElementById('card-errors');
    const cardElement = elements.create("card");

    cardElement.mount("#card-element");

    cardElement.addEventListener('change', ({error}) => {
      if (error) {
        displayError.textContent = error.message;
      } else {
        displayError.textContent = '';
      }
    });

  [....]
};

Here is the HTML code (with Template Helpers):

<template name="admin">
  <center>
    {{#if currentUser}}
      {{#if isAdmin}}

      <form id="subscription-form">
        <label for="card-element">Credit or debit card</label>
          <div id="card-element" class="MyCardElement">
            <!-- Elements will create input elements here -->
          </div>

          <div id="card-errors" role="alert">
            <!-- We'll put the error messages in this element -->
          </div>
        <button type="submit">Subscribe</button>
      </form> 

    {{/if}}
  {{else}}
    {{> login}}
  {{/if}}
</center></template>

Anyone have any suggestions why that might be?

TIA!

Answer 1

I'm just guessing here, but in the case where isAdmin is false, you're not rendering the #card-element tag, but you're still running that code, so maybe it should live inside an if (isAdmin) {} block?