bojack420

[sand matrix]

hello! can you share the relevant code snippets where you're creating and mounting the card elements

[loud mica]

Here is how i Mount it:

      this.cardElement.mount('#card-element');

      this.cardElement.on('change', (event) => {
        this.cardErrors = event.error ? event.error.message : '';
      });
      expressCheckoutElement.on('confirm', async (event) => {
        const billingDetails = event.billingDetails
        



        const {error, paymentIntent} = await this.stripe.confirmPayment({
          elements,
          clientSecret: this.clientSecret,
          redirect: "if_required",
          confirmParams: {
            return_url: 'https://example.com/order/123/complete',
          },
        });

This is how I add it in the modal:

              <% if @has_stripe_customer && @stripe_cards.any? %>
              <div class="form-group">
                <label for="payment_method">Select a card</label>
                <select id="payment_method" name="payment_method" class="form-control" @change="toggleNewCardForm">
                  <% @stripe_cards.each do |card| %>
                  <option value="<%= card.id %>">
                    <%= "#{card.card.brand.humanize} **** **** **** #{card.card.last4} (Exp: #{card.card.exp_month}/#{card.card.exp_year})" %>
                  </option>
                  <% end %>
                  <option value="new_card" id="new_card_option">Enter a new card</option>
                </select>
              </div>
              <% end %>
            </div>
            <div id="new_card_form" style="<%= 'display: none;' if @has_stripe_customer && @stripe_cards.any? %>">
              <div id="new_card">
                <div v-if="isMobile">

                  <label for="card-element">
                  Credit or debit card
                  </label>
                    <div id="card-element">
                      <!-- A Stripe Element will be inserted here. -->
                    </div>
                </div>
                <!-- Used to display Element errors. -->
                <div id="card-errors" role="alert"></div>
              </div>
            </div>
          </div>
          <!-- CARD DETAILS - END -->

I can get it to work when i just load it in the page normally however with this code:

which is pretty much the exact same:

          <!-- CARD DETAILS - START -->
          <div v-if="!isMobile" class="mt-5 card-details" >
              <div  id="cardDetails">
              <h2 class="mb-4">CARD DETAILS</h2>

              <% if @has_stripe_customer && @stripe_cards.any? %>
                <div class="form-group">
                  <label for="payment_method">Select a card</label>
                  <select id="payment_method" name="payment_method" class="form-control" @change="toggleNewCardForm">
                    <% @stripe_cards.each do |card| %>
                      <option value="<%= card.id %>">
                        <%= "#{card.card.brand.humanize} **** **** **** #{card.card.last4} (Exp: #{card.card.exp_month}/#{card.card.exp_year})" %>

                      </option>
                    <% end %>
                    <option value="new_card" id="new_card_option">Enter a new card</option>
                  </select>
                </div>
              <% end %>
            </div>


            <div id="new_card_form" style="<%= 'display: none;' if @has_stripe_customer && @stripe_cards.any? %>">
              <div id="new_card">
                <label for="card-element">
                  Credit or debit card
                </label>
                <div v-if="!isMobile">
                  <div id="card-element">
                  <!-- A Stripe Element will be inserted here. -->
                  </div>
                </div>

                <!-- Used to display Element errors. -->
                <div id="card-errors" role="alert"></div>
              </div>

            </div>
          </div>
          <!-- CARD DETAILS - END -->

I know its not my if statement thats incorrect as the label shows up

I dont think its a mounting issue as it works when its not in a modal

[wispy ember]

Yes probably because when you "mount" it, the HTML isn't existed yet to be mounted