Angular and Stripe integration

Question

I'm trying to integrate Stripe into my website but I'm currently walking into some trouble. I actually have questions

#1: I have followed this thread and this stackblitz page. But it is still not working. It looks like my application isn't picking up the Stripe components. My ts file

import {
 Component,
 AfterViewInit,
 OnDestroy,
 ViewChild,
 ElementRef,
 ChangeDetectorRef
} from '@angular/core';

import  { NgForm } from "@angular/forms"
import { AngularStripeService } from '@fireflysemantics/angular-stripe-service'

@Component({
selector: 'payment',
templateUrl: './payment.component.html',
styleUrls: ['./payment.component.css']
})
export class PaymentComponent implements AfterViewInit, OnDestroy {

@ViewChild('cardInfo', { static: false }) cardInfo: ElementRef;

stripe: any;
loading = false;
confirmation: any;

card: any;
cardHandler = this.onChange.bind(this);
error: any;

constructor(
 private cd: ChangeDetectorRef,
 private stripeService:AngularStripeService) {}

ngAfterViewInit() {
 this.stripeService.setPublishableKey('pk_test____________').then(
  stripe=> {
    console.log("in function"); // logging to console
    this.stripe = stripe;
    const elements = stripe.elements();    
    this.card = elements.create('card');
    this.card.mount(this.cardInfo.nativeElement); // also tried "#card-info"
    this.card.addEventListener('change', this.cardHandler);
 }).catch((e:any)) => { // no errors
   console.error(e);
}

ngOnDestroy() {
 this.card.removeEventListener('change', this.cardHandler);
 this.card.destroy();
}

onChange( error: any ) {
 if (error) {
  this.error = error.message;
 } else {
  this.error = null;
 }
 this.cd.detectChanges();
}

async onSubmit(form: NgForm) {
 console.log(form)
 const { token, error } = await this.stripe.createToken(this.card);

 if (error) {
  console.log('Error:', error);
 } else {
  console.log('Success!', token);
 }
}
}

The application doesn't give any error only when submutting the form i get a error that the form is empty which makes sense.

my package JSON stripe components

"@types/stripe-checkout": "^1.0.3",
"@types/stripe-v3": "^3.1.20",
"@fireflysemantics/angular-stripe-service": "^1.0.0",
"@stripe/stripe-js": "^1.9.0",
"@types/stripe": "^7.13.24",

I'm not sure what I'm doing wrong I've also tried the CDN version in my head but that doesn't work to

My HTML and CSS is exactly the same as the Stackblitz page

#2: Are there any documents on how to integrate Stripe IDEAL with Angular?

I don't have to solve this tutorial necessary but I need a good working example of Stripe and Angular

Answer 1

I found a tutorial that is up to date tutorial

Full docs here

Create components

First of all, you should install Stripe through NPM.

 npm install ngx-stripe @stripe/stripe-js;

Import Stripe like this.

import { NgxStripeModule } from 'ngx-stripe';

After that now include Stripe in your imports

    NgxStripeModule.forRoot('***your-stripe-publishable-key***'),

After that you can now use Stripe in your file's Import Stripe elements in your TS

import { StripeService, StripeCardComponent } from 'ngx-stripe';
import { StripeCardElementOptions, StripeElementsOptions } from '@stripe/stripe-js';

You can change the styling and languages

 cardOptions: StripeCardElementOptions = {
    hidePostalCode: true,
    style: {
      base: {
        iconColor: '#666EE8',
        color: '#31325F',
        fontWeight: '300',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSize: '14px',
        '::placeholder': {
          color: '#CFD7E0',
        },
      },
    },
  };

  elementsOptions: StripeElementsOptions = {
    locale: 'nl',
  };

and after that you can initilize a creditcard component

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

or an ideal component

<ngx-stripe-ideal-bank
    [options]="cardOptions"
    [elementsOptions]="elementsOptions"
></ngx-stripe-ideal-bank>

Create payment

For a payment, you should create a http request to your backend server where the payment is created and handled. I did it with an ExpressJS server. First the http request

let data = {
      name: name,
      email: email,
      postal: postal,
      paymentOption: this.paymentOption,
      products: this.products,
      userEmail: this.email,
    };

    const headers = new HttpHeaders()
      .set('Content-Type', 'application/json')
      .set('Access-Control-Allow-Origin', '*')
      .set('Access-Control-Allow-Credentials', 'true')
      .set('Access-Control-Allow-Methods', 'POST')
      .set('Access-Control-Allow-Headers', 'Content-Type')
      .set('Authorization', '*');

    this.http
      .post('http://127.0.0.1:3000/pay', JSON.stringify(data), {
        headers: headers,
      })

Now that you've created a http req

app.post('/pay', cors(), async function (req, res) {
   const paymentIntent = await stripe.paymentIntents.create({
        amount: price, // watch out in cents
        currency: 'eur',
        receipt_email: email,
        payment_method_types: [method], // card or ideal
        description: `Customer named ${name}`,
    });
)}

Send your response back to your front end

    res.status(201).json(paymentIntent.client_secret);

and confirm the payment

this.http
          .post('http://127.0.0.1:3000/pay', JSON.stringify(data), {
            headers: headers,
          }).subscribe(async (data) => {
                console.log(data);
                if (this.paymentOption == 'creditcard') {
                    // confirm creditcard payment
                    this.stripeService
                        .confirmCardPayment(data.toString(), {
                            payment_method: {
                                card: this.card.element,
                                billing_details: {
                                    name: name,
                                },
                            },
                        })
                        .subscribe((result) => {
                            console.log('result', result);
                        });
                } 
                    
            });