Argument of type '"paymentRequestButton"' is not assignable to parameter of type 'ElementType'.

From your previous issue i tried that code but its not working anymore. Please can you have this fixed. Any help would be really appreciated.

Thanks

Hello,

I am a beginners with Stripe and I don't wan't to do something wrong with my customers payments informations. I'm doing a monthly subscription, do you have a simple example to create a charge or a customer with your API to understand what I need to do with the token ? Please

Thank a lot

Hello,

When I go to the view with the this.card.mount() and go away from the view, then return to that view again I get the following error:

core.es5.js:1020 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at SafeSubscriber._next (paymentcomponent.component.ts:154)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrSetError (Subscriber.js:247)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:187)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at MapSubscriber.webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next (map.js:83)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at FilterSubscriber.webpackJsonp.../../../../rxjs/operator/filter.js.FilterSubscriber._next (filter.js:87)
    at FilterSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at BehaviorSubject.webpackJsonp.../../../../rxjs/BehaviorSubject.js.BehaviorSubject._subscribe (BehaviorSubject.js:28)

Line 154 is this line from your example:
this.card.mount(this.cardRef.nativeElement);

The nativeElement is a property for the cardRef using the angular ElementRef and When reading about it, they say:

USE WITH CAUTION

Use this API as the last resort when direct access to DOM is needed. Use templating and data-binding provided by Angular instead. Alternatively you take a look at Renderer which provides API that can safely be used even when direct access to native elements is not supported.
Relying on direct DOM access creates tight coupling between your application and rendering layers which will make it impossible to separate the two and deploy your application into a web worker.

Should you be using something else, or a better way of doing this?

When looking at that reference document that I linked above (and here) it shows a security issue, and being a payment I feel this should be top priority to find a better way than using ElementRef.. Here is the note from Angular.IO

Security Risk

Permitting direct access to the DOM can make your application more vulnerable to XSS attacks.

Element on footprint should be

on(ev: ElementEventType, handler: (event?: any) => void): void;

as stripe documentation indicates that a parameter is passed to the handler for some of the events.

Thank you for publishing this! May I use this to integrate Stripe Elements to my Angular 4 app? I suppose you do not use jQuery anywhere in your library?

Hi
Is it / Would it be possible to have an input binding to ngx-stripe-card component to pass in the FormGroup and the component would take care of form validation?

My point is I want to be able to use <button type="submit" [disabled]="stripeTest.invalid" ></button> on button to disable button if the fields in card component are not set or are invalid.

In documentation add "this" like on screenshot.
And all works. Thx.

Hello,

I wanted to report that you've mistyped a response parameter name in README.md.

You've used result.token inside call but there is no parameter named result. You need to change token to result 😬 .

is there a way to determine if the card information is valid ? I wish to disable the buy button until such time.

Angular 5.

If I try to use Stripe form in a modal window (using NgbModal service of ng-bootstrap) there's an error "Cannot read property 'getCard' of undefined".
Seems like this.card is initialized somewhere else because html code of the window is moving
somewhere in the end of the body.

Is there any workaround for this issue?

can you provide a quick example of how to use onCard. I have tried :

<ngx-stripe-card [options]="cardOptions" [elementsOptions]="elementsOptions" (onCard)="card"></ngx-stripe-card>

But this.card is empty when I try create the token

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.

When I'm trying to createToken I get the error

Please make sure the Element you are attempting to use is still mounted.

I don't really understand how it can't be mounted, I'm using the same implementation you've documented i.e I mount the card using

     this.card.mount(this.cardRef.nativeElement);

and the field works as I'd expect until requesting the token.

HI Guys ,
I am getting error getCard is undefind and where to pass options ,
Sharing my implementation code below

Here is my Stripe Component ts :-
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { StripeService, Elements, Element as StripeElement, ElementsOptions, StripeCardComponent, ElementOptions } from "ngx-stripe";

@component({
selector: 'app-stripe',
templateUrl: './stripe.component.html',
styleUrls: ['./stripe.component.scss']
})
export class StripeComponent implements OnInit {
elements: Elements;
// card: StripeElement;
@ViewChild(StripeCardComponent) card: StripeCardComponent;

cardOptions: ElementOptions = {
style: {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 300,
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSize: '18px',
'::placeholder': {
color: '#CFD7E0'
}
}
}
};

