This is a library for declarative use of Payment Request API with Angular
npm install @ng-web-apis/payment-request


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.
If you do not have @ng-web-apis/common:
``bash`
npm i @ng-web-apis/common
Now install the package:
`bash`
npm i @ng-web-apis/payment-request
As an Angular service:
`ts
import {WaPaymentRequestService} from '@ng-web-apis/payment-request';
...
constructor(private readonly paymentRequest: WaPaymentRequestService) {}
pay(details: PaymentDetailsInit) {
this.paymentRequest.request(details).then(
response => {
response.complete();
},
error => {},
);
}
`
As a set of directives:
`html
waPayment
[paymentTotal]="total"
>
*ngFor="let item of items"
waPaymentItem
[paymentLabel]="item.label"
[paymentAmount]="item.amount"
>
{{item.label}} ({{item.amount}})
Do not forget to import
WaPaymentRequest:`ts
import {WaPaymentRequest} from '@ng-web-apis/payment-request';
...
@Component({
...
imports: [
...
WaPaymentRequest,
]
})
export class YourComponent {}
`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:
`html
waPayment
[paymentTotal]="total"
>
...
`It implements
PaymentDetailsInit
Required inputs:
-
paymentTotal is a information about a label and a total sum of the payment as
PaymentItemAdditional inputs:
-
paymentId is an id of the payment as string-
paymentModifiers is an array of
PaymentDetailsModifier-
paymentShippingOptions is a
WaPaymentShippingOption
object for the payment.#### waPaymentItem
Each item of the payment is a
waPaymentItem directive. It is a declarative
PaymentItem for your PaymentHow to use:
`html
waPayment
[paymentTotal]="total"
>
*ngFor="let item of items"
waPaymentItem
[paymentLabel]="item.label"
[paymentAmount]="item.amount"
>
{{item.label}}
`It implements
PaymentItem
Required inputs:
-
paymentAmount is a price of payment item in modal as
PaymentCurrencyAmount-
paymentLabel is a title of payment item in modal as stringAdditional inputs:
-
paymentPending is native property for PaymentItem as boolean#### waPaymentSubmit
This directive starts a Payment Request modal in your browser that returns
PaymentResponse or an error
How to use:
`html
waPayment
[paymentTotal]="total"
>
...
(waPaymentSubmit)="onPayment($event)"
(waPaymentError)="onPaymentError($event)"
>
Buy
`Outputs:
-
waPaymentSubmit emits PaymentResponse object to
handle a payment request result-
waPaymentError emits an Error or DOMException with information about user's problem that did not allow payment
to proceedTokens
The library also provides some tokens to simplify working with Payment Request API:
-
WA_PAYMENT_REQUEST_SUPPORT returns true if user's browser supports Payment Request API`ts
export class Example {
constructor(@Inject(WA_PAYMENT_REQUEST_SUPPORT) private readonly canRequest: boolean) {}
}
`- You can provide
WA_PAYMENT_METHODS as an array of supported API methods. It uses
[{supportedMethods: 'basic-card'}] by default`ts
@Component({
// ...
providers: [
{
provide: [WA_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
WA_PAYMENT_OPTIONS as an object with info that you need about a payer. It uses {} by default`ts
@Component({
// ...
providers: [
{
provide: [WA_PAYMENT_OPTIONS],
useValue: {
shippingType: 'express',
requestPayerName: true,
requestShipping: true,
requestPayerEmail: true,
},
},
],
})
export class Example {
// ...
}
``|
|
|
|
|
| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| 12+ | Disabled by default | 61+ | 11.1+ |
All @ng-web-apis for your apps