Web APIs for Angular

High quality lightweight wrappers for native Web APIs for idiomatic use with Angular
Home

Angular does not have any abstractions over PaymentRequest API . This library provides you two ways to use this API with Angular of 6+ version.

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:

Click to add some items to a shopping cart:

item

50 ₽

item

100 ₽

item

70 ₽

item

70 ₽

item

10 ₽

item

1000 ₽

Shopping Cart

Nothing added
Total: 0 ₽

How it works:

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

Each item of the shipping cart is a  waPaymentItem directive. It is a declarative PaymentItem for your Payment

Click on the button starts a PaymentRequest modal in your browser that returns PaymentResponse or an error. It works due a  waPaymentSubmit directive.