canonical
[Component amendment]: <Define coexistence of Vanilla form inputs and Stripe Payment Element>
Component/pattern to amend
Form and card input field
Visual
- Figma design (Vanilla-based):
- How it currently looks when using Stripe components:
- Reference: how Stripe components are used in Pro shop billing page:
Context
On the new Single Payment Page, we use components from Vanilla. The design has now been handed over to development, and engineers are proposing to use Stripe’s Payment Element. "The Payment Element is a UI component for the web that accepts 40+ payment methods, validates input, and handles errors. Use it alone or with other elements in your web app’s front end."
Currently, our Pro shop billing page already relies on Stripe components to help card information input. To maintain consistency across Canonical products, we should decide how Vanilla and Stripe components should coexist.
For the new Single Payment Page, engineers propose to use Stripe components not only for card information input but also for all form input fields.
Open question / Proposal
- If we allow Stripe components to handle all inputs on payment pages, how should we approach consistency with Vanilla?
- Should we define guidance that Stripe is the default for payment-related inputs, while Vanilla is used elsewhere?
