Card is not scrolling

[VenkatasaiCogent]

Describe the bug
A clear and concise description of what the bug is paymentElement is not scrolling in flutter web.

To Reproduce
Steps to reproduce the behavior:
1.add payment elemenmt in a singlechildscrollview.

Expected behavior
The card should scroll.

Smartphone / tablet

• Device: web
• OS: [e.g. iOS 13, Android 10]
• Package version: [e.g. 1.0.0]
• Flutter version [e.g. 2.0.0.]

Additional context
Add any other context about the problem here.

[remonh87]

This is standard Flutter behavior with embedded web frames. The Stripe element is not a Flutter widget. Do you have a usecase where you would want to make it scrollable?

[sanjay-mi]

Hello @remonh87

I am facing an issue due to paymentElement not scrolling in Mobile browser.

Please have a look at the attached video.

If the keyboard is open and tries to scroll the content by touching PaymentElement view then it showcases the white screen inshort it uses the Browser scroll. If I touch the parent view of PaymentElement and scroll the content then it scrolls properly.

This issue is generated with SingleChildScrollView and ListView too.

StripeFlutterWeb.mp4

[remonh87]

This is flutter specific behavior and little we can do here. Also the phone resolutions looks extremely small. The element does not scroll because it is a native element that we render in a platform view.

[batuhansseckin]

Same issue, do you have any solutions or suggestions regarding this issue? Specifically, is there a method we can follow to make the PaymentElement component scrollable?

[sanjay-mi]

@remonh87 If you believe this is a Flutter-specific behavior issue, could you please explain it in detail? Additionally, if you have an alternative solution, I would appreciate your guidance. I want to make this scrollable, as the current UX is not ideal for mobile users.

[VenkatasaiCogent]

Hiii Use Webstripe.instance.buildcard it worked for me .This will render a textfeild with card ,cvv,expiry date so all the feilds are combined to one textfeild . And make a seperate screen for this only. Thank you

…

On Mon, 10 Mar 2025, 11:51 am Sanjay Prajapati, ***@***.***> wrote: @remonh87 <https://github.com/remonh87> If you believe this is a Flutter-specific behavior issue, could you please explain it in detail? Additionally, if you have an alternative solution, I would appreciate your guidance. I want to make this scrollable, as the current UX is not ideal for mobile users. — Reply to this email directly, view it on GitHub <#2045 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BIHP5GSIGHYRBD6DNFFQOH32TUVQNAVCNFSM6AAAAABVQT7CC6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMBZGU2DSMZXGI> . You are receiving this because you authored the thread.Message ID: ***@***.***> [image: sanjay-mi]*sanjay-mi* left a comment (flutter-stripe/flutter_stripe#2045) <#2045 (comment)> @remonh87 <https://github.com/remonh87> If you believe this is a Flutter-specific behavior issue, could you please explain it in detail? Additionally, if you have an alternative solution, I would appreciate your guidance. I want to make this scrollable, as the current UX is not ideal for mobile users. — Reply to this email directly, view it on GitHub <#2045 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BIHP5GSIGHYRBD6DNFFQOH32TUVQNAVCNFSM6AAAAABVQT7CC6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMBZGU2DSMZXGI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system. If you are not the intended recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited.

[sanjay-mi]

@VenkatasaiCogent if possible, can you please share code snippet?

[VenkatasaiCogent]

@sanjay-mi here is the snippet

//required controller
CardEditController cardEditController = CardEditController(
initialDetails: const CardFieldInputDetails(
complete: false,
));
WebStripe webStripe = WebStripe.instance;
//snippet
webStripe.buildCard(
focusNode: cardFocusNode,
autofocus: false,
enablePostalCode: true,
controller: cardEditController,
),

you can use cardEditController.complete value to check the card details are entererd or not

Thankyou

[VenkatasaiCogent]

the above solution is not the completly solves the problem but forn extent this is fine

[sanjay-mi]

@VenkatasaiCogent I have used the below code. I don't understand how I can apply your solution? Can you please guide me.

`
16.heightBox
PaymentElement(
autofocus: false
enablePostalCode
onCardChanged:
clientSecret: widget.clientSecret
),
24.heightBox,

`

[VenkatasaiCogent]

@sanjay-mi remove the paymentElement and use buildCard simple

[VenkatasaiCogent]

@sanjay-mi

My usage

Container(
margin: const EdgeInsets.only(top: 5),
padding: const EdgeInsets.only(
left: 10, right: 10, top: 12, bottom: 17),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
),
borderRadius: BorderRadius.circular(5)),
child: webStripe.buildCard(
focusNode: cardFocusNode,
autofocus: false,
enablePostalCode: true,
controller: cardEditController,
),
),

made it in a separate screen contains only buildcard and a submit button so small UI no scroll

[VenkatasaiCogent]

@sanjay-mi Actually i kept in a dialog separatly