# Angular sample code : POST form data

This example only showing how to post the data to Argos API with the following conditions.

  • By using Argos API, submit the KYC/AML data
  • We did not include email confirmation, (The email must belong to the owner of the email. You should include 2fa for this.)
  • KYC Level 1
  • Showing minimum requirement only.
  • You should hanlde the errors and do lots of data verification before post data.
  • In this case, we are using L1, which should have 1 synced transaction with 3 http post requests.
  • Used bootstrap 4.1.x for the form

# HTML

Ok, lets make simple form. This form has 2 input of file upload and a few text input data.

<div class="jumbotron">
  <div class="container">
      <div class="row">
          <div class="col-md-6 offset-md-3">
              <h3>Argos form demo</h3>
              <br><br>
              <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
                  <div class="form-group">
                      <label for="email">Email</label>
                      <input type="text" class="form-control" name="email" [(ngModel)]="model.email" #email="ngModel" [ngClass]="{ 'is-invalid': f.submitted && email.invalid }" required email />
                      <div *ngIf="f.submitted && email.invalid" class="invalid-feedback">
                          <div *ngIf="email.errors.required">Email is required</div>
                          <div *ngIf="email.errors.email">Email must be a valid email address</div>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="firstName">First Name</label>
                      <input type="text" class="form-control" name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel" [ngClass]="{ 'is-invalid': f.submitted && firstName.invalid }" required />
                      <div *ngIf="f.submitted && firstName.invalid" class="invalid-feedback">
                          <div *ngIf="firstName.errors.required">First Name is required</div>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="lastName">Last Name</label>
                      <input type="text" class="form-control" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel" [ngClass]="{ 'is-invalid': f.submitted && lastName.invalid }" required />
                      <div *ngIf="f.submitted && lastName.invalid" class="invalid-feedback">
                          <div *ngIf="lastName.errors.required">Last Name is required</div>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="photoid">Passport</label><br>
                      <input type="file" name="photoid" (change)="onFilePhotoId($event)" >
                  </div>
                  <div class="form-group">
                      <label for="selfie">Selfie</label><br>
                      <input type="file" name="selfie" (change)="onFileSelfie($event)" >
                  </div>
                  <div class="form-group">
                      <button class="btn btn-primary">Submit</button>
                  </div>
              </form>
          </div>
      </div>
  </div>
</div>

# TypeScript

Import http module to use http post.

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

  constructor(private http: HttpClient) {

  }

When user select the file, lets get the file data from so we can actually use it later. photoIdFile, photoSelfieFile should be declared before. Following code will retrieve the file data of 2 input.

  onFilePhotoId(event){
    console.log(event.target.files[0]);
    this.photoIdFile = event.target.files[0];
  }

  onFileSelfie(event){
    console.log(event.target.files[0]);
    this.photoSelfieFile = event.target.files[0];
  }

The following interface is the format of Argos image upload return.

interface uploadRes {
  created_at: string;
  filehash:string;
  filetype:string;
  id:string;
};

when click submit button, let's do file upload 2 times then when both are success get the filehash return data then use it as input of formdata post to Argos API.

  onSubmit() {

    // 0. data validation
    // do whatever validation needed

    // 1. upload id
    const header = new HttpHeaders()
      .set('x-api-key', 'YOUR_API_KEY');
      // it might be a good idea that you need to use this as environment variable. I would not put the api key in the code.

    const httpOptions = {
      headers: header
      };

    const fd = new FormData();
    fd.append('file', this.photoIdFile);
    fd.append('type', 'passport'); // lets say this is passport

    this.http.post<uploadRes>('https://api.argos-solutions.io/v2/submissions/upload', fd, httpOptions)
      .subscribe(res => {
        console.log(res);
        //get the file hash
        this.photoIdHash = res.filehash;

        // 2. upload selfie
        const header = new HttpHeaders()
          .set('x-api-key', 'YOUR_API_KEY');

        const httpOptions = {
          headers: header
          };

        const fd = new FormData();
        fd.append('file', this.photoSelfieFile);
        fd.append('type', 'selfie'); // lets say this is passport

        this.http.post<uploadRes>('https://api.argos-solutions.io/v2/submissions/upload', fd, httpOptions)
          .subscribe(res => {
            console.log(res);
            this.photoSelfieHash = res.filehash;

            // 3. post form data
            // this is only sample. you need to get the data from the actual FORM of your site
            const params = new HttpParams()
            .set('email', this.model.email)
            .set('first_name', this.model.firstName)
            .set('last_name', this.model.lastName)
            .set('nationality', 'South Korea, KOR')
            .set('date_of_birth', '1980-01-01')
            .set('gender', 'male')
            .set('id_type', 'passport')
            .set('photoid_res', this.photoIdHash)
            .set('selfie_res', this.photoSelfieHash)
            .set('kyc_level', 'L1')
            .set('wallet_address', '0xAAA')
            .set('estimated_amount', '100')
            .set('contribution_type', 'ETH'); 

            const header = new HttpHeaders()
            .set('x-api-key', 'YOUR_API_KEY');
  
            const httpOptions = {
              headers: header
              };
  
            this.http.post('https://api.argos-solutions.io/v2/submissions', params, httpOptions)
              .subscribe(event => {
                // done
                console.log(event);

                // get the ID and save it into your database for future use.
                // ex) email: "test@argos-solutions.io",  id: "18olf81jn3w5mun"
                
              });
          });
      });
  }

