paymentRequest button

[dottodot]

From what I can tell you can't add paymentRequest buttons with this. I think it would possible if there was access to private stripe: StripeJS; as you then be able to do this.paymentRequest = this.stripe.paymentRequest() then I think the rest would be ok.

[dottodot]

Actually worked out how to do it, not tested it much yet and probably not perfect but seems to work.

import {
  Component,
  OnInit,
  ViewChild,
  ElementRef,
  Inject
} from '@angular/core';
import { StripeService, WindowRef, STRIPE_PUBLISHABLE_KEY } from 'ngx-stripe';

@Component({
  selector: 'bos-payment-test',
  templateUrl: './payment-test.component.html'
})
export class PaymentTestComponent implements OnInit {
  @ViewChild('button') buttonRef: ElementRef;
  stripe: any;
  paymentRequest: any;
  prButton: any;
  elements: any;
  constructor(
    @Inject(STRIPE_PUBLISHABLE_KEY) private key: string,
    private stripeService: StripeService,
    private window: WindowRef
  ) {}

  ngOnInit() {
    this.stripeService.elements().subscribe(elements => {
      this.elements = elements;
      const Stripe = (this.window.getNativeWindow() as any).Stripe;
      this.stripe = Stripe(this.key);
      this.setupPayment();
    });
  }

  setupPayment() {
    this.paymentRequest = this.stripe.paymentRequest({
      country: 'GB',
      currency: 'gbp',
      total: {
        label: 'My Company',
        amount: 100
      },
      requestShipping: true,
      requestPayerPhone: true,
      requestPayerEmail: true
    });

    this.prButton = this.elements.create('paymentRequestButton', {
      paymentRequest: this.paymentRequest
    });

    this.paymentRequest.canMakePayment().then(result => {
      if (result) {
        this.prButton.mount(this.buttonRef.nativeElement);
      }
    });
  }
}

[eleventhaus]

Is there any word on whether this will become implemented using the already injected service without having to inject another service into the component?

[derschnee68]

@dottodot Thank you so much for your code, it's working 👍

[richnologies]

Hi, thanks @dottodot for the code. Since version 0.6.0 you can now however call the paymentRequest method on the stripeService, no need for fetch the instance. This should work.

` import { Component, OnInit, ViewChild, ElementRef, Inject } from '@angular/core'; import { StripeService } from 'ngx-stripe';

@Component({ selector: 'bos-payment-test', templateUrl: './payment-test.component.html' }) export class PaymentTestComponent implements OnInit { @ViewChild('button') buttonRef: ElementRef; paymentRequest: any; prButton: any; elements: any; constructor( private stripeService: StripeService ) {}

ngOnInit() { this.stripeService.elements().subscribe(elements => { this.elements = elements; this.setupPayment(); }); }

setupPayment() { this.paymentRequest = this.stripeService.paymentRequest({ country: 'GB', currency: 'gbp', total: { label: 'My Company', amount: 100 }, requestShipping: true, requestPayerPhone: true, requestPayerEmail: true });

this.prButton = this.elements.create('paymentRequestButton', {
  paymentRequest: this.paymentRequest
});

this.paymentRequest.canMakePayment().then(result => {
  if (result) {
    this.prButton.mount(this.buttonRef.nativeElement);
  }
});

} } `

[dottodot]

Works a treat thank you.

[Hesesses]

You should add this to readme! Awesome work

[richnologies]

Hi @Hesesses, I promise I will update the README this week with this an other things some of you asked for.

Thanks to you all for the feedback and support