Ng-payment-request-api NPM

Angular Payment Request Api

Payment Request wrapper with TypeScript for angular +4.

Installation

To install this library, run:

$ npm install ng-payment-request-api --save

How to use

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
//Import payment request api module
import {PaymentRequestModule} from "ng-payment-request-api";


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PaymentRequestModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Parent Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  paymentOptions = {
    supportedPaymentMethods: [
      // regular payment
      {
        supportedMethods: 'basic-card',
      },
      //apply pay support. currently on safari ios only apply pay supported.
      {
        supportedMethods: 'https://apple.com/apple-pay',
        data: {
          version: 2,
          supportedNetworks:  ['amex', 'jcb', 'visa'],
          countryCode: 'US',
          merchantIdentifier: 'merchant.sleek.com',
          merchantCapabilities: ['supportsDebit', 'supportsCredit', 'supports3DS']
        }
      }
    ]
  };
  items: PaymentItem[] = [
    {
      label: 'product 1',
      amount: {
        value: 5,
        currency: "USD"
      }
    },
    {
      label: 'product 2',
      amount: {
        value: 8,
        currency: "USD"
      }
    }
    ];
  shippingOptions = [{
    id: 'economy',
    label: 'Economy Shipping (5-7 Days)',
    amount: {
      currency: 'USD',
      value: '0',
    },
  }, {
    id: 'express',
    label: 'Express Shipping (2-3 Days)',
    amount: {
      currency: 'USD',
      value: '5',
    },
  }, {
    id: 'next-day',
    label: 'Next Day Delivery',
    amount: {
      currency: 'USD',
      value: '12',
    },
  }];
  constructor() {}

  chargeClient(paymentResponse) {
    //TODO actual charge.
  }

  updateShippingOption(response) {
    // example:
    // response =  {
    //     total: 55,
    //     shippingOption :  {
    //       id: 'next-day',
    //       label: 'Next Day Delivery',
    //       amount: {
    //       currency: 'USD',
    //           value: '12',
    //       }
    //     }
    //  }
    }
}

And just use the Directive in your HTML

 <button appPaymentRequest
          [shippingOptions]="shippingOptions"
          [options]="paymentOptions"
          [items]="items"
          (onCheckout)="chargeClient($event)"
          (onShippingOptionChange)="updateShippingOption($event)">
      Checkout
  </button>

paymentOptions configuration can be found here. If you don't provide any parameters, default one are used.