Flutter stripe_checkout Payment Method Exception - flutter

Question

I'm using Flutter stripe_checkout: ^1.0.0 and saw some odd behaviour.
When the checkout button is clicked just once, the screen would turn blank with the following printout. On Stripe dashboard, it says, "Incomplete - The customer has not entered their payment method'.
I/flutter (32631): Checkout session id cs_test_a10k5Lsopaz9JupfebE9pW77ZgUpucfzCrh1WTKX9KcApdbKztnZiz1SKe
I/WebViewFactory(32631): Loading com.google.android.webview version 83.0.4103.106 (code 410410681)
I/cr_VariationsUtils(32631): Requesting new seed from IVariationsSeedServer
I/cr_LibraryLoader(32631): Loaded native library version number "83.0.4103.106"
I/cr_CachingUmaRecorder(32631): Flushed 3 samples from 3 histograms.
I/TetheringManager(32631): registerTetheringEventCallback:com.healthcare.jaaba
W/GooglePlayServicesUtil(32631): Google Play Store is missing.
W/GooglePlayServicesUtil(32631): Google Play Store is missing.
W/GooglePlayServicesUtil(32631): Google Play Store is missing.
W/GooglePlayServicesUtil(32631): Google Play Store is missing.
E/cr_PlatformSer-Internal(32631): UsageReporting query failed
W/ealthcare.jaab(32631): Accessing hidden method Landroid/media/AudioManager;->getOutputLatency(I)I (greylist, reflection, allowed)
D/HostConnection(32631): HostConnection::get() New Host Connection established 0xf4e7e280, tid 752
E/cr_PlatformSer-Internal(32631): Unable to determine Safe Browsing user opt-in preference
D/HostConnection(32631): HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_native_sync_v2 ANDROID_EMU_native_sync_v3 ANDROID_EMU_native_sync_v4 ANDROID_EMU_dma_v1 ANDROID_EMU_direct_mem ANDROID_EMU_host_composition_v1 ANDROID_EMU_host_composition_v2 ANDROID_EMU_YUV_Cache ANDROID_EMU_has_shared_slots_host_memory_allocator ANDROID_EMU_sync_buffer_data ANDROID_EMU_read_color_buffer_dma GL_OES_EGL_image_external_essl3 GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_host_side_tracing ANDROID_EMU_gles_max_version_3_0
D/EGL_emulation(32631): eglCreateContext: 0xf4e7c140: maj 3 min 0 rcv 3
D/EGL_emulation(32631): eglMakeCurrent: 0xf4e7c140: ver 3 0 (tinfo 0xaf33b210) (first time)
D/EGL_emulation(32631): eglMakeCurrent: 0xf4e60d10: ver 3 0 (tinfo 0xf51b1d50) (first time)
W/Gralloc4(32631): allocator 3.x is not supported
I/VideoCapabilities(32631): Unsupported profile 4 for video/mp4v-es
W/cr_MediaCodecUtil(32631): HW encoder for video/avc is not available on this device.
D/EGL_emulation(32631): eglCreateContext: 0xf4e7f1d0: maj 3 min 0 rcv 3
I/ealthcare.jaab(32631): NativeAlloc concurrent copying GC freed 50165(3378KB) AllocSpace objects, 15(428KB) LOS objects, 49% free, 3769KB/7539KB, paused 2.245ms total 147.024ms
W/ealthcare.jaab(32631): Reducing the number of considered missed Gc histogram windows from 124 to 100
I/chromium(32631): [INFO:CONSOLE(1)] "Unrecognized feature: 'payment'.", source: https://js.stripe.com/v3/ (1)
However, when the checkout button is clicked 3 - 5 times continuously, the card form appears and the payment would be successful.
I/flutter (32631): Checkout session id cs_test_a1ZwZrvL4812TEpjFwQ649RMYjirJr9TMwQVZ29JYrjGj54gmqkCtTyfTW
I/flutter (32631): Checkout session id cs_test_a13D23W9EY1SgLBqYIZLAHTvFBcHKY1wUIiZdr3Kb6XPNsrrLEfj3KJjkj
I/ealthcare.jaab(32631): NativeAlloc concurrent copying GC freed 7125(419KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 3431KB/6863KB, paused 1.352ms total 189.441ms
I/chromium(32631): [INFO:CONSOLE(1)] "Unrecognized feature: 'payment'.", source: https://js.stripe.com/v3/ (1)
I/chromium(32631): [INFO:CONSOLE(1)] "Unrecognized feature: 'payment'.", source: https://js.stripe.com/v3/ (1)
I/flutter (32631): Checkout session id cs_test_a1QsxT2t7H68MpvgLinDukwOBzwW1W21ktnbQdqB25R6t2b0TE5mO4u9jj
I/flutter (32631): Checkout session id cs_test_a1o2VPwBSq0RRW6PlSKnGr554hoWFIOrPy1NZWnLveMqAZyLX6iVYKFr0y
I/chromium(32631): [INFO:CONSOLE(1)] "Unrecognized feature: 'payment'.", source: https://js.stripe.com/v3/ (1)
I/chromium(32631): [INFO:CONSOLE(1)] "Unrecognized feature: 'payment'.", source: https://js.stripe.com/v3/ (1)
I/flutter (32631): Checkout session id cs_test_a1uWleO9v9VAwUAra957z8uHbpOwNyp24nZYgAQ2aOLHqwt3hBcOtAg8Yf
I/chromium(32631): [INFO:CONSOLE(1)] "Unrecognized feature: 'payment'.", source: https://js.stripe.com/v3/ (1)
I/chromium(32631): [INFO:CONSOLE(1)] "Unrecognized feature: 'payment'.", source: https://js.stripe.com/v3/ (1)
I/chromium(32631): [INFO:CONSOLE(1)] "Unrecognized feature: 'payment'.", source: https://js.stripe.com/v3/fingerprinted/js/stripe-a07f9e62b0b55658b30abedf1005cae0.js (1)
I/chatty (32631): uid=10139(com.healthcare.jaaba) identical 1 line
I/chromium(32631): [INFO:CONSOLE(1)] "Unrecognized feature: 'payment'.", source: https://js.stripe.com/v3/fingerprinted/js/stripe-a07f9e62b0b55658b30abedf1005cae0.js (1)
I/Choreographer(32631): Skipped 31 frames! The application may be doing too much work on its main thread.
I/chromium(32631): [INFO:CONSOLE(265)] "Uncaught ReferenceError: PaymentRequest is not defined", source: https://pay.google.com/gp/p/js/pay.js (265)
Flutter Application: checkout_screen.dart
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:stripe_checkout/stripe_checkout.dart';
import 'package:flutter/material.dart';
import '../../../../utils/env.dart';
import '../widgets/example_scaffold.dart';
import '../../../../utils/api_endpoints.dart';
import 'platforms/stripe_checkout.dart' if (dart.library.js)
'platforms/stripe_checkout_web.dart';
class CheckoutScreenExample extends StatefulWidget {
const CheckoutScreenExample({Key? key}) : super(key: key);
#override
_CheckoutScreenExample createState() => _CheckoutScreenExample();
}
class _CheckoutScreenExample extends State<CheckoutScreenExample> {
#override
Widget build(BuildContext context) {
return ExampleScaffold(
title: 'Checkout Page',
padding: const EdgeInsets.all(16),
children: [
const SizedBox(height: 120),
Center(
child: ElevatedButton(
onPressed: checkout,
child: const Text('Open Checkout'),
),
)
],
);
}
Future<void> checkout() async {
final String sessionId = await _createCheckoutSession();
final result = await redirectToCheckout(
context: context,
sessionId: sessionId,
publishableKey: stripePublishableKey,
successUrl: 'https://checkout.stripe.dev/success',
canceledUrl: 'https://checkout.stripe.dev/cancel',
);
if (mounted) {
final text = result.when(
success: () => 'Paid successfully',
canceled: () => 'Checkout canceled',
error: (e) => 'Error $e',
redirected: () => 'Redirected successfully',
);
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(text)),
);
}
}
Future<String> _createCheckoutSession() async {
final stripePayURL = Uri.parse(ApiUrl.stripePayUrl);
final response = await http.get(
stripePayURL,
headers: <String, String>{'Authorization': 'Bearer ' + token,
},
);
final Map<String, dynamic> bodyResponse = json.decode(response.body);
final id = bodyResponse['checkout_session_id'] as String;
debugPrint('Checkout session id $id');
return id;
}
}
Flask Backend: billing.py
#api_blueprint.route('/stripe_pay', methods=['GET'])
#token_auth.login_required
def stripe_pay():
cart_id = basic_auth.current_user().id
transaction = Transaction.query.filter(Transaction.cart_id==cart_id).first()
price = stripe.Price.create(
unit_amount=transaction.count_grand_total(),
currency=transaction.currency,
)
session = stripe.checkout.Session.create(
payment_method_types=['card'],
line_items=[{
'price': price,
'quantity': 1,
}],
mode='payment',
success_url=url_for('api.success', cart_id=cart_id, _external=True) + '?cart_id=cart_id' + '?session_id={CHECKOUT_SESSION_ID}',
cancel_url=url_for('home.index', _external=True),
)
return jsonify ({
'checkout_session_id': session['id'],
'checkout_public_key': checkout_public_key,
'cart_id': int(cart_id)
})
I would appreciate if someone show me how to fix this. Thank you.