Update Flutterwave implementation to use mutations from backend

Feature description

This is a follow-up ticket for #2621 (closed). We need to update the FE code to use the BE mutations.

On clicking next of make a payment, mutation transaction_initiate needs to be executed and returns a link of flutterwave payment api on completing the payment details on flutterwave payments api, it will redirect_to make a payment page with some query parameters the query parameters consists transaction id and from here we call mutation transaction_verify which is used to verify transactions and create transaction logs in db.

On clicking next of making a payment, mutation transaction_initiate starts and returns a link of flutterwave payment API Example link: https://ravemodal-dev.herokuapp.com/v3/hosted/pay/e5565e5a4684fe2f6d

On completing the payment details on flutterwave payments API, it will redirect_to make a payment page with params Example link: http://localhost:3000/payments/pay?status=successful&tx_ref=2022-06-20T07%3A56%3A34.968%2B00%3A00&transaction_id=3500588

the query parameters consist of transaction id and as we are redirecting to same page we need to check if transaction_id is present in params, we need to execute mutation transaction_verify. Based on the response from mutation we will display success/error message.

For reference: app/javascript/src/components/AuthScreens/OneTimeLoginCode.jsx

Use cases

Benefits (For whom and why.)

Person who should verify on Staging

@olivierjmm @saurabh44

Requirements (checklist preferred)

Engineer checklist:

  • Update FE code to use BE Flutterwave mutations

Verification by another Engineer:

  • Update FE code to use BE Flutterwave mutations