@ng-web-apis/payment-request
TypeScript icon, indicating that this package has built-in type declarations

3.0.6 • Public • Published

ng-web-apis logo Payment Request API for Angular

npm version npm bundle size codecov

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

Package Sidebar

Install

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

Weekly Downloads

26

Version

3.0.6

License

Apache-2.0

Unpacked Size

106 kB

Total Files

30

Last publish

Collaborators

  • marsibarsi
  • waterplea
  • vladimir.potekhin
  • defenderbass