Tutorials

Building a Stellar Client – Part 3

Today we will be looking at the final part of our stellar client tutorial.
If you have missed the previous parts you can find them here.

Building a Stellar Client – Part 1

Building a Stellar Client – Part 2

So let’s get started. In this tutorial we will be looking at how to send payments on the stellar network. This is one of the most used features of the stellar network. Making payments is a feature that will be most likely used by all accounts.

Payment Form

We will go ahead and edit our index.html file and add the following code.




<h3>Send Payment</h3>


  <input type="text" name="srcAcct" id="srcAcct" placeholder="Enter source account ID" />

  <input type="text" name="amount" id="amount" placeholder="Enter amount" />

  <input type="text" name="destAcct" id="destAcct" placeholder="Enter destination account ID" />

  <input type="text" name="srcSeed" id="srcSeed" placeholder="Enter source account seed" />

  <button type="submit" class="btn btn-success" id="sendPayment">Submit</button>


<div id="paymentResponse"></div>



So we have added a form that takes the source account ID, amount to send, the destination ID and the source account secret seed.
The secret seed is like the “password” of the account. It is needed to sign transactions that are carried out on the Stellar network.

Note: any transaction that modifies the state of an account on the Stellar network has to be signed by the secret seed.

Send Payment

Next, let us look at the javascript code that does the payment.


  // Send Payment
  $('#sendPayment').on('click', function() {
      
      var resp = $('#paymentResponse');
      var srcAcct = $('#srcAcct').val();
      var amount = $('#amount').val();
      var destAcct = $('#destAcct').val();
      var srcSeed = $('#srcSeed').val();

      if (!StellarSdk.Keypair.isValidPublicKey(srcAcct)) {
         resp.html('

Invalid Source Account ID 

');
         return false;
      }

      if (!StellarSdk.Keypair.isValidPublicKey(destAcct)) {
         resp.html('

Invalid Destination Account ID 

');
         return false;
      }


      if (isNaN(amount)) {
         resp.html('

Invalid Amount

');
         return false;
      }

      
      resp.html('

Processing Payment... 

');
      // load account
      server.loadAccount(destAcct)
        .catch(StellarSdk.NotFoundError, function(error) {
          resp.html('

Destination Account not active 

');
          return false;
        })
        .then(function(account) {
          
          return server.loadAccount(srcAcct);
        })
        .catch(StellarSdk.NotFoundError, function(error) {
          resp.html('

Source Account not active 

');
          return false;
        })
        .then(function(sourceAccount) {
          
          
          var transaction = new StellarSdk.TransactionBuilder(sourceAccount)
                .addOperation(StellarSdk.Operation.payment({
                  destination: destAcct,
                  asset: StellarSdk.Asset.native(),
                  amount: amount
                }))
                .build();
          

          transaction.sign(StellarSdk.Keypair.fromSeed(srcSeed));

        return server.submitTransaction(transaction);
        })
        .then(function(result) {
          console.log('Transaction Success! Results:\n', result);
          resp.html('

Payment successful.

');
        })
        .catch(function(error) {
          console.error('Transaction Error\n', error);
          resp.html('

Payment Error

');
        });
      

  });


Here, we are getting the form input and doing some validation checks

After that we load the destination account to see if its active

server.loadAccount(destAcct)

Then we load the source account to be sure it exists. We then proceed to build our transaction


 var transaction = new StellarSdk.TransactionBuilder(sourceAccount)
                .addOperation(StellarSdk.Operation.payment({
                  destination: destAcct,
                  asset: StellarSdk.Asset.native(),
                  amount: amount
                }))
                .build();

Take note of the asset field in the payment object that is set to StellarSdk.Asset.native() this indicates that asset to be sent is Lumens(XLM). In the future, we will look at how to send payments with custom assets.

We then sign the payment with the source account keys and submit to the network.


 transaction.sign(StellarSdk.Keypair.fromSeed(srcSeed));
 return server.submitTransaction(transaction);

We then handle the network response if the payment is successcul or if it fails.
On failure you can further explore the error object to give the user more information on the type of error.

With that, we have come to the end of these series.
Kindly drop your comments/questions.

The code for this is available on github here: stellar-client-part3 .
You can test out the client here:  demo page.

Leave a Comment