Stripe wrongfully showing 0,00 amount to be charged

Hello,

I'm using a Vue-powered payment form built with simple Stripe Elements, where the users are subscribing to a paid yearly plan. The payments are successfully made, but the main problem is that during the 3D Secure payment process (we are operating in Europe, where 3DS payment checks are mandatory), the amount that is shown to the user is 0,00. Which is not only incorrect, but more importantly, confusing to the person about to making the payment.

As I described it in the image below, I am suspecting that this is happening because the credit card is first verified and "set up" on Stripe's end (an operation that apparently charges the card a "null" value), and then, subsequently, it will actually charge the amount we set up as the service's price. To our users, this is confusing and misleading.

Here's my subscribeNow() method, which will run when a "Pay Now" button is clicked.

subscribeNow() {
  // ... some form validation logic...
  
  let _this = this;
  
  // Create a hashed Stripe token from the CardNumber Element
  _this.stripe.createToken(_this.cardNumber, {
    // ...
  })
  .then(function (result) {
    if( result.token ) { // we have a token, try to confirm setting up the card on Stripe
      //console.log('result.token = ', result.token); // OKAY !!!
      
      _this.stripe.confirmCardSetup(
        _this.intentToken.client_secret,
        {
          payment_method: {
            card: _this.cardNumber, // YES, the CardNumber Element CAN BE used in here
            
            billing_details: {
              name: _this.name, // filled up by the user
              email: _this.email, // filled up by the user
              phone: _this.phone, // filled up by the user
            }
          }
        }
      )
      .then(function (result) {
        // console.log('Result of stripe.confirmCardSetup(): ', result); // OKAY!!!
        
        // If NO setup intent was returned (pga card rejected osv)...
        if( undefined === result.setupIntent ) {
          // console.log('OnboardingStripeForm.vue > subscribeNow() method: CardSetup response: FAILED!!!');
          
          // ... some notification by using [result.error.message] incoming from Stripe 
          
          return; // exit method
        } // undefined === result.setupIntent
        
        // Otherwise, i.e. the setup intent was successful...
        if( "succeeded" === result.setupIntent.status ) {
          // console.log('OnboardingStripeForm.vue > subscribeNow() method: CardSetup response: SUCCESS!!!');
          
          _this.paymentMethods['default'] = result.setupIntent.payment_method;
          _this.paymentMethodSelected = _this.paymentMethods['default'];
          
          /**
           * Send an async (AXIOS-powered) request to the API to create a new subscription.
           * This in turn will run a method in PaymentController.php, which will simply 
           * make use of the Stripe method $user->newSubscription()->create()
           */
          _this.createNewSubscription();
          
          // Clear out card data
          _this.name = _this.email = _this.phone = '';
          _this.cardNumber.clear();
          _this.cardExpiry.clear();
          _this.cardCvc.clear();
          
        } else { // "succeeded" !== result.setupIntent.status
          // console.log('OnboardingStripeForm.vue > subscribeNow() method: CardSetup response: FAILED!!!');
        } // "succeeded" === result.setupIntent.status
      }.bind(this));
    } else if( result.error ) {
      // console.log('Error in subscribeNow() method: Stripe token NOT created: ', result.error);
      
      // ... some notification by using [result.error.message] incoming from Stripe 
    }
  }.bind(this));
},

Any idea on how to make the actual amount to be charged, visible to the user, during the 3DS screen?

Many thanks.