added Stripe service + implementation of stripe service in home component

.gitignore

@@ -6,6 +6,9 @@
 /out-tsc
 /bazel-out
 
+# Config
+config.ts
+
 # Node
 /node_modules
 npm-debug.log

README.md

@@ -2,6 +2,18 @@
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.
 
+## Config
+
+Create a config.ts file with your api keys :
+`export const environment = {
+    production: true,
+    // Stripe 
+    stripeApiKey: '',
+    PriceIdKey: '',
+};`
+
+Note : for PriceIdKey you need to create a Product in stripe dashboard and copy the PriceId key.
+
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.

package-lock.json

@@ -18,6 +18,7 @@
         "@angular/platform-browser": "^16.2.0",
         "@angular/platform-browser-dynamic": "^16.2.0",
         "@angular/router": "^16.2.0",
+        "@stripe/stripe-js": "^2.1.2",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.13.0"
@@ -3928,6 +3929,11 @@
       "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==",
       "dev": true
     },
+    "node_modules/@stripe/stripe-js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-2.1.2.tgz",
+      "integrity": "sha512-xyB/oVoFBPLCVGRUGQphzMnfCVfWGqKLb2+v/sIJAwYlVMrS2uF4iyZHpE7Lg1DtDL5qsPxSTpUGs0kRtMdbRA=="
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",

package.json

@@ -37,4 +37,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.1.3"
   }
-}
+}

src/app/app-routing.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { HomeComponent } from './home/home.component';
+import { HomeComponent } from './components/home/home.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent},

src/app/app.module.ts

@@ -1,16 +1,18 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NavbarComponent } from './navbar/navbar.component';
-import { HomeComponent } from './home/home.component';
+import { NavbarComponent } from './components/navbar/navbar.component';
+import { HomeComponent } from './components/home/home.component';
 
 import { MatCommonModule } from '@angular/material/core';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
   declarations: [
@@ -22,11 +24,13 @@ import { MatIconModule } from '@angular/material/icon';
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
+    HttpClientModule,
 
     MatCommonModule,
     MatToolbarModule,
     MatCardModule,
-    MatIconModule
+    MatIconModule,
+    MatButtonModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/home/home.component.html

@@ -3,6 +3,7 @@
     <section class="main">
         <span class="title">Instrukt</span>
         <span class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
+        <button mat-raised-button color="primary" (click)="payment()">Buy</button>
     </section>
 
     <section class="details">

src/app/components/home/home.component.scss

@@ -20,6 +20,13 @@ $medium: 960px;
     background-color: $secondary;
 }
 
+.main button {
+    margin-top: 3%;
+    padding-left: 3%;
+    padding-right: 3%;
+    font-size: 1.5vh;
+}
+
 .main span.title {
     font-size: 6vh;
     padding-bottom: 2%;

src/app/components/home/home.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { StripeService } from 'src/app/services/stripe.service';
+import { environment } from 'config';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+
+export class HomeComponent {
+  constructor(private stripeService: StripeService) { }
+
+  payment(): void {
+    const priceId = environment.PriceIdKey; // Replace with your Stripe price object ID
+    const quantity = '1'; // Replace with your desired quantity
+
+    this.stripeService.createPaymentLink(priceId, quantity)
+      .subscribe(
+        (response) => {
+          console.log('Payment link created successfully:', response);
+          // You can handle the payment link here
+          // Open the URL in a new window
+          if (response.url) {
+            window.open(response.url, '_blank');
+          }
+        },
+        (error) => {
+          console.error('Error creating payment link:', error);
+          // Handle the error here
+        }
+      );
+  }
+}

src/app/home/home.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-home',
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
-})
-export class HomeComponent {
-
-}

src/app/services/stripe.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { StripeService } from './stripe.service';
+
+describe('StripeService', () => {
+  let service: StripeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(StripeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/stripe.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { environment } from 'config';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StripeService {
+  private apiUrl = 'https://api.stripe.com/v1';
+  private apiKey = environment.stripeApiKey; // Replace with your Stripe secret key
+
+  constructor(private http: HttpClient) { }
+
+   private getHeaders() {
+    const headers = new HttpHeaders()
+      .set('Authorization', `Bearer ${this.apiKey}`)
+      .set('Content-Type', 'application/x-www-form-urlencoded');
+    return { headers };
+  }
+
+  // Create payment link
+  createPaymentLink(priceId: string, quantity: string): Observable<any> {
+    const body = new URLSearchParams();
+    body.set('line_items[0][price]', priceId); // Add line_items parameter
+    body.set('line_items[0][quantity]', quantity); // Add line_items parameter
+
+    return this.http.post(`${this.apiUrl}/payment_links`, body.toString(), this.getHeaders());
+  }
+}