# Download sample

Sample code download

# Angular sample code : GET form data

This example only showing how to post the data to Argos API with the following conditions.

  • By using Argos API, get the KYC/AML status data
  • We did not include email confirmation, (The email must belong to the owner of the email. You should include 2fa for this.)
  • KYC Level 1
  • Showing minimum requirement only.
  • You should handle the errors.
  • Used bootstrap 4.1.x for the form

# HTML

Ok, lets make simple form. This form has 2 parameter input and a textbox for return data.

<div class="jumbotron">
  <div class="container">
      <div class="row">
          <div class="col-md-6 offset-md-3">
              <h3>Argos form demo 2</h3>
              <br><br>
              <form name="form" (ngSubmit)="onSubmit()" #f="ngForm" novalidate>
                  <div class="form-group">
                      <label for="email">Email</label>
                      <input type="text" class="form-control" name="email" [(ngModel)]="model.email" #email="ngModel" [ngClass]="{ 'is-invalid': f.submitted && email.invalid }" required email />
                      <div *ngIf="f.submitted && email.invalid" class="invalid-feedback">
                          <div *ngIf="email.errors.required">Email is required</div>
                          <div *ngIf="email.errors.email">Email must be a valid email address</div>
                      </div>
                  </div>

                  <div class="form-group">
                      <label for="id">ID</label>
                      <input type="text" class="form-control" name="id" [(ngModel)]="model.id" #id="ngModel" [ngClass]="{ 'is-invalid': f.submitted && id.invalid }" required />
                      <div *ngIf="f.submitted && id.invalid" class="invalid-feedback">
                          <div *ngIf="id.errors.required">id is required</div>
                      </div>
                  </div>
                 
                  <div class="form-group">
                      <button class="btn btn-primary">Submit</button>
                  </div>

                  <div class="form-group">
                    <label for="status">Status</label>
                    <input type="text" class="form-control" name="status" [(ngModel)]="model.status" #id="ngModel"  />
                </div>
              </form>
          </div>
      </div>
  </div>
</div>

# TypeScript

Import http module to use http get.

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

  constructor(private http: HttpClient) {

  }

When click submit button, get the data from API then display to the form.

onSubmit() {
    // get submission from argos

    const params = new HttpParams()
    .set('email', this.model.email)
    .set('id', this.model.id); 

    const header = new HttpHeaders()
    .set('x-api-key', 'YOUR_API_KEY');

    const httpOptions = {
      headers: header
      };

    this.http.get<getRes>('https://api.argos-solutions.io/v2/submissions/'+this.model.email+'/'+this.model.id, httpOptions)
      .subscribe(event => {
        // done
        console.log(event);
        // email: "test@argos-solutions.io",  id: "18olf81jn3w5mun"
        this.model.status = event.kyc_result.status;
      });

  }

# Download sample

Sample code download

# Vue js sample code : POST form-data

This example only showing how to post the data to Argos API with the following conditions.

  • By using Argos API, submit the KYC/AML data
  • We did not include email confirmation, (The email must belong to the owner of the email. You should include 2fa for this.)
  • KYC Level 1
  • Showing minimum requirement only.
  • You should hanlde the errors and do lots of data verification before post data.
  • In this case, we are using L1, which should have 1 synced transaction with 3 http post requests.
  • Used bootstrap-Vue for the form

