ackerapple/stripe-angular

Angular to Stripe module containing useful providers, components, and directives

stripe-angular's Issues

New Payment Intents API for SCA

Starting from September 2019, the Strong Customer Authentication (SCA) will require businesses in Europe to request additional authentication for online payments.

Does this package supports the Payment Intents API instead of the Charges API?

https://stripe.com/docs/payments/payment-intents/web

Error: The referenced NgModule in static forRoot(publishableKey, options)

When running ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points this error occurs:

Compiling stripe-angular : es2015 as esm2015
Error: Error on worker #4: Error: The referenced NgModule in static forRoot(publishableKey, options) {
        return {
            ngModule: Module,
            providers: [
                StripeScriptTag,
                {
                    provide: STRIPE_PUBLISHABLE_KEY,
                    useValue: publishableKey
                },
                {
                    provide: STRIPE_OPTIONS,
                    useValue: options
                }
            ],
        };
    } is not a named class declaration in the typings program; instead we get Module: typeof StripeModule
    at ModuleWithProvidersAnalyzer.resolveNgModuleReference (/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/@angular/compiler-cli/ngcc/src/analysis/module_with_providers_analyzer.js:97:23)
    at /Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/@angular/compiler-cli/ngcc/src/analysis/module_with_providers_analyzer.js:47:50
    at Array.forEach (<anonymous>)
    at /Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/@angular/compiler-cli/ngcc/src/analysis/module_with_providers_analyzer.js:35:28
    at Array.forEach (<anonymous>)
    at ModuleWithProvidersAnalyzer.analyzeProgram (/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/@angular/compiler-cli/ngcc/src/analysis/module_with_providers_analyzer.js:33:23)
    at Transformer.analyzeProgram (/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/@angular/compiler-cli/ngcc/src/packages/transformer.js:126:45)
    at Transformer.transform (/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/@angular/compiler-cli/ngcc/src/packages/transformer.js:69:27)
    at ClusterWorker.compile (/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/@angular/compiler-cli/ngcc/src/main.js:168:42)
    at Worker.<anonymous> (/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/worker.js:44:42)
    at ClusterMaster.onWorkerMessage (/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:158:27)
    at /Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:46:95
    at ClusterMaster.<anonymous> (/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:238:57)
    at step (/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/tslib/tslib.js:136:27)
    at Object.next (/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/tslib/tslib.js:117:57)
    at /Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/tslib/tslib.js:110:75
    at new Promise (<anonymous>)
    at Object.__awaiter (/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/tslib/tslib.js:106:16)
    at EventEmitter.<anonymous> (/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/nx9/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:232:32)
    at EventEmitter.emit (events.js:305:20)

Library works in angular v15?

Hi, I install the library in angular 15 and do the following:

1. I put the https://js.stripe.com/v3/ inside index.html
2. Imported StripeModule.forRoot("") and write de pk inside
3. Copied the next code from the docs
   `import { Component } from "@angular/core"

const template=
`

{{ invalidError.message }}

<stripe-card #stripeCard
(catch) = "onStripeError($event)"
[(complete)] = "cardDetailsFilledOut"
[(invalid)] = "invalidError"
(cardMounted) = "cardCaptureReady = 1"
(paymentMethodChange) = "setPaymentMethod($event)"
(tokenChange) = "setStripeToken($event)"
(sourceChange) = "setStripeSource($event)"

<button type="button" (click)="stripeCard.createPaymentMethod(extraData)">createPaymentMethod
<button type="button" (click)="stripeCard.createSource(extraData)">createSource
<button type="button" (click)="stripeCard.createToken(extraData)">createToken
... more code
``

And the example code not work, all erros said the same

compatibility with angular 14?

Will there be any updates to this library for the latest versions of Angular?

ivy compatibility

When I run 0.5.1 in ivy I get the following error

ERROR in template must be a string
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Failed to compile.
ℹ ｢wdm｣: Compiling...
  0% compiling
Compiling stripe-angular : main as commonjs

Is ivy support planned?

Definite assignment assertion on @Input properties

Hi - Thanks for this awesome project! I've been reviewing the code base and just have a few suggestions that I think apply.

@input properties

They should not use a definite assignment assertion or !. New angular projects don't allow it. I double checked this with SO here:

