# Get Started

{% hint style="warning" %}
You will need an API Key to get started. Get your key by signing up on the [Developer Portal](https://developer-test.usemeta.fi/).
{% endhint %}

## Description

The Metafi JS SDK offers you the option to completely white-label and customise the UI of the wallet experience for your users. Please refer to the steps below to begin integration , and additionally, please post any other questions on our [Discord](https://discord.gg/yaxvxEmuKn) channel.

To view a sample integration, please refer to our [demo application](https://codesandbox.io/s/metafi-js-demo-qiqp8w?file=/src/App.js).

## Step 1: Install the library

First, install the library via your terminal.

<pre class="language-shell" data-line-numbers><code class="lang-shell"><strong># install via Yarn
</strong>yarn add @metafi/metafi-js-package

# or via NPM
npm install @metafi/metafi-js-package
</code></pre>

## Step 2: Setup User Login

Go to your project page in the [Developer Portal](https://developer-test.usemeta.fi/merchant/projects) and navigate to Settings. There you can update the URL which we will use to authenticate your user token. Once this URL is updated, you can create a wallet for a user by passing in their `userIdentifier` and `jwtToken` into our SDK.

More information on this can be found in the [Login](https://docs.usemeta.fi/js-sdk/sdk-reference/login) section of our documentation.

```jsx
import { Login } from '@metafi/metafi-js-package';
import { getLoginToken } from './controllers/login'

function App() {

    const handleLogin = async () => {
        var email = "test@mail.com";
        var jwtToken = getLoginToken(email);  // your logic to login user
        
        var result = await Login(
            email,
            jwtToken,
            "YOUR-API-KEY",
            "YOUR-SECRET-KEY"
        );
        
        console.log("Login results", result);
    }
    
    return (
        <div>
	    <button onClick={handleLogin}>Handle login</button>
        </div>
    );
}

export default App;

```

## Step 3: Function Invocation

You're done! You can now invoke the functions that you need.

<pre class="language-jsx" data-line-numbers><code class="lang-jsx"><strong>import stakeContractAbi from './contracts/abi/stakeContract.json'
</strong><strong>import {
</strong>    CallGenericWriteFunction,
    ConvertNumberToBigNumber,
    chains
} from '@metafi/metafi-js-package';

function App() {
    const stakeTokens = () => {
        CallGenericWriteFunction({
                chain: chains.eth,             
                contractAddress: "0xF5C9F957705bea56a7e806943f98F7877B995826",   
                functionABI: stakeContractAbi.abi,   
                functionName: "stake",
                value: ConvertNumberToBigNumber(1, 18),
                params: [],
                callback: (res) => {
                    console.log(res);
                }
            },
            "YOUR-API-KEY"
        );
    }
    
    return (
        &#x3C;div>
	    &#x3C;button onClick={stakeTokens}>stakeTokens&#x3C;/button>
        &#x3C;/div>
    );
}

export default App;

</code></pre>