`

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
PaymentItem

Additional 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 Payment

How 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 string

Additional 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 proceed

Tokens

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 {
// ...
}
``

Browser support

| | | | |
| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| 12+ | Disabled by default | 61+ | 11.1+ |

See also

All @ng-web-apis for your apps