https://stackoverflow.com/questions/59093938/angular-input-property-ending-with-exclamation-point''

Also I don't think this should be an @Input property:

@Input() token!:StripeToken

IIUC the component retrieves the Stripe Token via the Stripe API an then emits the value? Thus we never set it on the component ...

ng-container usage

We don't really need an ng-container in the stripe card:

<ng-container *ngIf="!StripeScriptTag.StripeInstance">
          <div style="color:red;">Stripe PublishableKey NOT SET. Use method StripeScriptTag.setPublishableKey()</div>
</ng-container>

IIUC - This will work just as well:

<div *ngIf="!StripeScriptTag.StripeInstance style="color:red;">Stripe PublishableKey NOT SET. Use method StripeScriptTag.setPublishableKey()</div>

ExportAs

Also don't think we need exportAs here:

exportAs:"StripeCard"

It should just export as StripeCard since that is what the component is named.

These things apply to both the stripe-card and the stripe-source.

Thanks again for this sweet project. I'm learning a lot by studying the code base.

Production build don't work

Projects build with prod flag "ng build --prod" have the following error:

Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)  
    at __extends (VM43 main.c7b3fc0bbca7aa56c2db.js:109374)  
    at VM43 main.c7b3fc0bbca7aa56c2db.js:108972  
    at Object../node_modules/stripe-angular/components/StripeBank.component.js (VM43 main.c7b3fc0bbca7aa56c2db.js:109019)  
    at __webpack_require__ (VM41 runtime.618bcded6741c4c27fdf.js:79)  
    at Object../node_modules/stripe-angular/index.js (VM43 main.c7b3fc0bbca7aa56c2db.js:109284)  
    at __webpack_require__ (VM41 runtime.618bcded6741c4c27fdf.js:79)  
    at Object../node_modules/stripe-angular/StripeScriptTag.js (VM43 main.c7b3fc0bbca7aa56c2db.js:108891)  
    at __webpack_require__ (VM41 runtime.618bcded6741c4c27fdf.js:79)  
    at Object../node_modules/stripe-angular/components/StripeSource.component.js (VM43 main.c7b3fc0bbca7aa56c2db.js:109160)

The error is not present in development build.
Removing StripeBank from the exports resolve the problem.

my production configuration is:

          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": false,
              "outputHashing": "none",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }

ng ver. 7.3.8
npm ver 6.4.1
node ver v10.15.3

Stripe Bank not working.

Hi,

I am tryping to use Stripe-Bank, but it isn't working. There are now inputs shown. Do you have any idea?

Best greetings,

ERROR in Metadata version mismatch for module node_modules/stripe-angular/index.d.ts

ERROR in Metadata version mismatch for module node_modules/stripe-angular/index.d.ts

0.5.0 not compatible with Angular 7

This may be a known issue, but there is nothing about it in your documentation. ɵɵdefineInjectable() is not a function in Angular 7. Angular 7 still requires defineInjectable() which of course is deprecated in Angular 8. Installing 0.4.1 solved the issue, but naturally would like to have the latest version.

How do i apply options or style to the card .

i want to use hidePostalCode , but there is no clear documentation of it .

ERROR Error: Stripe PublishableKey NOT SET. Use method StripeScriptTag.setPublishableKey()

I am using Angular 6. I followed the instructions and I have set my publishable key (not secret key) and I get this error message:

RegisterComponent.html:73 ERROR Error: Stripe PublishableKey NOT SET. Use method StripeScriptTag.setPublishableKey()
    at StripeScriptTag.push../node_modules/stripe-angular/StripeScriptTag.js.StripeScriptTag.checkKeyThrow (StripeScriptTag.js:19)
    at StripeCard.push../node_modules/stripe-angular/components/StripeCard.component.js.StripeCard.ngOnInit (StripeCard.component.js:24)
    at checkAndUpdateDirectiveInline (core.js:9250)
    at checkAndUpdateNodeInline (core.js:10514)
    at checkAndUpdateNode (core.js:10476)
    at debugCheckAndUpdateNode (core.js:11109)
    at debugCheckDirectivesFn (core.js:11069)
    at Object.eval [as updateDirectives] (RegisterComponent.html:86)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11061)
    at checkAndUpdateView (core.js:10458)

