diff --git a/jslib b/jslib
index 3aebe1a09a..93edd272dd 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 3aebe1a09a282fdba1a2b27d42e0c154635b3188
+Subproject commit 93edd272dde1d0d5739c29a57668849fb445eee3
diff --git a/src/app/settings/premium.component.ts b/src/app/settings/premium.component.ts
index d77f04f66f..c1c4580736 100644
--- a/src/app/settings/premium.component.ts
+++ b/src/app/settings/premium.component.ts
@@ -1,8 +1,14 @@
 import {
     Component,
+    EventEmitter,
+    Output,
     ViewChild,
 } from '@angular/core';
 
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 
 import { PaymentComponent } from './payment.component';
@@ -13,20 +19,29 @@ import { PaymentComponent } from './payment.component';
 })
 export class PremiumComponent {
     @ViewChild(PaymentComponent) paymentComponent: PaymentComponent;
+    @Output() onPremiumPurchased = new EventEmitter();
 
     premiumPrice = 10;
     storageGbPrice = 4;
     additionalStorage = 0;
 
-    constructor(private i18nService: I18nService) { }
+    formPromise: Promise<any>;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService) { }
 
     async submit() {
         try {
-            const token = await this.paymentComponent.createPaymentToken();
-            console.log(token);
-        } catch (e) {
-            console.log(e);
-        }
+            this.formPromise = this.paymentComponent.createPaymentToken().then((token) => {
+                const fd = new FormData();
+                fd.append('paymentToken', token);
+                fd.append('additionalStorageGb', (this.additionalStorage || 0).toString());
+                return this.apiService.postPremium(fd);
+            }).then(() => {
+                return this.finalizePremium();
+            });
+            await this.formPromise;
+        } catch { }
     }
 
     get additionalStorageTotal(): number {
@@ -36,4 +51,11 @@ export class PremiumComponent {
     get total(): number {
         return this.additionalStorageTotal + this.premiumPrice;
     }
+
+    private async finalizePremium() {
+        await this.apiService.refreshIdentityToken();
+        this.analytics.eventTrack.next({ action: 'Signed Up Premium' });
+        this.toasterService.popAsync('success', null, this.i18nService.t('accountUpdated'));
+        this.onPremiumPurchased.emit();
+    }
 }
diff --git a/src/app/settings/user-billing.component.html b/src/app/settings/user-billing.component.html
index 4e280ab941..243884258d 100644
--- a/src/app/settings/user-billing.component.html
+++ b/src/app/settings/user-billing.component.html
@@ -1,4 +1,4 @@
 <div class="page-header">
     <h1>{{'billingAndLicensing' | i18n}}</h1>
 </div>
-<app-premium *ngIf="!premium"></app-premium>
+<app-premium *ngIf="!premium" (onPremiumPurchased)="loadPremiumStatus()"></app-premium>
diff --git a/src/app/settings/user-billing.component.ts b/src/app/settings/user-billing.component.ts
index ee90f12a13..b89b08c7a6 100644
--- a/src/app/settings/user-billing.component.ts
+++ b/src/app/settings/user-billing.component.ts
@@ -15,6 +15,10 @@ export class UserBillingComponent implements OnInit {
     constructor(private tokenService: TokenService) { }
 
     async ngOnInit() {
+        this.loadPremiumStatus();
+    }
+
+    loadPremiumStatus() {
         this.premium = this.tokenService.getPremium();
     }
 }