The payment() method will submit a new payment request to the backend infrastructure. It is called when the Submit button is clicked on the Transfer screen. Let's look at the payment() method:

1. We start the method by declaring a FormData object. The details for the transaction are added to the FormData object. These include the sender's details, the receiver's details, the transaction amount and currency, and the details of the compliance documents to be uploaded. We fetch the sender's details from the state and the receiver's details from the input fields. The currency is set to USD by default, as shown in the following code block:

payment = () => {
 const data = new FormData();

 data.append('sname',this.state.name);
 data.append('saccount',this.state.account);
 data.append('sbank',this.state.bank);
 data.append('saddress',this.state.address); 
 data.append('rname',this.state.fields.rname);
 data.append('raccount',this.state.fields.raccount);
 data.append('rbank',this.state.fields.rbank);
 data.append('raddress',this.state.fields.raddress);
 data.append('amount',this.state.fields.amount);
 data.append('currency','USD');
 data.append('invfile',this.state.InvFile);
 data.append('boefile',this.state.BOEFile);
 data.append('docfile',this.state.DocFile);

2. Next, we add this FormData object to the request body, and submit the request to the /payment endpoint of our backend server, like this:

let app = this;
 var url = 'http://'+ this.state.server +'/payment';
 fetch(url, {
 method: 'POST', 
 body: data}).
 then(function(response,error) {

3. On receiving a response from the backend, we reset the fields and then set the user balance again, by calling the resetApp() and setBalance() methods respectively. The response data with the Transaction successfully submitted or Transaction failed message is updated to the txstatus state variable.

The Transfer component will display this message to the user, as follows:

 if(response)
 {
 app.setBalance();
 app.resetApp();
 return response.json();
 }
 else 
 {
 console.log(error);
 }
 }).then(function(data){
    console.log(data);
        app.setState({
            txstatus: data
        });
  })

Next, let's look at the method that fetches the customer's transactions from the backend.