Examples
The aim of this section is to provide some examples of usual application. Based on questions, problems or suggestions, extra examples will be added.

Create Token

This is the easy example because it does not need server side code.
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>
Copied!

Collect Payment Intent

The aim of this library is to provide a wrapper around StripeJS. In order to collect payments, you also need a server code. The one provided here is by all means, not a complete server or ready to use in a production environment, just enough to show how to create a Payment Intent.
payment-intent.component.ts
payment-intent.component.html
server.js
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, StripeCardComponent } 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(StripeCardComponent) card: StripeCardComponent;
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: [1000, [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!
1
<h2>Collection Payment Intent</h2>
2
<div [formGroup]="stripeTest">
3
<input formControlName="name" />
4
<input formControlName="amount" />
5
<ngx-stripe-card
6
[options]="cardOptions"
7
[elementsOptions]="elementsOptions"
8
></ngx-stripe-card>
9
<button type="submit" (click)="pay()">
10
PAY
11
</button>
12
</div>
13
Copied!
1
const express = require("express");
2
const bodyParser = require("body-parser");
3
4
const PORT = 3000;
5
6
const Stripe = require("stripe");
7
const stripe = Stripe("***your-stripe-private-key***");
8
9
const app = express();
10
app.use(bodyParser.json());
11
app.post("/create-payment-intent", (req, res) => {
12
stripe.paymentIntents.create(
13
{
14
amount: parseInt(req.body.amount),
15
currency: "usd",
16
payment_method_types: ["card"],
17
},
18
function (err, paymentIntent) {
19
if (err) {
20
res.status(500).json(err.message);
21
} else {
22
res.status(201).json(paymentIntent);
23
}
24
}
25
);
26
});
27
28
app.listen(PORT, () => console.log(`Server ready on port ${PORT}`));
29
Copied!

Input Validation

Stripe elements validate customer input as it is typed. To help your customers catch mistakes, listen to change events on an Element and display any errors
1
import { Component, OnInit, ViewChild } from '@angular/core';
2
3
import { StripeCardComponent } from 'ngx-stripe';
4
import { StripeCardElementChangeEvent } from '@stripe/stripe-js';
5
6
@Component({
7
selector: 'app-input-validation',
8
template: `
9
<ngx-stripe-card (change)="onChange($event)"></ngx-stripe-card>
10
<div id="card-errors"></div>
11
`,
12
})
13
export class StylingExampleComponent {
14
@ViewChild(StripeCardComponent) card: StripeCardComponent;
15
16
onChange(ev: StripeCardElementChangeEvent) {
17
const displayError = document.getElementById('card-errors');
18
if (event.error) {
19
displayError.textContent = event.error.message;
20
} else {
21
displayError.textContent = '';
22
}
23
}
24
}
Copied!
Last modified 1yr ago