My RegisterComponent is running the function setPublishableKey in the constructur:

publishableKey = 'MY_SECRET_KEY';

  constructor(
    private formBuilder: FormBuilder,
    // tslint:disable-next-line:no-shadowed-variable
    public StripeScriptTag: StripeScriptTag
    ) {
        console.log('setting publishable link');
        console.log(this.publishableKey);
        this.StripeScriptTag.setPublishableKey(this.publishableKey, null);
    }

Issue with StripeScriptTag.js

Hello!

I've recently installed this package to use Stripe within my current Angular 6 app.

These two characters appear based on the standard node install on my MacOS.

StripeScriptTag.ngInjectableDef = i0.ɵɵdefineInjectable({ factory: function StripeScriptTag_Factory() { return new i1.StripeScriptTag(); }, token: i1.StripeScriptTag, providedIn: "root" });
    StripeScriptTag = __decorate([

This is line 68 in StripeScriptTag.js. Appears to have two theta marks. After deleting these the module works fine for me, but it's causing trouble with my auto-deployment.

Stripe-angular demo code is deprecated

Clicking the link "demo code on github" on https://ackerapple.github.io/stripe-angular/ leads to a 404 error. Is this code still available?
Thank you for your hard work on the package.

how i can use it with multi-languages

can you pls tell me how i can use it in multi languages ?

Feature Request: Simplify Module Initialization

First off I would like to thank you for all your hard word on making this project. I have been looking for a Stripe solution for Angular for a while and this has come by far the closest to what I wanted.

It does seem like getting Stripe to work is a little bit tricky due to having to rely on Stipe Elements and the API it exposes thus making the setup cumbersome in a framework like Angular where if we had direct access to APIs it would make the process a lot easier on us.

That being said you have gotten by far the closest. I have one simple request to clean up my code a bit. That would be:

1. Export directly as StripeModule rather then Module so I don't have to rename the import.
2. Take in an option for the publishable key for the forRoot() initialization so I don't have to add setPublishableKey() to my App component.

Example of request:
app.module.ts

...
import { StripeModule } from 'stripe-angular';

@NgModule({
  imports: [StripeModule.forRoot(environment.stripe.pk), ...]
  ...
})
export class AppModule {}

These may seem like small things however I think it is small things like that that really make some libraries stand apart from others.

These changes don't have to replace the existing exports, that way not to be an immediate breaking change but instead could be added in then the old export of Module could be deprecated and removed later down the road similar to what Angular core does with deprecated APIs on major releases.

Beyond this my only other complaint would be having to use the options in order to apply CSS, however I know that isn't on you but instead on how Stripe has exposed their APIs to us.

Thank you so much for your time and hard work! I look forward to seeing how this Library progresses in 2020

Must add @types/stripe-v3 in order to build

I observed in my project that I got tons of type errors (from stripe-angular), because stripe types weren't found.
After I installed @types/stripe-v3, everything worked.
I think it's enough to document in the README that you also have to add @types/stripe-v3
Is there a better way to do that? Ideally stripe-angular would also export those types, generated during build, or have a way to automatically ensure that @types/stripe-v3 is installed. Maybe a peer dependency?

Duplicate identifier 'ɵfac'

Error: node_modules/stripe-angular/components/StripeCard.component.d.ts:26:12 - error TS2300: Duplicate identifier 'ɵfac'.

26 static ɵfac: ɵngcc0.ɵɵFactoryDeclaration<StripeCard, never>;
~~~~

Error: node_modules/stripe-angular/components/StripeComponent.d.ts:17:12 - error TS2300: Duplicate identifier 'ɵfac'.

17 static ɵfac: ɵngcc0.ɵɵFactoryDeclaration<StripeComponent, never>;
~~~~

"@types/stripe-v3": "^3.1.28",
"stripe-angular": "^1.9.1",

README has errors

StripeSource is not imported,
no commas in extraData
onStripeError has token instead of error as argument

How to add Amount in stripe options ?

Testing With Angular

I'm writing tests on an app that uses this. When I run the test it tells me to set publishable key. How do I set the key on tests?

Use definitely typed typings for stripe

Something to consider is adding more complete typing to the stripe instance. For example, I'm using

(stripe as any).redirectToCheckout({
  sessionId: response.id
});

What about using the definitelytyped typings?

Originally posted by @yringler in #42 (comment)

I created a branch in my fork, I deleted some of the types, switched to defnitely, and got build and tests to work.

Will work on deleting the rest of the types later.
One issue I had was some things are typed as Error, when really it should be a stripe.Error.
I'm assuming that it was just typed as Error for convenaince, and to get that one shared message property, and will liberaly change to stripe.Error.

IDK how that works with the exported library? Will it have the stripe types also? Or will user have to install stripe types?

That should be documented. Maybe we should have it as a peer dependency?

Currently in the package.json I added the types as a devDependency.

Ad-block

Does this work with ad-block?

Because I tried to setup stripe on my own and I'm getting a bunch of Http Client errors because of ad block.

In this particular case, u-block origin.

Validation Issue through reference #stripeCard element

when i enter the wrong expiration date it throws me an error and I catch the error through the reference element, but after putting the valid expiration date, the error must be removed from the reference element and still as invalid. it should be removed after putting everything valid

StripeToken Error

Hi Acker, I am trying to use this package, but getting this error stripe-angular has no exported member 'StripeToken'.
import { StripeToken, StripeSource } from "stripe-angular";

Also got confuse with this

Operations are preformed on construction

1. Checking for window.Stripe
2. If undefined, head tag is found and script tag with src "https://js.stripe.com/v3/" is added
3. Seting publishableKey in StripeJs library
4. All stripe-angular components use the initialized Stripe instance

Please provide details about this.
How can we use this package properly,

Thanks for your effort.

Support passing in async method to StripeModule.forRoot

It would be great if I could fetch the key from an API, and then use that in the service, instead of hard-coding.
Is that something you'd accept a PR for? I might take a shot at it if interested.

I think it should be relatively straight forward, because access to stripes API is through a promise, anyway.

Angular v16

Hi
I get this error with Angular v16 when I use in an standalone module

6 NullInjectorError: R3InjectorError[StripeScriptTag -> StripeScriptTag -> StripeScriptTag -> InjectionToken Stripe Publishable Key -> InjectionToken Stripe Publishable Key]:
NullInjectorError: No provider for InjectionToken Stripe Publishable Key!

Facing error like Stripe PublishableKey NOT SET. Use method StripeScriptTag.setPublishableKey()

I'm trying to add stripe-angular plugin to my application. below is my code. but facing error. please let me know is this code enough for you to point out what's going wrong?

• app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from 'src/app/app-routing.module';
import { Module as StripeModule } from 'stripe-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NoopAnimationsModule,
	StripeModule
  ],
  providers: [],
  bootstrap: [AppComponent],

})
export class AppModule { }

