Integrating Stripe Elements with Angular

Image by Oberholster Venita from Pixabay

Updated Version

Scenario

Approach

Stackblitz

Dependencies

Initialize Stripe Elements

import { AngularStripeService } from '@fireflysemantics/angular-stripe-service';constructor(
private cd: ChangeDetectorRef,
private stripeService:AngularStripeService) {}
ngAfterViewInit() {this.stripeService.setPublishableKey('pk_test_2syov9fTMRwOxYG97AAXbOgt008X6NL46o').then(stripe=> {   this.stripe = stripe;   const elements = stripe.elements();   this.card = elements.create('card');   this.card.mount(this.cardInfo.nativeElement);   this.card.addEventListener('change', this.cardHandler);
});
}

Import the Form Module

import {FormsModule} from '@angular/forms';

Markup

<form #checkout="ngForm" (ngSubmit)="onSubmit(checkout)" class="checkout">
<div class="form-row">
<label for="card-info">Card Info</label>
<div id="card-info" #cardInfo></div>
<div id="card-errors" role="alert" *ngIf="error">{{ error }}</div></div>
<button type="submit">Pay $5</button>
</form>

CSS

form.checkout {
max-width: 500px;
margin: 2rem auto;
text-align: center;
border: 2px solid #eee;
border-radius: 8px;
padding: 1rem 2rem;
background: white;
font-family: monospace;
color: #525252;
font-size: 1.1rem;
}
form.checkout button {
padding: 0.5rem 1rem;
color: white;
background: coral;
border: none;
border-radius: 4px;
margin-top: 1rem;
}
form.checkout button:active {
background: rgb(165, 76, 43);
}

Demo

Analysis

Founder of Firefly Semantics Corporation