ackerapple / stripe-angular Goto Github PK
View Code? Open in Web Editor NEWAngular to Stripe module containing useful providers, components, and directives
License: MIT License
Angular to Stripe module containing useful providers, components, and directives
License: MIT License
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?
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)
Hi, I install the library in angular 15 and do the following:
const template=
`
<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
Will there be any updates to this library for the latest versions of Angular?
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?
Hi - Thanks for this awesome project! I've been reviewing the code base and just have a few suggestions that I think apply.
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 ...
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>
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.
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
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
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.
i want to use hidePostalCode , but there is no clear documentation of it .
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);
}
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.
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.
can you pls tell me how i can use it in multi languages ?
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:
StripeModule
rather then Module
so I don't have to rename the import.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
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?
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",
StripeSource is not imported,
no commas in extraData
onStripeError has token instead of error as argument
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?
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.
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.
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
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
Please provide details about this.
How can we use this package properly,
Thanks for your effort.
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.
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!
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?
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 { }
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);
}
}
<stripe-card #stripeCard
(catch)="onStripeError($event)"
[(invalid)]="invalidError"
(tokenChange)="setStripeToken($event)"
></stripe-card>
<button type="button" (click)="stripeCard.createToken(extraData)">createToken</button>
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?
ReferenceError: window is not defined
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.