Payment Request API for Angular

Part of Web APIs 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/common

Now install the package:

npm i @ng-web-apis/payment-request

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

• 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 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:

• 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:

<any-element waPayment [paymentTotal]="total">
    ...
    <button
        (waPaymentSubmit)="onPayment($event)"
        (waPaymentError)="onPaymentError($event)"
    >
        Buy
    </button>
</any-element>

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:

• PAYMENT_REQUEST_SUPPORT returns true if user's browser supports Payment Request API

export class YourComponent {
    constructor(
        @Inject(PAYMENT_REQUEST_SUPPORT) private readonly canRequest: boolean
    ) {}
    ...

• You can provide PAYMENT_METHODS as 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 YourComponentThatMakesPaymentRequests {
    ...
}

• You can provide PAYMENT_OPTIONS as 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 YourComponentThatMakesPaymentRequests {
    ...
}

Browser support

12+	Disabled by default	61+	11.1+

See also

All @ng-web-apis for your apps

Open-source

Do you also want to open-source something, but hate the collateral work? Check out this Angular Open-source Library Starter we’ve created for our projects. It got you covered on continuous integration, pre-commit checks, linting, versioning + changelog, code coverage and all that jazz.