taiga-family
Payment Request API for Angular
Angular does not have any abstractions over Payment Request API. This library provides you two ways to use this API with Angular of 6+ version.
Install
If you do not have @ng-web-apis/common:
npm i @ng-web-apis/commonNow install the package:
npm i @ng-web-apis/payment-requestHow to use
As an Angular service:
import {PaymentRequestService} from '@ng-web-apis/payment-request';
...
constructor(private readonly paymentRequest: PaymentRequestService) {}
pay(details: PaymentDetailsInit) {
this.paymentRequest.request(details).then(
response => {
response.complete();
},
error => {},
);
}As a set of directives:
<div
waPayment
[paymentTotal]="total"
>
<div
*ngFor="let item of items"
waPaymentItem
[paymentLabel]="item.label"
[paymentAmount]="item.amount"
>
{{item.label}} ({{item.amount}})
</div>
<button
(waPaymentSubmit)="onPaymentSubmit($event)"
(waPaymentError)="onPaymentError($event)"
>
Buy
</button>
</div>Do not forget to import PaymentRequestModule:
import {PaymentRequestModule} from '@ng-web-apis/payment-request';
...
@NgModule({
...
imports: [
...
PaymentRequestModule
]
})
export class YourModule {}As a good example of usage you can take a look at a project live demo on CodeSandbox
waPayment
waPayment directive defines a scope for a new payment and needs PaymentItem object with information about a label and a total sum of the payment
How to use:
<any-element
waPayment
[paymentTotal]="total"
>
...
</any-element>It implements PaymentDetailsInit
Required inputs:
paymentTotalis a information about a label and a total sum of the payment as PaymentItem
Additional inputs:
paymentIdis an id of the payment asstringpaymentModifiersis an array of PaymentDetailsModifierpaymentShippingOptionsis a PaymentShippingOption object for the payment.
waPaymentItem
Each item of the payment is a waPaymentItem directive. It is a declarative
PaymentItem for your Payment
How to use:
<any-element
waPayment
[paymentTotal]="total"
>
<any-element
*ngFor="let item of items"
waPaymentItem
[paymentLabel]="item.label"
[paymentAmount]="item.amount"
>
{{item.label}}
</any-element>
</any-element>It implements PaymentItem
Required inputs:
paymentAmountis a price of payment item in modal as PaymentCurrencyAmountpaymentLabelis a title of payment item in modal asstring
Additional inputs:
paymentPendingis native property for PaymentItem asboolean
waPaymentSubmit
This directive starts a Payment Request modal in your browser that returns PaymentResponse or an error
How to use:
<any-element
waPayment
[paymentTotal]="total"
>
...
<button
(waPaymentSubmit)="onPayment($event)"
(waPaymentError)="onPaymentError($event)"
>
Buy
</button>
</any-element>Outputs:
waPaymentSubmitemits PaymentResponse object to handle a payment request resultwaPaymentErroremits anErrororDOMExceptionwith information about user's problem that did not allow payment to proceed
Tokens
The library also provides some tokens to simplify working with Payment Request API:
PAYMENT_REQUEST_SUPPORTreturnstrueif user's browser supports Payment Request API
export class Example {
constructor(@Inject(PAYMENT_REQUEST_SUPPORT) private readonly canRequest: boolean) {}
}- You can provide
PAYMENT_METHODSas an array of supported API methods. It uses[{supportedMethods: 'basic-card'}]by default
@Component({
// ...
providers: [
{
provide: [PAYMENT_METHODS],
useValue: [
// a sample with Google Pay from https://developers.google.com/pay/api/web/guides/paymentrequest/tutorial?hl=en
{supportedMethods: 'https://google.com/pay', data: googlePaymentDataRequest},
{supportedMethods: 'basic-card'},
],
},
],
})
export class Example {
// ...
}- You can provide
PAYMENT_OPTIONSas an object with info that you need about a payer. It uses{}by default
@Component({
// ...
providers: [
{
provide: [PAYMENT_OPTIONS],
useValue: {
shippingType: 'express',
requestPayerName: true,
requestShipping: true,
requestPayerEmail: true,
},
},
],
})
export class Example {
// ...
}Browser support
 |
 |
 |
 |
|---|---|---|---|
| 12+ | Disabled by default | 61+ | 11.1+ |
See also
All @ng-web-apis for your apps