🔖 v15.2.0

- Add support for Standalone Components

CHANGELOG.md

@@ -1,10 +1,14 @@
 # Changelog
 
+## 15.2.0 - 2023-01-18
+
+- Add support for Standalone Components
+
 ## 15.1.1 - 2023-01-17
 
 - Fix type error for `paymentRequest` method
 
-## 15.1.1 - 2023-01-17
+## 15.1.0 - 2023-01-17
 
 - Add `injectStripe` build on the new Angular `inject` function
 

projects/ngx-stripe-docs/src/app/examples/card-one-element.component.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 
-import { StripeCardComponent, NgxStripeModule, StripeFactoryService } from 'ngx-stripe';
+import { StripeCardComponent, StripeFactoryService, StripeElementsDirective } from 'ngx-stripe';
 import { StripeCardElementOptions, StripeElementsOptions } from '@stripe/stripe-js';
 
 import { NgStrPlutoService } from '../core';
@@ -31,7 +31,10 @@ import { NgStrPlutoService } from '../core';
   `,
   styles: [],
   standalone: true,
-  imports: [NgxStripeModule]
+  imports: [
+    StripeCardComponent,
+    StripeElementsDirective
+  ]
 })
 export class CardOneElementExampleComponent {
   @ViewChild('cardWithoutElements') cardWithoutElements: StripeCardComponent;

projects/ngx-stripe-docs/src/app/examples/payment-element-inject.component.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
 
-import { StripePaymentElementComponent, NgxStripeModule, injectStripe } from 'ngx-stripe';
+import { StripePaymentElementComponent, injectStripe } from 'ngx-stripe';
 import { StripeElementsOptions } from '@stripe/stripe-js';
 
 import { NgStrPlutoService } from '../core';
@@ -29,7 +29,7 @@ import { NgStrPlutoService } from '../core';
   imports: [
     CommonModule,
     ReactiveFormsModule,
-    NgxStripeModule
+    StripePaymentElementComponent
   ]
 })
 export class PaymentElementInjectExampleComponent implements OnInit {

projects/ngx-stripe/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-stripe",
-  "version": "15.1.1",
+  "version": "15.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/richnologies/ngx-stripe"

projects/ngx-stripe/src/lib/components/address.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -31,11 +32,13 @@ import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-address',
+  standalone: true,
   template: `
     <div class="field" #stripeElementRef>
       <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
     </div>
-  `
+  `,
+  imports: [CommonModule]
 })
 export class StripeAddressComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })

projects/ngx-stripe/src/lib/components/affirm-message.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -28,13 +29,16 @@ import { StripeElementsDirective } from '../directives/elements.directive';
 import { StripeInstance } from '../services/stripe-instance.class';
 import { StripeElementsService } from '../services/stripe-elements.service';
 
+
 @Component({
   selector: 'ngx-stripe-affirm-message',
+  standalone: true,
   template: `
     <div class="field" #stripeElementRef>
       <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
     </div>
-  `
+  `,
+  imports: [CommonModule]
 })
 export class StripeAffirmMessageComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })

projects/ngx-stripe/src/lib/components/afterpay-clearpay-message.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -30,11 +31,13 @@ import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-afterpay-clearpay-message',
+  standalone: true,
   template: `
     <div class="field" #stripeElementRef>
       <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
     </div>
-  `
+  `,
+  imports: [CommonModule]
 })
 export class StripeAfterpayClearpayMessageComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })

projects/ngx-stripe/src/lib/components/au-bank-account.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -31,11 +32,13 @@ import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-au-bank-account',
+  standalone: true,
   template: `
     <div class="field" #stripeElementRef>
       <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
     </div>
-  `
+  `,
+  imports: [CommonModule]
 })
 export class StripeAuBankAccountComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })

projects/ngx-stripe/src/lib/components/card-cvc.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -29,14 +30,16 @@ import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-card-cvc',
+  standalone: true,
   template: `
     <div class="field" #stripeElementRef>
       <ng-container
         *ngIf="cardGroup && cardGroup.state !== 'ready' && loadingTemplate"
         [ngTemplateOutlet]="loadingTemplate"
       ></ng-container>
     </div>
-  `
+  `,
+  imports: [CommonModule]
 })
 export class StripeCardCvcComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })

projects/ngx-stripe/src/lib/components/card-expiry.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -29,14 +30,16 @@ import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-card-expiry',
+  standalone: true,
   template: `
     <div class="field" #stripeElementRef>
       <ng-container
         *ngIf="cardGroup && cardGroup.state !== 'ready' && loadingTemplate"
         [ngTemplateOutlet]="loadingTemplate"
       ></ng-container>
     </div>
-  `
+  `,
+  imports: [CommonModule]
 })
 export class StripeCardExpiryComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })

projects/ngx-stripe/src/lib/components/card-number.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -29,14 +30,16 @@ import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-card-number',
+  standalone: true,
   template: `
     <div class="field" #stripeElementRef>
       <ng-container
         *ngIf="cardGroup && cardGroup.state !== 'ready' && loadingTemplate"
         [ngTemplateOutlet]="loadingTemplate"
       ></ng-container>
     </div>
