aknuth/bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

Stripe Integration

Browse Source
This commit is contained in:
Andreas Knuth
2024-08-20 23:27:07 +02:00
parent 056db7b199
commit 48bff89526
28 changed files with 728 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
bizmatch/src/app/pages/pricing/pricing.component.html
View File

@@ -20,10 +20,6 @@
<i class="fas fa-check text-green-500 mr-2"></i>
Get early access to new listings
</li>
<li class="mb-4 flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
Professional/Broker trial period (3 month)
</li>
<li class="mb-4 flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
Extended search functionality
@@ -31,7 +27,7 @@
</ul>
</div>
<div class="px-6 py-4 mt-auto">
<button class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Sign Up Now</button>
<button (click)="register()" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Sign Up Now</button>
</div>
</div>
@@ -51,7 +47,7 @@
</li>
<li class="mb-4 flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
Extended public listings (3+ months)
3-Month Free Trial
</li>
<li class="mb-4 flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
@@ -76,7 +72,8 @@
</ul>
</div>
<div class="px-6 py-4 mt-auto">
<button class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Get Started</button>
<!-- <button routerLink="/payment" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Get Started</button> -->
<button (click)="register('price_1PpSkpDjmFBOcNBs9UDPgBos')" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Get Started</button>
</div>
</div>
@@ -100,7 +97,7 @@
</li>
<li class="mb-4 flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
Extended public listings (3+ months)
3-Month Free Trial
</li>
<li class="mb-4 flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
@@ -125,7 +122,8 @@
</ul>
</div>
<div class="px-6 py-4 mt-auto">
<button class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Start Listing Now</button>
<!-- <button routerLink="/payment" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Start Listing Now</button> -->
<button (click)="register('price_1PpSmRDjmFBOcNBsaaSp2nk9')" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Start Listing Now</button>
</div>
</div>
</div>

43
bizmatch/src/app/pages/pricing/pricing.component.ts
View File

@@ -1,5 +1,10 @@
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { KeycloakService } from 'keycloak-angular';
import { StripeService } from 'ngx-stripe';
import { switchMap } from 'rxjs';
import { environment } from '../../../environments/environment';
import { SharedModule } from '../../shared/shared/shared.module';
@Component({
@@ -10,8 +15,40 @@ import { SharedModule } from '../../shared/shared/shared.module';
styleUrl: './pricing.component.scss',
})
export class PricingComponent {
constructor(public keycloakService: KeycloakService) {}
register() {
this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
private apiBaseUrl = environment.apiBaseUrl;
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
constructor(public keycloakService: KeycloakService, private http: HttpClient, private stripeService: StripeService, private activatedRoute: ActivatedRoute) {}
ngOnInit() {
if (this.id) {
this.checkout(atob(this.id));
}
}
register(priceId?: string) {
if (priceId) {
this.keycloakService.register({ redirectUri: `${window.location.origin}/pricing/${btoa(priceId)}` });
} else {
this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
}
}
checkout(priceId) {
// Check the server.js tab to see an example implementation
this.http
.post(`${this.apiBaseUrl}/bizmatch/payment/create-checkout-session`, { priceId })
.pipe(
switchMap((session: any) => {
return this.stripeService.redirectToCheckout({ sessionId: session.id });
}),
)
.subscribe(result => {
// If `redirectToCheckout` fails due to a browser or network
// error, you should display the localized error message to your
// customer using `error.message`.
if (result.error) {
alert(result.error.message);
}
});
}
}