elementsOptions:ElementsOptions = {
locale: 'es'
};
stripeTest: FormGroup;
constructor(private fb: FormBuilder,
private stripeService: StripeService) { }

ngOnInit() {
this.stripeTest = this.fb.group({
name: ['', [Validators.required]]
});
}

buy() {
debugger;
const name = this.stripeTest.get('name').value;
this.stripeService
.createToken(this.card.getCard(), { name })
.subscribe(result => {
if (result.token) {
// Use the token to create a charge or a customer
// https://stripe.com/docs/charges
console.log(result.token.id);
} else if (result.error) {
// Error creating the token
console.log(result.error.message);
}
});
}
onCardChange(event) {
console.log(event);
}
}

below HTML code

Error Screen

I am implementing in Angular 5 , any quick help is highly appreciable

I am trying to use ngx-stripe in a project compiled with AOT: it seems that the key is not injected in the StripeService (the key argument is undefined). The exact same code compiled without the --aot flag is working as expected.

I am not sure how you could fix this. Maybe distribute the source .ts files in the NPM package?

Hi,

I want to use the strip add card functionality in popup. It is working in normal html templates. But it showing following error while using in popup. I am using Angular 5.

ERROR Error: The selector you specified (.card-element-box) applies to no DOM elements that are currently on the page.
Make sure the element exists on the page before calling mount().

I understand that the specified html element is not available while calling stripe service since it is dynamically added by popup. Please help me to resolve the issue

Thanks

I'm having a couple of issues with the component:
1 - I can't set all the styles that I want on the inner elements (for example: background color, border, border radius).
Since the content is inside an iframe, I can't set the style by css.

2 - I want the form submit button to be disabled until all the data is entered, but this information is missing (hooking "on" is just not enough)

You mention that this has to be done:
this.stripeService
.createToken(this.card.getCard(), { name })
.subscribe(result => {
// and now what?

});

After I get my token, I need to do an http post to my api to do the charge and other tasks...

I tried: return this.http.post().pipe(map(), catchError()) but I get errors between being a subscribe of an observable and others...

My question is how I mix the two requests, the one for the token and the second for the payment. Especially with the new ngrx 4 architecture (pipe, etc.)

Thanks in advance and apologize if this is not the place for this question...

