-
-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(components): add support for payment element
- Loading branch information
1 parent
96390b3
commit 611417e
Showing
21 changed files
with
769 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export * from './pluto/client-id.provider'; | ||
| export * from './pluto/pluto.service'; | ||
|
|
||
| export * from './core.module'; |
3 changes: 3 additions & 0 deletions
3
projects/ngx-stripe-tester/src/app/core/pluto/client-id.provider.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import { InjectionToken } from '@angular/core'; | ||
|
|
||
| export const PLUTO_ID = new InjectionToken<string>('[PLUTO] ClientID'); |
34 changes: 34 additions & 0 deletions
34
projects/ngx-stripe-tester/src/app/core/pluto/pluto.service.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { HttpClient } from '@angular/common/http'; | ||
| import { Inject, Injectable } from '@angular/core'; | ||
| import { Observable } from 'rxjs'; | ||
|
|
||
| import { PaymentIntent } from '@stripe/stripe-js'; | ||
| import Stripe from 'stripe'; | ||
|
|
||
| import { PLUTO_ID } from './client-id.provider'; | ||
|
|
||
| @Injectable({ providedIn: 'root' }) | ||
| export class PlutoService { | ||
| private static readonly BASE_URL = 'https://api.pluto.ricardosanchez.dev/api'; | ||
|
|
||
| constructor( | ||
| @Inject(PLUTO_ID) private readonly clientId: string, | ||
| private readonly http: HttpClient | ||
| ) {} | ||
|
|
||
| createPaymentIntent(params: Stripe.PaymentIntentCreateParams): Observable<PaymentIntent> { | ||
| return this.http.post<PaymentIntent>( | ||
| `${PlutoService.BASE_URL}/payments/create-payment-intent`, | ||
| params, | ||
| { headers: { merchant: this.clientId } } | ||
| ); | ||
| } | ||
|
|
||
| createVerificationSession(userid: string): Observable<any> { | ||
| return this.http.post<PaymentIntent>( | ||
| `${PlutoService.BASE_URL}/identity/create-verification-session`, | ||
| { userid }, | ||
| { headers: { merchant: this.clientId } } | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
113 changes: 113 additions & 0 deletions
113
projects/ngx-stripe-tester/src/app/stripe-test-05/stripe-test-05.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| import { Component, ViewChild } from '@angular/core'; | ||
| import { FormBuilder, Validators } from '@angular/forms'; | ||
| import { switchMap } from 'rxjs/operators'; | ||
|
|
||
| import { StripeService, StripeCardComponent, StripeFactoryService } from 'ngx-stripe'; | ||
| import { | ||
| StripeCardElementOptions, | ||
| StripeElementsOptions | ||
| } from '@stripe/stripe-js'; | ||
|
|
||
| import { PlutoService } from '../core'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-test-05', | ||
| template: ` | ||
| <app-section maxWidth="900"> | ||
| <mat-toolbar color="secondary" section-content-header> | ||
| <span>Card Payment Intent Example</span> | ||
| </mat-toolbar> | ||
| <div section-content [formGroup]="stripeTest"> | ||
| <input placeholder="name" formControlName="name" /> | ||
| <input placeholder="amount" type="number" formControlName="amount" /> | ||
| <ngx-stripe-card [options]="cardOptions"> | ||
| <span style="color: green" *ngxStripeLoadingTemplate> | ||
| Loading Stripe Card... | ||
| </span> | ||
| </ngx-stripe-card> | ||
| <button (click)="pay()">PAY</button> | ||
| </div> | ||
| </app-section> | ||
| `, | ||
| styles: [] | ||
| }) | ||
| export class Test05Component { | ||
| @ViewChild(StripeCardComponent) card: StripeCardComponent; | ||
|
|
||
| stripe = this.factory.create( | ||
| 'pk_test_51IvkafL0RbPb0ITBwzybjdb6C24qabOLoPgyig6ZoPhhQDUpu0ghKJISVKVMwIarXnxI2r4LTJyPS3dMkdol1WS2007tHNTSok', | ||
| { apiVersion: '2020-08-27' } | ||
| ); | ||
|
|
||
| stripeTest = this.fb.group({ | ||
| name: ['Angular v11', [Validators.required]], | ||
| amount: [1105, [Validators.required, Validators.pattern(/\d+/)]] | ||
| }); | ||
|
|
||
| cardOptions: StripeCardElementOptions = { | ||
| style: { | ||
| base: { | ||
| iconColor: '#666EE8', | ||
| color: '#31325F', | ||
| fontWeight: '300', | ||
| fontFamily: '"Helvetica Neue", Helvetica, sans-serif', | ||
| fontSize: '18px', | ||
| '::placeholder': { | ||
| color: '#CFD7E0' | ||
| } | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| elementsOptions: StripeElementsOptions = { | ||
| locale: 'en' | ||
| }; | ||
|
|
||
| paying = false; | ||
|
|
||
| constructor( | ||
| private fb: FormBuilder, | ||
| private plutoService: PlutoService, | ||
| private factory: StripeFactoryService, | ||
| private stripeService: StripeService | ||
| ) {} | ||
|
|
||
| pay() { | ||
| if (this.stripeTest.valid) { | ||
| this.paying = true; | ||
| this.plutoService | ||
| .createPaymentIntent({ | ||
| amount: this.stripeTest.get('amount').value, | ||
| currency: 'eur' | ||
| }) | ||
| .pipe( | ||
| switchMap(pi => | ||
| this.stripeService.confirmCardPayment(pi.client_secret, { | ||
| payment_method: { | ||
| card: this.card.element, | ||
| billing_details: { | ||
| name: this.stripeTest.get('name').value | ||
| } | ||
| } | ||
| }) | ||
| ) | ||
| ) | ||
| .subscribe(result => { | ||
| this.paying = false; | ||
| console.log('Result', result); | ||
| if (result.error) { | ||
| // Show error to your customer (e.g., insufficient funds) | ||
| alert({ success: false, error: result.error.message }); | ||
| } else { | ||
| // The payment has been processed! | ||
| if (result.paymentIntent.status === 'succeeded') { | ||
| // Show a success message to your customer | ||
| alert({ success: true }); | ||
| } | ||
| } | ||
| }); | ||
| } else { | ||
| console.log(this.stripeTest); | ||
| } | ||
| } | ||
| } |
26 changes: 26 additions & 0 deletions
26
projects/ngx-stripe-tester/src/app/stripe-test-05/stripe-test-05.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { Routes, RouterModule } from '@angular/router'; | ||
| import { CommonModule } from '@angular/common'; | ||
|
|
||
| import { NgxStripeModule } from 'ngx-stripe'; | ||
|
|
||
| import { SharedModule } from '../shared/shared.module'; | ||
| import { Test05Component } from './stripe-test-05.component'; | ||
|
|
||
| const routes: Routes = [ | ||
| { | ||
| path: '', | ||
| component: Test05Component | ||
| } | ||
| ]; | ||
|
|
||
| @NgModule({ | ||
| declarations: [Test05Component], | ||
| imports: [ | ||
| CommonModule, | ||
| NgxStripeModule, | ||
| RouterModule.forChild(routes), | ||
| SharedModule | ||
| ] | ||
| }) | ||
| export class StripeTest05Module {} |
90 changes: 90 additions & 0 deletions
90
projects/ngx-stripe-tester/src/app/stripe-test-06/stripe-test-06.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import { Component, OnInit, ViewChild } from '@angular/core'; | ||
| import { FormBuilder, Validators } from '@angular/forms'; | ||
|
|
||
| import { StripeService, StripePaymentElementComponent } from 'ngx-stripe'; | ||
| import { StripeElementsOptions } from '@stripe/stripe-js'; | ||
|
|
||
| import { PlutoService } from '../core'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-test-06', | ||
| template: ` | ||
| <app-section maxWidth="900"> | ||
| <mat-toolbar color="secondary" section-content-header> | ||
| <span>Payment Element Test</span> | ||
| </mat-toolbar> | ||
| <div section-content [formGroup]="stripeTest"> | ||
| <mat-form-field class="example-full-width" appearance="fill"> | ||
| <input matInput placeholder="name" formControlName="name" /> | ||
| </mat-form-field> | ||
| <mat-form-field class="example-full-width" appearance="fill"> | ||
| <input matInput placeholder="amount" type="number" formControlName="amount" /> | ||
| </mat-form-field> | ||
| <ngx-stripe-payment [clientSecret]="elementsOptions?.clientSecret"></ngx-stripe-payment> | ||
| <button (click)="pay()">PAY</button> | ||
| </div> | ||
| </app-section> | ||
| `, | ||
| styles: [] | ||
| }) | ||
| export class Test06Component implements OnInit { | ||
| @ViewChild(StripePaymentElementComponent) paymentElement: StripePaymentElementComponent; | ||
|
|
||
| stripeTest = this.fb.group({ | ||
| name: ['Angular v12', [Validators.required]], | ||
| amount: [1109, [Validators.required, Validators.pattern(/\d+/)]] | ||
| }); | ||
|
|
||
| elementsOptions: StripeElementsOptions = { | ||
| locale: 'en' | ||
| }; | ||
|
|
||
| paying = false; | ||
|
|
||
| constructor( | ||
| private fb: FormBuilder, | ||
| private plutoService: PlutoService, | ||
| private stripeService: StripeService | ||
| ) {} | ||
|
|
||
| ngOnInit() { | ||
| this.plutoService.createPaymentIntent({ | ||
| amount: this.stripeTest.get('amount').value, | ||
| currency: 'eur' | ||
| }).subscribe(pi => { | ||
| this.elementsOptions.clientSecret = pi.client_secret; | ||
| }); | ||
| } | ||
|
|
||
| pay() { | ||
| if (this.stripeTest.valid) { | ||
| this.paying = true; | ||
| this.stripeService.confirmPayment({ | ||
| elements: this.paymentElement.elements, | ||
| confirmParams: { | ||
| payment_method_data: { | ||
| billing_details: { | ||
| name: this.stripeTest.get('name').value | ||
| } | ||
| } | ||
| }, | ||
| redirect: 'if_required' | ||
| }).subscribe(result => { | ||
| this.paying = false; | ||
| console.log('Result', result); | ||
| if (result.error) { | ||
| // Show error to your customer (e.g., insufficient funds) | ||
| alert({ success: false, error: result.error.message }); | ||
| } else { | ||
| // The payment has been processed! | ||
| if (result.paymentIntent.status === 'succeeded') { | ||
| // Show a success message to your customer | ||
| alert({ success: true }); | ||
| } | ||
| } | ||
| }); | ||
| } else { | ||
| console.log(this.stripeTest); | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.