Element Components
Element components provide a flexible way to securely collect payment information in your Angular app.
You can mount individual Element components inside of your Elements tree. Note that you can only mount one of each type of Element.

Create Token

In this example the Card Element is used to collection payment information and create a token.
create-token.component.ts
create-token.component.html
1
import { Component, OnInit, ViewChild } from '@angular/core';
2
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
3
4
import { StripeService, StripeCardComponent } from 'ngx-stripe';
5
import {
6
StripeCardElementOptions,
7
StripeElementsOptions
8
} from '@stripe/stripe-js';
9
10
@Component({
11
selector: 'app-create-token',
12
templateUrl: './create-token.component.html',
13
})
14
export class CreateTokenComponent implements OnInit {
15
@ViewChild(StripeCardComponent) card: StripeCardComponent;
16
17
cardOptions: StripeCardElementOptions = {
18
style: {
19
base: {
20
iconColor: '#666EE8',
21
color: '#31325F',
22
fontWeight: '300',
23
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
24
fontSize: '18px',
25
'::placeholder': {
26
color: '#CFD7E0'
27
}
28
}
29
}
30
};
31
32
elementsOptions: StripeElementsOptions = {
33
locale: 'en'
34
};
35
36
stripeTest: FormGroup;
37
38
constructor(private fb: FormBuilder, private stripeService: StripeService) {}
39
40
ngOnInit(): void {
41
this.stripeTest = this.fb.group({
42
name: ['', [Validators.required]]
43
});
44
}
45
46
createToken(): void {
47
const name = this.stripeTest.get('name').value;
48
this.stripeService
49
.createToken(this.card.element, { name })
50
.subscribe((result) => {
51
if (result.token) {
52
// Use the token
53
console.log(result.token.id);
54
} else if (result.error) {
55
// Error creating the token
56
console.log(result.error.message);
57
}
58
});
59
}
60
}
Copied!
1
<h2>Create Token Example</h2>
2
<ngx-stripe-card
3
[options]="cardOptions"
4
[elementsOptions]="elementsOptions"
5
></ngx-stripe-card>
6
<button type="submit" (click)="createToken()">
7
CREATE TOKEN
8
</button>
9
Copied!
The full list of components available:
Component
Selector
Card Element
ngx-stripe-card
Card Number Element
ngx-stripe-card-number
Card Expiry Element
ngx-stripe-card-expiry
Card CVC Element
ngx-stripe-card-cvc
Payment Request Button Element
ngx-stripe-payment-request-button
Au Bank Account Element
ngx-stripe-au-bank-account
Iban Element
ngx-stripe-iban
Ideal Bank Element
ngx-stripe-ideal-bank
Fpx Bank Element
ngx-stripe-fpx-bank

Card Group Directive