Can I create subscriptions using this package?
On trying the following:
//create subscription
this.stripeService.subscriptions.create({
customer: result.token.id,

, am getting this error:
Property 'subscriptions' does not exist on type 'StripeService'.

Please Some one Help me out.

Hi @richnologies

In my application there are many key's I use for my customers, but wanted to see if it exists or plans to add a way to change the Publishable key ?

Thanks again for all of your work on this!

Why is it not possible to create a customer with this library?That would be a useful feature.

Hi

I am receiving Stripe apiKey from a http call on checkout page, how to use it from there in forRoot('apiKey').

Also, please, how does the buy() action get invoked exactly? Do you have an HTML with a ReactiveForm example please? Thanks again!

I get this error following your instruction...

When I add this line I get the error:
NgxStripeModule.forRoot({
      apiKey: 'your-stripe-publishable key'
    }),

Error:
Error TS2345 (TS) Argument of type '{ apiKey: string; }' is not assignable to parameter of type 'string'.

Please help.
I am using Angular 4.4.4
with angular-cli

Any recommendation for showing/hiding the card element? I'm using an *ngIf to show/hide the card entry element. If I change the variable in the *ngIf to add/remove the element and try to call this.card.mount() i get an error: webpack-internal:///../../../core/esm5/core.js:1655 ERROR Error: You must provide a Stripe Element or a valid token type to create a Token.

I'm assuming this is because the element isn't in the DOM yet.

I'm doing this to allow a user to update their card details and don't want the form fields to be shown initially.

I don't use stripe elements, thus, when I try to get the token, I can't use the element overload:

this.stripeService.getToken(this.card, {name})…

Also, this other version doesn't work either... at least in typescript:

this.stripeService.getToken({number, exp_month, exp_year, cvc}, {name})…

Typescript says the object is not an PII...

What should I pass when I'm not using elements?

Thanks in advance...
Miguel Delgado

I can see ElementsOptions that has a locale property, but I'm not sure how we can set this. Also, would it be possible to accept this dynamically (as an Observable?) so that users of ngx-translate may update the locale on-the-fly when user changes language?

Hello,

I developed a browser WebExtension with ngx-stripe, but it's impossible to make a payment without being in HTTPS. This error message appears:
ERROR Error: Live Stripe.js integrations must use HTTPS. For more information: https://stripe.com/docs/stripe-js/elements/quickstart#http-requirements
It works well with the test key, but not with the production key.

Do you have a solution to work around this problem?

Thank you for your answer.

Regards.

Anyone else noticed this? I know it's caused by uBlock origin so the problem is caused "there". And not necessarily related to this ngx implemention. But how are others dealing with this? This adblocker has 10 million+ users. So it's a serious issue and I can't find any info about it online. Is Stripe Elements doing something questionable that leads it to be blocked?

I'm trying to use custom elements to design a form.
Something derived from what Stripe provides in https://stripe.github.io/elements-examples/

But am struggling to find a way to have multiple elements created with elements.create() register as a single card information object.

Thanks!

Hello,
Will you provide the 'iban' element soon?
Regards

Thank you for a great project.

I have a question about real time validation. If you refer to https://stripe.com/docs/stripe-js

They show an example using real time validation.

// Create an instance of the card Element.
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

I tried to do something similar but noticed the card.on function does not have an event argument which is required for displaying the event error message.

this.card = this.elements.create('card', {
            style: {
              base: {
                fontSize: '1.5rem'
              }
            }
          });
          this.card.mount('#card-element');

          this.card.on('change', () => {

          });

Just wondering if I am missing something or if you had any suggestions.

Hi there

Trying to use ngx-stripe module in my project. When page is loading a client error is thrown at line 634 from file ngx-stripe.js

var /** @type {?} */ elements$ = Observable$1.combineLatest(this.elementsOptions$.asObservable(), this.stripe$.asObservable()).switchMap(function (_a) {

Any idea how to solve it ?

Thanks

Angular: 6.1.10
ngx-stripe : 0.8.2
rxjs : 6.3.3

Hi Guys I've installed this package and I'm using Angular 7.1.3 but I'm receiving the following error, is there a chance you can apply a quick fix for this? thanks!

ERROR in node_modules/ngx-stripe/src/components/stripe-card.component.d.ts(2,10): error TS2305: Module '"/ng-app/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.

How do I set the class for the form like in the docs:

registerElements([cardNumber, cardExpiry, cardCvc], 'example3');

Please update library to support angular v7

warning " > [email protected]" has incorrect peer dependency "@angular/common@^6.0.0-rc.1". warning " > [email protected]" has incorrect peer dependency "@angular/core@^6.0.0-rc.1".

Change, OnCard are not called when the card value is changed.
How can i know when the card values are changed?

Looks like the type of the cardComponent is currently being defaulted to 'card'. Is there any way to currently use different card types while using stripeCardComponent?

Thanks

Why is it not possible to create a customer with this library?That would be a useful feature.

I'm getting an error while trying to run the project on Angular 6

Module build failed: Error: /Users/.../Sites/.../node_modules/ngx-stripe/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

This error was present in the console even before you added StripeCardComponent. It happens the first time the stripe script is loaded:

[Log] TypeError: undefined is not an object (evaluating '_this.cardRef.nativeElement') (main.bundle.js, line 2715)
(anonymous function) — book-bedroom.component.ts:43
__tryOrUnsub — Subscriber.js:238
next — Subscriber.js:185
_next — Subscriber.js:125
next — Subscriber.js:89
_next — map.js:83
next — Subscriber.js:89
_next — filter.js:87
next — Subscriber.js:89
next — Subject.js:55
next — BehaviorSubject.js:44
onload — ngx-stripe.es5.js:78
wrapFn — zone.js:1075
onInvokeTask — core.es5.js:3881
runTask — zone.js:192
invokeTask — zone.js:499
invokeTask — zone.js:1427
globalZoneAwareCallback — zone.js:1445

I'm calling the strip service in the child component, While parent componet load it self child is called and onInit is proceeded. In the normal ng serve it's working fine. But in the prod build it's throwing error like
Cannot read property 'elements' of undefined
import { StripeService, Elements, Element as StripeElement, ElementsOptions } from 'ngx-stripe';
constructor(private stripeService: StripeService) {}
ngOnit() { this.stripeService.elements(this.elementsOptions).subscribe(elements => { this.elements = elements; // To do mount the elements }); }

Hello @richnologies, I'm getting the below error while loading the module using SystemJs.

localhost/:39 Error: Module not already loaded loading "../../Observable" as http://localhost/Observable.
  Evaluating http://localhost/node_modules/ngx-stripe/bundles/ngx-stripe.umd.js
  Evaluating http://localhost/scripts/app/app.module.js
  Evaluating http://localhost/scripts/app/boot.js
  Loading scripts/app
    at require (system.src.js:2868)
    at Object.eval (/node_modules/ngx-stripe/bundles/ngx-stripe.umd.js:7)
    at execute (system.src.js:2951)
    at dynamicExecute (system.src.js:1145)
    at doEvaluate (system.src.js:1092)
    at ensureEvaluate (system.src.js:1000)
    at system.src.js:1018
    at Object.eval (/scripts/app/app.module.js:15)
    at eval (/scripts/app/app.module.js:64)
    at eval (/scripts/app/app.module.js:65)

The issue is with loading Observable

Hi
When I build my app for development with ng build the package downloads the stripe scripts from script.src = 'https://js.stripe.com/v3/';

When I build the app with ng build --prod I'm getting following errors in runtime:
error in Firefox: message: "this.stripe is undefined"
error in Chrome: TypeError: Cannot read property 'elements' of undefined

The ngx-stripe package is not loading the stripe scripts, there is no record in Network list
No other errors in console.
It looks like the load() method does not work when built with AOT.

versions:
@angular 5.2.9
ngx-stripe 0.7.1

Hi @richnologies
I implemented ngx-stripe sdk to our IONIC3 application.
I followed StripeCardComponent codes as shown ReadME. It works well on Android device.
But it doesn't work on iOS device.
<ngx-stripe-card [options]="cardOptions" [elementsOptions]="elementsOptions">
On Android device, I see credit card field by above code. But I don't see credit card field on iOS.
Can you please help me with that issue?

Regards,
Sidor

Getting below error when write same code as example
TypeError: Cannot read property 'elements' of undefined
at StripeService.elements (http://localhost:8100/build/vendor.js:99663:28)
at SwitchMapSubscriber.project (http://localhost:8100/build/vendor.js:99827:48)
at SwitchMapSubscriber._next (http://localhost:8100/build/vendor.js:141243:27)
at SwitchMapSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:38848:18)
at CombineLatestSubscriber.notifyNext (http://localhost:8100/build/vendor.js:141035:34)
at InnerSubscriber._next (http://localhost:8100/build/vendor.js:136619:21)
at InnerSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:38848:18)
at BehaviorSubject._subscribe (http://localhost:8100/build/vendor.js:140722:24)
at BehaviorSubject.Observable._trySubscribe (http://localhost:8100/build/vendor.js:26619:25)
at BehaviorSubject.Subject._trySubscribe (http://localhost:8100/build/vendor.js:41826:51)
Ionic Framework: 3.9.2
Ionic App Scripts: 3.2.0
Angular Core: 5.2.9
Angular Compiler CLI: 5.2.9
Node: 6.10.3
OS Platform: Windows 7
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36

Just given the rxjs6 version a try but the paymentRequestButton doesn't seem to work now

    this.paymentRequest = this.stripeService.paymentRequest({

    });

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

gives an error of

Uncaught Error: Invalid value for create(): paymentRequest should be a stripe.paymentRequest(...) instance. You specified: [object Object].