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

    1.0.1 • Public • Published

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

    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.

    Install

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

    DownloadsWeekly Downloads

    47

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    166 kB

    Total Files

    45

    Last publish

    Collaborators

    • defenderbass
    • vladimir.potekhin
    • waterplea
    • marsibarsi