CardFormField The number and cvc is null

[iHamza7]

Describe the bug
I am saving the card details I have my cloud functions running and tested there is no issue with that the bug is while entering all the fields for CardFormField the number and cvc is empty the main problem is I used the onCardchanged in both cases Cardfield and CardFormField its not update the state althrough reset is working mean the brand, last4, expiremonth etc . I am using bloc as my state management

if there is any alternate please let me know I am searching from almost 4 days tried everything every issue but nothing works

this is the log

[log] ================>>>>>>>> number is null
[log] ================>>>>>>>> cvc is null
[log] Starting to save card...
[log] ================>>>>>>>>CardFieldInputDetails(complete: true, last4: 4242, expiryMonth: 2, expiryYear: 2028, postalCode: 25000, brand: Visa, number: null, cvc: null, validExpiryDate: CardValidationState.Unknown, validCVC: CardValidationState.Unknown, validNumber: CardValidationState.Unknown)
[log] Error in saveCard: Null check operator used on a null value
[log] Finished saving card.

this is the complete code

class AddCardPage extends StatefulWidget {
final AddCardCubit cubit;

const AddCardPage({
super.key,
required this.cubit,
});

@OverRide
State createState() => _AddCardState();
}

class _AddCardState extends State {
AddCardCubit get cubit => widget.cubit;
@OverRide
void initState() {
cubit.navigator.context = context;
super.initState();
}

final CardFormEditController _cardFormEditController =
CardFormEditController();

void _onCardChange(CardFieldInputDetails? details) {
if (details != null) {
log("================>>>>>>>> Card Details Updated");
log("================>>>>>>>> number is ${details.number}");
log("================>>>>>>>> cvc is ${details.cvc}");
// You can update the UI or state here based on the details if necessary
}
}

@OverRide
Widget build(BuildContext context) {
return SafeArea(
child: BlocBuilder<AddCardCubit, AddCardState>(
bloc: cubit,
builder: (context, state) => Scaffold(
body: Padding(
padding: EdgeInsets.symmetric(horizontal: 20.h, vertical: 5.v),
child: ListView(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 20.v),
Text("Add card", style: theme.textTheme.headlineSmall),
SizedBox(height: 4.v),
Text(
"Rest easy! Your cards are securely saved with us, providing a worry-free and convenient payment experience.",
maxLines: 4,
overflow: TextOverflow.ellipsis,
style: CustomTextStyles.bodyMediumSecondaryContainer_1
.copyWith(height: 1.50),
),
SizedBox(height: 40.v),
CardFormField(
controller: _cardFormEditController,
onCardChanged: _onCardChange,
style: CardFormStyle(
cursorColor: theme.primaryColor,
borderRadius: 4,
borderColor: theme.colorScheme.onSurface,
borderWidth: 1,
backgroundColor: theme.colorScheme.surface,
textColor: theme.colorScheme.secondaryContainer,
placeholderColor: theme.colorScheme.primary),
)
])),
bottomNavigationBar: BlocBuilder<AddCardCubit, AddCardState>(
bloc: cubit,
builder: (context1, state) => CustomElevatedButton(
isLoading: state.isloading!,
text: "Continue",
margin: EdgeInsets.only(left: 18.h, right: 18.h, bottom: 34.v),
onPressed: () {
if (_cardFormEditController.details.complete) {
log("================>>>>>>>>${_cardFormEditController.context}");
log("================>>>>>>>>${_cardFormEditController.details}");
log("================>>>>>>>> number is ${_cardFormEditController.details.number}");
log("================>>>>>>>> cvc is ${_cardFormEditController.details.cvc}");
cubit.saveCard(context);
} else {
FlushbarDialogue().showErrorFlushbar(
context: context,
title: 'Invalid card',
body: 'Check all fields and try again');
}
},
),
),
),
),
);
}
}

Expected behavior
A clear and concise description of what you expected to happen.

Smartphone / tablet

• Device: [android 12]
• OS: [e.g. iOS 13, Android 12]
• Package version: [flutter_stripe: ^9.6.0]
• Flutter version [sdk: 3.5.3.]

Additional context
Add any other context about the problem here.

[remonh87]

What is the usecase between saving the card details? You can use Stripe customer + ephermal key to reuse previous payments. I assume that you know you have to be PCI compliant if you want to store credit card data

[iHamza7]

I am collecting the information to store in stripe.
This step is essential for securely tokenizing and storing the payment method on Stripe's servers. However, once the card information is securely stored, the user won't need to enter it again for future transactions, i know that and I am doing it right now but without card Number and CVC how can I do that ?