# HTML

Ok, lets make simple form. This form has 2 input of file upload and a few text input data.

<template>
  <div id="app">
    <b-form  @submit="onSubmit"  class="ml-5 mt-5 mr-5 mb-5">
      <b-form-group id="exampleInputGroup1"
                    label="Email address:"
                    label-for="exampleInput1">
        <b-form-input id="exampleInput1"
                      type="email"
                      v-model="form.email"
                      required
                      placeholder="Enter email">
        </b-form-input>
      </b-form-group>
      <b-form-group id="exampleInputGroup2"
                    label="First Name:"
                    label-for="exampleInput2">
        <b-form-input id="exampleInput2"
                      type="text"
                      v-model="form.firstName"
                      required
                      placeholder="Enter first name">
        </b-form-input>
      </b-form-group>
      <b-form-group id="exampleInputGroup3"
                    label="Last Name:"
                    label-for="exampleInput3">
        <b-form-input id="exampleInput3"
                      type="text"
                      v-model="form.lastName"
                      required
                      placeholder="Enter last name">
        </b-form-input>
      </b-form-group>

      <b-form-group id="fileGroup"
                    label="Upload Id:">
        <b-form-file accept="image/jpeg, image/png, image/jpg"
                    v-model="form.fileId"  
                    required
                    placeholder="Photo Id..."></b-form-file>
      </b-form-group>
      <b-form-group id="fileGroup"
                    label="Upload Selfie:">
        <b-form-file accept="image/jpeg, image/png, image/jpg"
                      v-model="form.fileSelf"  
                      required
                      placeholder="Selfie.."></b-form-file>
      </b-form-group>

      <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>

  </div>
</template>

# Script

when click submit button, let's do file upload 2 times then when both are success get the filehash return data then use it as input of formdata post to Argos API.

<script>
export default {
  name: 'app',
  components: {

  },
  data () {
    return {
      form: {
        email: '',
        firstName: '',
        lastName: '',
        fileId:null,
        fileSelf:null,
      },
    }
  },
  methods: {
    onSubmit (evt) {
      evt.preventDefault();
      // alert(JSON.stringify(this.form));
      let config = {
          headers: {
              "x-api-key": "YOUR_API_KEY"
          }
      }
      const fd = new FormData();
        fd.append('file', this.form.fileId);
        fd.append('type', 'passport'); // lets say this is passport
      this.axios.post("https://api.argos-solutions.io/v2/submissions/upload",fd, config).then((response) => {
        console.log(response.data)
        var photoIdHash = response.data.filehash;

        const fd2 = new FormData();
          fd2.append('file', this.form.fileSelf);
          fd2.append('type', 'selfie');
        this.axios.post("https://api.argos-solutions.io/v2/submissions/upload",fd2, config).then((response) => {
          console.log(response.data)
          var photoSelfieHash = response.data.filehash;

          var sendData = "";
          sendData =sendData+ "email="+this.form.email;
          sendData =sendData+ "&first_name="+this.form.firstName;
          sendData =sendData+ "&last_name="+this.form.lastName;
          sendData =sendData+ "&nationality="+'South Korea, KOR';
          sendData =sendData+ "&date_of_birth="+'1980-01-01';
          sendData =sendData+ "&gender="+'male';
          sendData =sendData+ "&id_type="+'passport';
          sendData =sendData+ "&photoid_res="+photoIdHash;
          sendData =sendData+ "&selfie_res="+photoSelfieHash;
          sendData =sendData+ "&kyc_level="+'L1';
          sendData =sendData+ "&wallet_address="+'0xAAA';
          sendData =sendData+ "&estimated_amount="+'100';
          sendData =sendData+ "&contribution_type="+'ETH' ;

          this.axios.post("https://api.argos-solutions.io/v2/submissions",sendData, config).then((response) => {
            console.log(response.data)
          })
        })
      })
    }
  }
}
</script>

Here is the main.js

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.config.productionTip = false
Vue.use(BootstrapVue);
Vue.use(VueAxios, axios);
new Vue({
  render: h => h(App)
}).$mount('#app')