Closed masayashiki closed 4 years ago
Hi @masayashiki,
I'm assuming LibraryModule is yours and you're certain is available. Please try to use the v9
version of the library. There is a little breaking change between them.
npm install ngx-stripe@v9-lts
Let me know if that helps
R
Thank you for your kind reply @richnologies. Now I could get token with this library. For the new like me, let me describe what I did.
・Since I use @angular/cli: 9.1.12, I installed the plugin with
npm install ngx-stripe@v9-lts
npm install @stripe/stripe-js
・Added codes below in home.module.ts, not app.module.ts
import { NgxStripeModule } from 'ngx-stripe';
imports: [
NgxStripeModule.forRoot('****'),
],
・Added codes below in app.module.ts
import { ReactiveFormsModule } from '@angular/forms';
imports: [
ReactiveFormsModule,
],
・I used HTML below in home.page.html (https://richnologies.gitbook.io/ngx-stripe/core-concepts/element-components)
<h2>Create Token Example</h2>
<ngx-stripe-card
[options]="cardOptions"
[elementsOptions]="elementsOptions"
></ngx-stripe-card>
<button type="submit" (click)="createToken()">
CREATE TOKEN
</button>
・ts code was the one from https://github.com/richnologies/ngx-stripe on home.tapge.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { StripeService, StripeCardComponent } from 'ngx-stripe';
import {
StripeCardElementOptions,
StripeElementsOptions
} from '@stripe/stripe-js';
@Component({
selector: 'app-create-token',
templateUrl: 'stripe.html'
})
export class StripeCreateTokenComponent implements OnInit {
@ViewChild(StripeCardComponent) card: StripeCardComponent;
cardOptions: StripeCardElementOptions = {
style: {
base: {
iconColor: '#666EE8',
color: '#31325F',
fontWeight: '300',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSize: '18px',
'::placeholder': {
color: '#CFD7E0'
}
}
}
};
elementsOptions: StripeElementsOptions = {
locale: 'en'
};
stripeTest: FormGroup;
constructor(private fb: FormBuilder, private stripeService: StripeService) {}
ngOnInit(): void {
this.stripeTest = this.fb.group({
name: ['', [Validators.required]]
});
}
createToken(): void {
const name = this.stripeTest.get('name').value;
this.stripeService
.createToken(this.card.element, { name })
.subscribe((result) => {
if (result.token) {
// Use the token
console.log(result.token.id);
} else if (result.error) {
// Error creating the token
console.log(result.error.message);
}
});
}
}
Thank you very much !!!
Hi @masayashiki, than you for your replay , I will have a look and try to include it in the docs. If your problem is solved, please close the issue. Thanks again
Solved.
Hi, there. I tried the plugin and got an error below on terminal.
I think the error comes from the code in app.module.ts.
Can you please how to fix this issue ?
I installed latest version for ver angular 9 with npm install ngx-stripe @stripe/stripe-js. My ionic version is below.
Thank you in advance.