Awesome Open Source
Awesome Open Source

ng-web-apis logo Payment Request API for Angular

Part of Web APIs for Angular

npm version npm bundle size Travis (.com) Coveralls github angular-open-source-starter

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:

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

IE / Edge Firefox Chrome Safari
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.

Alternatives To Payment Request
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (239,722
Angular (54,898
Request (28,854
Payment (11,526
Modal Dialogs (4,865
Web Api (3,382
Payment Gateway (1,397
Payment Request (158
Apple Pay (132
Google Pay (26