If you want to use the card number, expiry and cvc as separated elements you need to put them inside the card group directive.
This is necessary to ensure the three elements shared the same stripe elements objects, otherwise it won't work. As you can see in the example element options is not available for any of the three child components, but only for the group directive.
Here is an example using the Card Group as a Directive:
card-number.component.html
card-number.component.ts
1
<div
2
ngxStripeCardGroup
3
[formGroup]="stripeTest"
4
[elementsOptions]="elementsOptions"
5
>
6
<input formControlName="name" />
7
<input formControlName="amount" />
8
<ngx-stripe-card-number [options]="cardOptions"></ngx-stripe-card-number>
9
<ngx-stripe-card-expiry [options]="cardOptions"></ngx-stripe-card-expiry>
10
<ngx-stripe-card-cvc [options]="cardOptions"></ngx-stripe-card-cvc>
11
<button type="submit" (click)="pay()">
12
PAY
13
</button>
14
</div>
Copied!
1
import { Component, OnInit, ViewChild, ɵConsole } from '@angular/core';
2
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
3
import { HttpClient } from '@angular/common/http';
4
import { Observable } from 'rxjs';
5
import { switchMap } from 'rxjs/operators';
6
7
import { StripeService, StripeCardNumberComponent } from 'ngx-stripe';
8
import {
9
StripeCardElementOptions,
10
StripeElementsOptions,
11
PaymentIntent,
12
} from '@stripe/stripe-js';
13
14
import { environment as env } from '../../environments/environment';
15
16
@Component({
17
selector: 'app-simple-payment-intent',
18
templateUrl: './simple-payment-intent.component.html',
19
styleUrls: ['./simple-payment-intent.component.css'],
20
})
21
export class SimplePaymentIntentComponent implements OnInit {
22
@ViewChild(StripeCardNumberComponent) card: StripeCardNumberComponent;
23
24
cardOptions: StripeCardElementOptions = {
25
style: {
26
base: {
27
iconColor: '#666EE8',
28
color: '#31325F',
29
fontWeight: '300',
30
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
31
fontSize: '18px',
32
'::placeholder': {
33
color: '#CFD7E0',
34
},
35
},
36
},
37
};
38
39
elementsOptions: StripeElementsOptions = {
40
locale: 'es',
41
};
42
43
stripeTest: FormGroup;
44
45
constructor(
46
private http: HttpClient,
47
private fb: FormBuilder,
48
private stripeService: StripeService
49
) {}
50
51
ngOnInit(): void {
52
this.stripeTest = this.fb.group({
53
name: ['Angular v10', [Validators.required]],
54
amount: [1001, [Validators.required, Validators.pattern(/\d+/)]],
55
});
56
}
57
58
pay(): void {
59
if (this.stripeTest.valid) {
60
this.createPaymentIntent(this.stripeTest.get('amount').value)
61
.pipe(
62
switchMap((pi) =>
63
this.stripeService.confirmCardPayment(pi.client_secret, {
64
payment_method: {
65
card: this.card.element,
66
billing_details: {
67
name: this.stripeTest.get('name').value,
68
},
69
},
70
})
71
)
72
)
73
.subscribe((result) => {
74
if (result.error) {
75
// Show error to your customer (e.g., insufficient funds)
76
console.log(result.error.message);
77
} else {
78
// The payment has been processed!
79
if (result.paymentIntent.status === 'succeeded') {
80
// Show a success message to your customer
81
}
82
}
83
});
84
} else {
85
console.log(this.stripeTest);
86
}
87
}
88
89
createPaymentIntent(amount: number): Observable<PaymentIntent> {
90
return this.http.post<PaymentIntent>(
91
`${env.apiUrl}/create-payment-intent`,
92
{ amount }
93
);
94
}
95
}
96
Copied!
We also make available the component selector, in case you prefer to work that way, here is an example using the Card Group as a Component.
card-number.component.html
card-number.component.ts
1
<ngx-stripe-card-group
2
[formGroup]="stripeTest"
3
[elementsOptions]="elementsOptions"
4
>
5
<input formControlName="name" />
6
<input formControlName="amount" />
7
<ngx-stripe-card-number [options]="cardOptions"></ngx-stripe-card-number>
8
<ngx-stripe-card-expiry [options]="cardOptions"></ngx-stripe-card-expiry>
9
<ngx-stripe-card-cvc [options]="cardOptions"></ngx-stripe-card-cvc>
10
<button type="submit" (click)="pay()">
11
PAY
12
</button>
13
</ngx-stripe-card-group>
Copied!
1
import { Component, OnInit, ViewChild, ɵConsole } from '@angular/core';
2
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
3
import { HttpClient } from '@angular/common/http';
4
import { Observable } from 'rxjs';
5
import { switchMap } from 'rxjs/operators';
6
7
import { StripeService, StripeCardNumberComponent } from 'ngx-stripe';
8
import {
9
StripeCardElementOptions,
10
StripeElementsOptions,
11
PaymentIntent,
12
} from '@stripe/stripe-js';
13
14
import { environment as env } from '../../environments/environment';
15
16
@Component({
17
selector: 'app-simple-payment-intent',
18
templateUrl: './simple-payment-intent.component.html',
19
styleUrls: ['./simple-payment-intent.component.css'],
20
})
21
export class SimplePaymentIntentComponent implements OnInit {
22
@ViewChild(StripeCardNumberComponent) card: StripeCardNumberComponent;
23
24
cardOptions: StripeCardElementOptions = {
25
style: {
26
base: {
27
iconColor: '#666EE8',
28
color: '#31325F',
29
fontWeight: '300',
30
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
31
fontSize: '18px',
32
'::placeholder': {
33
color: '#CFD7E0',
34
},
35
},
36
},
37
};
38
39
elementsOptions: StripeElementsOptions = {
40
locale: 'es',
41
};
42
43
stripeTest: FormGroup;
44
45
constructor(
46
private http: HttpClient,
47
private fb: FormBuilder,
48
private stripeService: StripeService
49
) {}
50
51
ngOnInit(): void {
52
this.stripeTest = this.fb.group({
53
name: ['Angular v10', [Validators.required]],
54
amount: [1001, [Validators.required, Validators.pattern(/\d+/)]],
55
});
56
}
57
58
pay(): void {
59
if (this.stripeTest.valid) {
60
this.createPaymentIntent(this.stripeTest.get('amount').value)
61
.pipe(
62
switchMap((pi) =>
63
this.stripeService.confirmCardPayment(pi.client_secret, {
64
payment_method: {
65
card: this.card.element,
66
billing_details: {
67
name: this.stripeTest.get('name').value,
68
},
69
},
70
})
71
)
72
)
73
.subscribe((result) => {
74
if (result.error) {
75
// Show error to your customer (e.g., insufficient funds)
76
console.log(result.error.message);
77
} else {
78
// The payment has been processed!
79
if (result.paymentIntent.status === 'succeeded') {
80
// Show a success message to your customer
81
}
82
}
83
});
84
} else {
85
console.log(this.stripeTest);
86
}
87
}
88
89
createPaymentIntent(amount: number): Observable<PaymentIntent> {
90
return this.http.post<PaymentIntent>(
91
`${env.apiUrl}/create-payment-intent`,
92
{ amount }
93
);
94
}
95
}
Copied!
Last modified 1yr ago