[feature request] update sample app to use payment-element

[rgy-stripe]

Bug report Feature request

Currently, the sample app uses the card-element for the payment form/registration page:

        <div id="card-element">
          <!-- the card element will be mounted here -->
        </div>

fetch('/config')
  .then((resp) => resp.json())
  .then((resp) => {
    stripe = Stripe(resp.publishableKey);

    const elements = stripe.elements();
    cardElement = elements.create('card');
    cardElement.mount('#card-element');
  });

In the guide, we recommend using payment-element and present it as the default path. In our friction log, we tried to change it to use payment-element to get a nicer looking payment form page:

Had to rearrange code in a few different ways from sample app

• To get and use clientSecret
• To have const elements available outside of fetch statement
• Stripe is also instantiated only w/in fetch statement

But we ultimately had to give it up and revert to the card-element.

Ideally, this sample app would contain the payment element code.

Additional context

• Friction log
• Friction log fix tracking