How to Set Up a Recursive Loop to Sync Data Between API Response and Local Data in a WebApp

In my web app, I have a workflow where a user opens the popup-Transaction that displays the current row’s Offer_Transaction and relational data types. When the user clicks the “Sync Data” button, it triggers an API call to retrieve updated transaction data. I need help setting up a recursive loop to sync the payments from the API with my local data type (TS_Payments) without using Backend Workflows.

Here’s the flow:
The user clicks “Open Transactions,” which opens the popup-Transaction displaying the relevant row’s Offer_Transaction and its relational data.

Sync Data Action: When the user clicks the “Sync Data” button, the Retrieve_Transaction API is called. This API returns a list of TransactionPayments for this transaction from the external service (TradeSafe).

API Response Structure:
The response includes transaction details and a list of TransactionPayments.

Custom State (CS) Setup:
TransactionPayments (CS): Stores the list of payments returned by the API.
currentIndex (CS): Starts at 1.

Trigger SyncPayment (CE) Custom Event:
The SyncPayment custom event is triggered only when: Popup-Transaction’s currentPaymentIndex (CS) is less than or equal to the count of TransactionPayments (CS) returned from the API.

Main Requirement:
I need to set up a recursive loop that checks whether each TransactionPayment in the API response matches a TS_Payment in my local database.

If a match is found, update the corresponding fields in the TS_Payment record.

If no match is found, create a new TS_Payment record.

After processing each payment, increment the currentPaymentIndex by 1 and repeat the process.

The Problem:
I want to implement this recursive loop without using backend workflows. However, I’m unsure how to properly trigger and manage the recursive logic within the SyncPayment custom event. It doesn’t seem possible to trigger the SyncPayment custom event within itself. How can I make this workflow recursive?