Subscription trial manages the same way Checkout does

[Aximem]

Is your feature request related to a problem? Please describe.

We use Stripe to offer a subscription to our customers with a 14 days free trial.

On our Web App, we use Stripe Checkout to perform subscription and everything is fine, the UX is good and customers understand that there are subscribing to a monthly (or yearly subscription) and they are not charged until the 14 days are passed.

On the React Native App, with stripe-react-native lib, this is more complicated. We couldn't find a way to provide the same UX as Stripe Checkout and customer is getting lost on process, or solution is not viable for us.

Here is the simple case, a subscription without free trial, everything is fine, customer sees the price and pays for it:

We are able to perform this render with following code on our NodeJS Backend App:

const subscription = await stripe.subscriptions.create({
      customer: customer.id,
      items: [
        {
          price: 'price_XXX',
        },
      ],
      payment_behavior: 'default_incomplete',
      payment_settings: {save_default_payment_method: 'on_subscription'},
      expand: ['latest_invoice.confirmation_secret'],
    });

Now if we want to add a 14 days free trial, we add trial_period_days prop:

const subscription = await stripe.subscriptions.create({
      customer: customer.id,
      items: [
        {
          price: 'price_XXX',
        },
      ],
      payment_behavior: 'default_incomplete',
      payment_settings: {save_default_payment_method: 'on_subscription'},
      expand: ['latest_invoice.confirmation_secret'],
      trial_period_days: 14, <===========================
    });

Problem: Since this is a free trial, Stripe considers that payment informations are not required and automatically validates the subscription, no paymentIntent is generated. For us this a "churn" issue because I can't imagine customer setting their payment informations after been already subscribed.

This issue has already been mentioned here #1509 and here #1523 .

The solution gave in the previous issues is to ask customer payment informations before subscription and this is where we have a UX problem.

We generate a setupIntent:

const setupIntent = await stripe.setupIntents.create({
      customer: customer.id,
});

And this is what we get in React Native App:

After customer has set his payment informations we can generate and activate the subscription.
The problem here is this "Setup" modal where customer has no information about the further price and the free trial. And of course, in Apple Pay, there is this "Pending amount" which can be very scary. I don't see myself subscribe to a "Pending amount" subscription.

Maybe we have not find the right process but we couldn't find a way to perform the same process as Stripe Checkout.

Describe the solution you'd like

We would like the same experience as Stripe Checkout in terms of UX:

These screens are from Stripe Checkout which we are using right now in Web App and React Native App (until we find a better approach).

As you can see, all informations are here, "Start Trial" then "$X.XX per month", same on Apple Pay render.
We would like to offer the same UX with stripe-react-native, so customer understand what he is subscribing for and everything without leaving the application.

Describe alternatives you've considered
Same UX as Stripe Checkout for Subscription with free trial

Additional context
/