Skip to main content
Accounts are the central data structure in Stellar and can only exist with a valid keypair (a public and secret key) and the required minimum balance of XLM. Read more in the Accounts section.

User experience

To start, we’ll have our user create an account. In BasicPay, the signup page will display a randomized public and secret keypair that the user can select with the option to choose a new set if preferred.
Since we are building a non-custodial application, the encrypted secret key will only ever live in the browser. It will never be shared with a server or anybody else.
public and private keys Next, we’ll trigger the user to submit a pincode to encrypt their secret key before it gets saved to their browser’s localStorage (this is handled by the @stellar/typescript-wallet-sdk-km). The user will need to remember their pincode for future logins and to submit transactions. With BasicPay, when the user clicks the “Signup” button, they will be asked to confirm their pincode. When they do, the create_account operation is triggered, and the user’s account is automatically funded with XLM for the minimum balance (starting with 10,000 XLM). funded account When you’re ready to move the application to Pubnet, accounts will need to be funded with real XLM. This is something the application can cover itself by depositing XLM into the user’s account, with the use of sponsored reserves, or the user can cover the required balance with their own XLM.

Code implementation

We will create a Svelte store to interact with our user’s randomly generated keypair. The store will take advantage of @stellar/typescript-wallet-sdk-km to encrypt/decrypt the keypair, as well as sign transactions.

Creating the walletStore store

Our walletStore will make a few things possible throughout our application.
  1. We can “register” a keypair, which encrypts the keypair, stores it in the browser’s storage, and keeps track of that keypair’s keyId.
  2. We can “sign” transactions by providing the pincode to decrypt the keypair.
  3. We can “confirm” the pincode is valid for the stored keypair (or that it matches for signups).
/src/lib/stores/walletStore.js
Source: https://github.com/stellar/basic-payment-app/blob/main/src/lib/stores/walletStore.js

Creating the account on the Stellar network

After we’ve registered the user, we need to fund the account on the Stellar network. As discussed previously, there are multiple ways to accomplish this task, but we are using Friendbot to ensure the user has some Testnet XLM to experiment with.
/src/lib/stellar/horizonQueries.js
Source: https://github.com/stellar/basic-payment-app/blob/main/src/lib/stellar/horizonQueries.js

Using the walletStore store

Our walletStore is used in a ton of places in our application, especially in the confirmation modal when asking a user to input their pincode. Read on to see how we’ve done that.