#wulff-13

1 messages · Page 1 of 1 (latest)

cerulean nexusBOT
glass linden
#

Empty total label may be confusing the user
Where are you seeing this / how is that surfaced?

#

And what is your integration doing exactly?

worn vapor
#

I see it when I mount the payment elements on chrome in a phone preview

#

give me a sec

#

I will give you a screenshot of the error

glass linden
#

Can you share your code snippet of how you're using this?

worn vapor
#

I'm mounting it on the vue mount life cycle, and it has a v-show

#

so from the beginning it will not show but it is mounted

#

yes

# 
mounted() {
    if (this.total > 0) {
      this.initializeStripe();
    }
  },
  methods: {
    initializeStripe() {
      this.stripe = Stripe(this.stripePublicKey, {
        betas: ['elements_enable_deferred_intent_beta_1'],
      });

      const options = {
        mode: 'payment',
        amount: this.total,
        currency: Strings.lc(this.currency),
        appearance: Style,
      };

      // Set up Stripe.js and Elements to use in checkout form
      this.elements = this.stripe.elements(options);

      // Create and mount the Payment Element
      this.paymentElement = this.elements.create('payment', {
        layout: 'tabs',
        fields: {
          billingDetails: {
            name: 'never',
            email: 'never',
            phone: 'never',
            address: {
              line1: 'never',
              line2: 'never',
              city: 'never',
              postalCode: 'never',
              country: 'auto',
            },
          },
        },
        business: {
          name: this.businessName ?? '',
        },
      });
      this.paymentElement.addEventListener('change', (data) => {
        let mode;
        switch (data.value.type) {
          case 'apple_pay':
            mode = PaymentModes.APPLE_PAY;
            break;
          case 'google_pay':
            mode = PaymentModes.GOOGLE_PAY;
            break;
          case 'card':
            mode = PaymentModes.CREDIT_CARD;
            break;
          default:
            mode = PaymentModes.OTHER;
            break;
        }
        this.$emit('selectedPaymentMode', mode);
      });
      this.paymentElement.mount('#payment-element');
    }
# 
<template>
  <div>
    <nyx-card-toggle
      v-if="card"
      :value="isDefaultCardSelected ? 'saved-card' : 'other'"
      first-id="saved-card"
      second-id="other"
      first-title="Saved Card"
      second-title="Other"
      :first-icon="['fas', 'credit-card']"
      :second-icon="['fas', 'plus']"
      :disabled="disabled"
      @update:value="value => $emit('update:isDefaultCardSelected', value === 'saved-card')"
    />
    <div class="mt-3">
      <div
        v-if="card && isDefaultCardSelected"
      >
        <nyx-credit-card-badge
          :card="card"
        />
      </div>
      <div
        v-show="!card || !isDefaultCardSelected"
        id="payment-element"
      >
        <!-- Elements will create form elements here -->
      </div>
    </div>
  </div>
</template>
glass linden
#

We don't currently support Vue directly, but often there are issues with Vue and persistence of our hidden Stripe dependencies injected on the page

#

Which need to be managed explicitly so as not to be destroyed

#

Or you can leverage a community package like vue-stripe that handles that part

worn vapor
#

The weird thing is that it only happens in mobile browser

#

LIke dev mode -> mobile size

glass linden
#

I'd expect the amount to be managed for you based on the payment intent, so I can't say why that would be happening

worn vapor
#

Okay. I will take a look at this

#

Any idea why Google pay is not rendering on mobile?

#

It shows if I render in desktop mode, then toggle on mobile view, but if you refresh the page in mobile view, there is no Google Pay option inside elements

#

Pretty weird

glass linden
#

I don't know why that would be happening, no -- there could be an issue with the initialization flow

#

For us to investigate we'd need to be able to reproduce this reliable with a minimal example, preferably not using Vue adding complexity

#

IE, if you tried this using a basic html/js integration and saw the same behaviour, we could absolutely investigate

worn vapor
#

I understand