-  `
+  `,
+  imports: [CommonModule]
 })
 export class StripeCardNumberComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })

projects/ngx-stripe/src/lib/components/card.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -32,11 +33,13 @@ import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-card',
+  standalone: true,
   template: `
     <div class="field" #stripeElementRef>
       <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
     </div>
-  `
+  `,
+  imports: [CommonModule]
 })
 export class StripeCardComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })

projects/ngx-stripe/src/lib/components/eps-bank.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -31,11 +32,13 @@ import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-eps-bank',
+  standalone: true,
   template: `
     <div class="field" #stripeElementRef>
       <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
     </div>
-  `
+  `,
+  imports: [CommonModule]
 })
 export class StripeEpsBankComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })

projects/ngx-stripe/src/lib/components/fpx-bank.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -31,11 +32,13 @@ import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-fpx-bank',
+  standalone: true,
   template: `
     <div class="field" #stripeElementRef>
       <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
     </div>
-  `
+  `,
+  imports: [CommonModule]
 })
 export class StripeFpxBankComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })

projects/ngx-stripe/src/lib/components/iban.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -31,11 +32,13 @@ import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-iban',
+  standalone: true,
   template: `
     <div class="field" #stripeElementRef>
       <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
     </div>
-  `
+  `,
+  imports: [CommonModule]
 })
 export class StripeIbanComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })

projects/ngx-stripe/src/lib/components/ideal-bank.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -31,11 +32,13 @@ import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-ideal-bank',
+  standalone: true,
   template: `
     <div class="field" #stripeElementRef>
       <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
     </div>
-  `
+  `,
+  imports: [CommonModule]
 })
 export class StripeIdealBankComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })

projects/ngx-stripe/src/lib/components/link-authentication.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -31,11 +32,13 @@ import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-link-authentication',
+  standalone: true,
   template: `
     <div class="field" #stripeElementRef>
       <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
     </div>
-  `
+  `,
+  imports: [CommonModule]
 })
 export class StripeLinkAuthenticationComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })

projects/ngx-stripe/src/lib/components/p24-bank.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -31,11 +32,13 @@ import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Component({
   selector: 'ngx-stripe-p24-bank',
+  standalone: true,
   template: `
     <div class="field" #stripeElementRef>
       <ng-container *ngIf="state !== 'ready' && loadingTemplate" [ngTemplateOutlet]="loadingTemplate"></ng-container>
     </div>
-  `
+  `,
+  imports: [CommonModule]
 })
 export class StripeP24BankComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChild(NgxStripeElementLoadingTemplateDirective, { read: TemplateRef })

projects/ngx-stripe/src/lib/components/payment-element.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   OnChanges,
@@ -30,7 +31,9 @@ import { StripeInstance } from '../services/stripe-instance.class';
 
 @Component({
   selector: 'ngx-stripe-payment',
-  template: `<div class="field" #stripeElementRef></div>`
+  standalone: true,
+  template: `<div class="field" #stripeElementRef></div>`,
+  imports: [CommonModule]
 })
 export class StripePaymentElementComponent implements OnInit, OnChanges, OnDestroy {
   @ViewChild('stripeElementRef') public stripeElementRef!: ElementRef;

projects/ngx-stripe/src/lib/components/payment-request-button.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -36,7 +37,9 @@ import { StripeElementsDirective } from '../directives/elements.directive';
 
 @Component({
   selector: 'ngx-stripe-payment-request-button',
-  template: `<div class="field" #stripeElementRef></div>`
+  standalone: true,
+  template: `<div class="field" #stripeElementRef></div>`,
+  imports: [CommonModule]
 })
 export class StripePaymentRequestButtonComponent implements OnInit, OnChanges, OnDestroy {
   @ViewChild('stripeElementRef') public stripeElementRef!: ElementRef;

projects/ngx-stripe/src/lib/directives/card-group.directive.ts

@@ -6,7 +6,8 @@ import { StripeInstance } from '../services/stripe-instance.class';
 import { StripeElementsService } from '../services/stripe-elements.service';
 
 @Directive({
-  selector: 'ngx-stripe-card-group,[ngxStripeCardGroup]'
+  selector: 'ngx-stripe-card-group,[ngxStripeCardGroup]',
+  standalone: true,
 })
 export class StripeCardGroupDirective implements OnInit, OnChanges {
   @Input() elementsOptions: Partial<StripeElementsOptions>;