• app.component.ts file

import { Component, OnInit } from '@angular/core';
import { StripeScriptTag } from 'stripe-angular';

@Component({
  selector: 'my-app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  constructor(private stripeScriptTag: StripeScriptTag) {
    stripeScriptTag.setPublishableKey('pk_live_***************************');
  }

  ngOnInit() {
  }

  onStripeInvalid(error: Error) {
    console.log('Validation Error', error);
  }

  setStripeToken(token: StripeToken) {
    console.log('Stripe token', token);
  }

  onStripeError(error: Error) {
    console.error('Stripe error', error);
  }
}

• app.component.html file

<stripe-card #stripeCard
  (catch)="onStripeError($event)"
  [(invalid)]="invalidError"
  (tokenChange)="setStripeToken($event)"
></stripe-card>

<button type="button" (click)="stripeCard.createToken(extraData)">createToken</button>

Support StripeBank.createSource

In app/src/components/app.component.ts There's a property used, metadata, which is supposed to be a child property of BankAccountTokenOptions.
I opened up DefinitelyTyped/DefinitelyTyped/pull/50386, and a maintainer noted

metadata seems not to be a part of the tokenCreate method (or at least it's undocumented): https://stripe.com/docs/js/tokens_sources/create_token?type=bank_account

please be aware this is the types definition for the front-facing stripe.js library https://stripe.com/docs/js

What's the intent with this line of code? Should we remove the metadata property? Is it a mock response?

stripe-angular"' has no exported member 'Token'

Doesn't work with Angular SSR

ReferenceError: window is not defined