showPaymentModal blinks

[jaletechs]

Do you know any reason why onPressed, the showPaymentModal simply blinks, and then shows that transaction is verified?

[jaletechs]

Narrowed it down to iOS only. The modal shows properly on Android

[binemmanuel]

Can you provide more details so the error can be reproduced?

[jaletechs]

I've been on it. Unfortunately, I don't get any errors on the console. And the code is pretty basic. Have you tested the dependency on an iPhone?

`final request = PaystackTransactionRequest( reference: transaction.paymentTransaction.ref, secretKey: secretKey, email: email, amount: 100 * 30, currency: PaystackCurrency.ngn, channel: [ PaystackPaymentChannel.mobileMoney, PaystackPaymentChannel.card, PaystackPaymentChannel.ussd, PaystackPaymentChannel.bankTransfer, PaystackPaymentChannel.bank, PaystackPaymentChannel.qr, PaystackPaymentChannel.eft, ], ); final initializedTransaction = await PaymentService.initializeTransaction(request); ' if (!mounted) return;

if (!initializedTransaction.status) {
  ScaffoldMessenger.of(context).clearSnackBars();
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      backgroundColor: Colors.red,
      content: Text(initializedTransaction.message),
    ),
  );

  setState(() => _initializingPayment = false);

  return;
}

await PaymentService.showPaymentModal(
  context,
  transaction: initializedTransaction,
);

final response = await PaymentService.verifyTransaction(
  paystackSecretKey: secretKey,
  initializedTransaction.data?.reference ?? request.reference,
);

if (!mounted) return;

if (response.status) {
  if (response.data.status == PaystackTransactionStatus.abandoned ||
      response.data.status == PaystackTransactionStatus.failed) {
    await paymentService
        .deletePaymentTransaction(transaction.paymentTransaction.ref);
    if (!mounted) return;
    setState(() => _initializingPayment = false);
    ScaffoldMessenger.of(context).clearSnackBars();
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        backgroundColor: Colors.red,
        content: Text(
          'Transaction ended',
          style: TextStyle(fontSize: 16, color: Colors.white),
        ),
      ),
    );
  } else if (response.data.status == PaystackTransactionStatus.success) {
    await paymentService.successfulPaymentTransaction(
      transaction.paymentTransaction.ref,
      transaction.bankAccount.id,
    );
    setState(() => _initializingPayment = false);

    if (!mounted) return;

    ScaffoldMessenger.of(context).clearSnackBars();
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        backgroundColor: Colors.green,
        content: Text('Transaction successful'),
      ),
    );
    Navigator.of(context).pop();
  }
} else {
  setState(() => _initializingPayment = false);

  ScaffoldMessenger.of(context).clearSnackBars();
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      backgroundColor: Colors.red,
      content: Text(response.message),
    ),
  );
}`

[binemmanuel]

This issue has been resolved in v1.0.4

[jaletechs]

Is there a 1.0.4?

[jaletechs]

I think you were a little eager to close the issue. I have updated to 1.0.4, and it's still very much there

[binemmanuel]

v1.0.4 requires that you provide callback URL from your Paystack dashboard

final response = await PaymentService.showPaymentModal(
    context,
    transaction: initializedTransaction,
    // Callback URL must match the one specified on your paystack dashboard,
    callbackUrl: '...'
).then((_) async {
    return await PaymentService.verifyTransaction(
        paystackSecretKey: '...',
        initializedTransaction.data?.reference ?? request.reference,
    );
});

print(response); // Result of the confirmed payment

If you've updated your code with the callback URL and this issue persists then the issue will be reopened.