Payment Request Button
Collect payment and address information from customers who use Apple Pay, Google Pay, Microsoft Pay, and the Payment Request API.
The Payment Request Button Element gives you a single integration for Apple Pay, Google Pay, Microsoft Pay, and the browser standard Payment Request API.

Prerequisites

Add a payment method to your browser.
Serve your application over HTTPS, both in development and production
For Apple Pay you will need to verify your domain, both in development and production
Please check all the information regarding prerequisites in the Stripe Payment Request Button site.
After that, you can use the built-in component. Here is a complete example:
payment-request-button.component.ts
payment-request-button.component.html
1
2
import { Component } from '@angular/core';
3
import { HttpClient } from '@angular/common/http';
4
import { Observable, of } from 'rxjs';
5
import { switchMap } from 'rxjs/operators';
6
7
import { StripeService } from 'ngx-stripe';
8
import {
9
StripeElementsOptions,
10
PaymentRequestPaymentMethodEvent,
11
PaymentIntent,
12
PaymentRequestShippingAddressEvent,
13
} from '@stripe/stripe-js';
14
15
@Component({
16
selector: 'app-payment-request-button',
17
templateUrl: './payment-request-button.component.html',
18
})
19
export class PaymentRequestButtonComponent {
20
elementsOptions: StripeElementsOptions = {
21
locale: 'es',
22
};
23
24
paymentRequestOptions = {
25
country: 'ES',
26
currency: 'eur',
27
total: {
28
label: 'Demo Total',
29
amount: 1099,
30
},
31
requestPayerName: true,
32
requestPayerEmail: true,
33
};
34
35
constructor(
36
private http: HttpClient,
37
private stripeService: StripeService
38
) {}
39
40
onPaymentMethod(ev: PaymentRequestPaymentMethodEvent) {
41
this.createPaymentIntent()
42
.pipe(
43
switchMap((pi) => {
44
return this.stripeService
45
.confirmCardPayment(
46
pi.client_secret,
47
{ payment_method: ev.paymentMethod.id },
48
{ handleActions: false }
49
)
50
.pipe(
51
switchMap((confirmResult) => {
52
if (confirmResult.error) {
53
// Report to the browser that the payment failed,
54
// prompting it to re-show the payment interface,
55
// or show an error message and close the payment.
56
ev.complete('fail');
57
return of({
58
error: new Error('Error Confirming the payment'),
59
});
60
} else {
61
// Report to the browser that the confirmation was
62
// successful, prompting it to close the browser
63
// payment method collection interface.
64
ev.complete('success');
65
// Let Stripe.js handle the rest of the payment flow.
66
return this.stripeService.confirmCardPayment(
67
pi.client_secret
68
);
69
}
70
})
71
);
72
})
73
)
74
.subscribe((result) => {
75
if (result.error) {
76
// The payment failed -- ask your customer for a new payment method.
77
} else {
78
// The payment has succeeded.
79
}
80
});
81
}
82
83
onShippingAddressChange(ev: PaymentRequestShippingAddressEvent) {
84
if (ev.shippingAddress.country !== 'US') {
85
ev.updateWith({ status: 'invalid_shipping_address' });
86
} else {
87
// Replace this with your own custom implementation if needed
88
fetch('/calculateShipping', {
89
data: JSON.stringify({
90
shippingAddress: ev.shippingAddress,
91
}),
92
} as any)
93
.then((response) => response.json())
94
.then((result) =>
95
ev.updateWith({
96
status: 'success',
97
shippingOptions: result.supportedShippingOptions,
98
})
99
);
100
}
101
}
102
103
onNotAvailable() {
104
// Subscribe to this event in case you want to act
105
// base on availability
106
console.log('Payment Request is not Available');
107
}
108
109
createPaymentIntent(): Observable<PaymentIntent> {
110
// Replace this with your own custom implementation
111
// to perform a Payment Intent Creation
112
// You will need your own Server to do that
113
return this.http.post<PaymentIntent>(
114
'/create-payment-intent',
115
{ amount: this.paymentRequestOptions.total.amount }
116
);
117
}
118
}
119
Copied!
1
<h2>Payment Request Button</h2>
2
<ngx-stripe-payment-request-button
3
[paymentOptions]="paymentRequestOptions"
4
(paymentMethod)="onPaymentMethod($event)"
5
(shippingaddresschange)="onShippingAddressChange($event)"
6
(notavailable)="onNotAvailable()"
7
></ngx-stripe-payment-request-button>
Copied!

Outputs

The component has a couple of Outputs you can subscribe. The ones in the example are the most important ones, but here is a complete list:
  • token
  • paymentMethod
  • cancel
  • shippingaddresschange
  • shippingoptionchange
  • notavailable
Last modified 1yr ago
Copy link