[Feature] Allow more detailed customisation in `STPCardFormView`

[le-tyang]

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

We are looking at to build a component which allows user to enter credit card details in a form like way. 😉 not the STPPaymentCardTextField. We looked into STPCardFormView and found out it can support most of our requirements. Until we want to start doing customisation.

Few things we were hoping that this component can support:

• Hide billing address fields
• Enable card scanning
• Be able to change font color
• Be able to adjust spacing between fields.

But due to STPCardFormView only expose init(style:) constructor as public, there is not much we can do :(

Describe the solution you'd like

We went through the source code for STPCardFormView, and found out most items in our wanted list are already supported, just not exposed for public usage.

Would be good if we can make these constructors public, so we can start customising it. Constructors include:

convenience init(
        billingAddressCollection: PaymentSheet.BillingAddressCollectionLevel,
        includeCardScanning: Bool = true,
        mergeBillingFields: Bool = false,
        style: STPCardFormViewStyle = .standard,
        postalCodeRequirement: STPPostalCodeRequirement = .standard,
        prefillDetails: PrefillDetails? = nil,
        inputMode: STPCardNumberInputTextField.InputMode = .standard
    )

    required init(numberField: STPCardNumberInputTextField,
                  cvcField: STPCardCVCInputTextField,
                  expiryField: STPCardExpiryInputTextField,
                  billingAddressSubForm: BillingAddressSubForm,
                  includeCardScanning: Bool,
                  mergeBillingFields: Bool,
                  style: STPCardFormViewStyle = .standard,
                  postalCodeRequirement: STPPostalCodeRequirement = .standard,
                  prefillDetails: PrefillDetails? = nil,
                  inputMode: STPCardNumberInputTextField.InputMode = .standard
    )

Describe alternatives you've considered

We also looked into PaymentSheet as what we actually wanted is just like how this component looks like in PaymentSheet.

But due to UX preference and our user flow definition, we can't use a bottom sheet for this feature.

And, we also considered forking the SDK, but I guess no one likes that idea 😉

Additional context

We've attached screenshots in above description.

[yuki-stripe]

Hello @le-tyang,

Thank you for the detailed ticket. I've added this to our internal tracker, but note that feature development on CardFormView isn't on our immediate roadmap.

But due to UX preference and our user flow definition, we can't use a bottom sheet for this feature.

We're super focused on getting PaymentSheet to support more use cases and customization, however - so we'd love to hear more about how we could support you. Feel free to send me an email ([email protected]) if you don't want to share publicly.

[le-tyang]

Hello @le-tyang,

Thank you for the detailed ticket. I've added this to our internal tracker, but note that feature development on CardFormView isn't on our immediate roadmap.

But due to UX preference and our user flow definition, we can't use a bottom sheet for this feature.

We're super focused on getting PaymentSheet to support more use cases and customization, however - so we'd love to hear more about how we could support you. Feel free to send me an email ([email protected]) if you don't want to share publicly.

Thanks @yuki-stripe !

Since we want to support other payment gateway/provider as well in our app, we would like to provide a similar but also can be customised flow for user who want to add a credit card.

The PaymentSheet is indeed powerful and pretty, but unfortunately it does not fit into the user flow we are designed right now.

Having the ability to separate the card form from the PaymentSheet and being able to customise it, so we can be using the good card validation from this SDK can be super helpful for us.

I know this question is probably too much to ask, but possible for us to get a rough estimation on whether or when may this be available in SDK? That would be again helpful for us to make a decision.

Thanks!!!

[yuki-stripe]

I see 👍 - unfortunately I don't have a timeline to share for CardFormView customization.

[dqii]

Is there any updated timeline on this?

[bhayatus]

Would love an update on this if possible.

[dqii]

@yuki-stripe just checking if this feature is on any roadmap?

[mikeandike]

Yes i agree that this is an important feature to add. Especially in order to allow iOS and Android to be similar. Android has CardMultilineWidget and there is no iOS equivalent

[remonh87]

Also on Android it is possible to supply a country code that makes sure you can prefill the localisation and country for the user. Would be great if you can take it along with this.

[sfriedman-stripe]

Hi all! We will not be adding further functionality to STPCardFormView or STPPaymentCardTextField. We encourage you to check out our modern replacement, the Mobile Payment Element, and send us any feedback you have! Thank you

[remonh87]

@sfriedman-stripe good to know will this element considered to be deprecated? Reason I ask is that we will follow your direction when it comes to our Flutter lib