Releases · richnologies/ngx-stripe

18 Nov 23:24

richnologies

v17.0.1

eb0baf6

Ngx Stripe 17.0.1 Latest

Latest

🚀 What's New in 17.0.1

Hello, ngx-stripe community! We're excited to beam up version 17.0.1 with some stellar new features and updates:

Support for Angular 17: The final frontier of web frameworks is now compatible with ngx-stripe. Engage with the latest Angular version for a smoother and more efficient development experience.
Express Checkout Component: Introducing the new Express Checkout Component! This feature is designed to make your transactions as swift as the USS Enterprise at warp speed. Learn more about how to integrate it into your project here.
Updated Documentation and README: We've revamped our docs and README to ensure you have all the necessary guidance for navigating through the ngx-stripe galaxy. Whether you're a Vulcan or a human, our documentation is now more accessible and informative.

🖖 And one for the Star Trek fans

Why don't they play hide and seek on the USS Enterprise? Because good luck hiding when the computer knows everyone's location!

Assets 2

04 Feb 13:40

richnologies

v15.3.0

d8fcc68

Issuing Elements

This release adds support for Issuing Elements. You can use this components to display card details in your web application in a PCI compliant manner.

ELEMENT	COMPONENT SELECTOR	AVAILABILITY
Number (PAN)	ngx-stripe-issuing-card-number-display	Virtual cards only
CVC	ngx-stripe-issuing-card-cvc-display	Virtual cards only
Expiry date	ngx-stripe-issuing-card-expiry-display	Virtual cards only
PIN	ngx-stripe-issuing-card-pin-display	Physical cards only

Example

import { CommonModule } from '@angular/common';
import { Component, OnInit, ViewChild } from '@angular/core';
import { switchMap } from 'rxjs';

import { StripeFactoryService, StripeElementsDirective, StripeIssuingCardNumberDisplayComponent, StripeIssuingCardCvcDisplayComponent, StripeIssuingCardExpiryDisplayComponent, StripeIssuingCardPinDisplayComponent } from 'ngx-stripe';
import { StripeElementsOptions, StripeIssuingCardNumberDisplayElement, StripeIssuingCardNumberDisplayElementOptions } from '@stripe/stripe-js';

import { YourOwnServerService } from '../core';

@Component({
  selector: 'ngstr-issuing-elements-example',
  template: `
    <div>
      <div color="secondary" section-content-header>
        <span>One Card Example</span>
      </div>
      <div section-content>
        <ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions" *ngIf="cardOptions">
          <ngx-stripe-issuing-card-number-display [options]="cardOptions"
          ></ngx-stripe-issuing-card-number-display>
          <br />
          <ngx-stripe-issuing-card-expiry-display [options]="cardOptions"
          ></ngx-stripe-issuing-card-expiry-display>
          <br />
          <ngx-stripe-issuing-card-cvc-display [options]="cardOptions"
          ></ngx-stripe-issuing-card-cvc-display>
          <br />
          <ngx-stripe-issuing-card-pin-display [options]="cardOptions"
          ></ngx-stripe-issuing-card-pin-display>
        </ngx-stripe-elements>
      </div>
    </div>
  `,
  styles: [],
  standalone: true,
  imports: [
    CommonModule,
    StripeElementsDirective,
    StripeIssuingCardCvcDisplayComponent,
    StripeIssuingCardExpiryDisplayComponent,
    StripeIssuingCardNumberDisplayComponent,
    StripeIssuingCardPinDisplayComponent
  ]
})
export class IssuingElementsExampleComponent implements OnInit {
  @ViewChild('card') card: StripeIssuingCardNumberDisplayElement;

  cardId = '***you_issued_card_id***';
  nonce: string;
  ek: string;

  // replace this with your public key
  stripe = this.stripeFactory.create(this.plutoService.KEYS.usa);
  cardOptions: StripeIssuingCardNumberDisplayElementOptions;
  elementsOptions: StripeElementsOptions = {
    locale: 'es'
  };

  constructor(
    private stripeFactory: StripeFactoryService,
    private yourServer: YourOwnServerService
  ) {}

  ngOnInit() {
    this.stripe.createEphemeralKeyNonce({ issuingCard: this.cardId })
      .pipe(
        switchMap(({ nonce }) => {
          this.nonce = nonce;
          
          // replace this with your own implementation
          return this.yourServer.createEphemeralKeys({ issuing_card: this.cardId, nonce });
        })
      )
      .subscribe({
        next: ({ ephemeralKeySecret }) => {
          this.ek = ephemeralKeySecret;
          this.cardOptions = {
            issuingCard: this.cardId,
            nonce: this.nonce,
            ephemeralKeySecret: this.ek,
            style: {
              base: {
                color: '#000',
                fontSize: '16px'
              },
            },
          };
        },
        error: err => console.error(err)
      });
  }
}

Assets 2

04 Feb 13:49

richnologies

v15.1.0

a8c8fcf

Add Inject Stripe

Inject Stripe

This release adds a new utility function injectStripe based on the Angular inject function. injectStripe is only supported during instantiation of a dependency by the DI system

If you call injectStripe without parameters you will get the instance of the StripeService
if you call injectStripe with parameters you will get a new stripe instance, similar as if you used StripeFactoryService create method

Example

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 { StripeElementsOptions } from '@stripe/stripe-js';

import { YourOwnServerService } from '../core';

@Component({
  selector: 'ngstr-payment-element-inject-example',
  template: `
    <div maxWidth="900">
      <div color="secondary" section-content-header>
        <span>Payment Element</span>
      </div>
      <div section-content [formGroup]="stripeTest">
        <input matInput placeholder="name" formControlName="name" />
        <input matInput placeholder="amount" type="number" formControlName="amount" />
        <ng-container *ngIf="elementsOptions?.clientSecret as clientSecret">
          <ngx-stripe-payment [stripe]="stripe" [clientSecret]="clientSecret"></ngx-stripe-payment>
        </ng-container>
        <button (click)="pay()">PAY</button>
      </div>
    </div>
  `,
  styles: [],
  standalone: true,
  imports: [
    CommonModule,
    ReactiveFormsModule,
    NgxStripeModule
  ]
})
export class PaymentElementInjectExampleComponent implements OnInit {
  @ViewChild(StripePaymentElementComponent)
  paymentElement: StripePaymentElementComponent;

  stripeTest = this.fb.group({
    name: ['Angular v12', [Validators.required]],
    amount: [1109, [Validators.required, Validators.pattern(/\d+/)]]
  });

  stripe = injectStripe(this.plutoService.KEYS.main);
  elementsOptions: StripeElementsOptions = {
    locale: 'en'
  };

  paying = false;

  constructor(
    private fb: UntypedFormBuilder,
    private yourServer: YourOwnServerService
  ) {}

  ngOnInit() {
    // replace this with your own implementation
    this.yourServer
      .createPaymentIntent({
        amount: this.stripeTest.get('amount').value,
        currency: 'eur'
      })
      .subscribe((pi) => {
        this.elementsOptions.clientSecret = pi.client_secret;
      });
  }

  pay() {
    if (this.stripeTest.valid) {
      this.paying = true;
      this.stripe
        .confirmPayment({
          elements: this.paymentElement.elements,
          confirmParams: {
            payment_method_data: {
              billing_details: {
                name: this.stripeTest.get('name').value
              }
            }
          },
          redirect: 'if_required'
        })
        .subscribe((result) => {
          this.paying = false;
          console.log('Result', result);
          if (result.error) {
            // Show error to your customer (e.g., insufficient funds)
            alert({ success: false, error: result.error.message });
          } else {
            // The payment has been processed!
            if (result.paymentIntent.status === 'succeeded') {
              // Show a success message to your customer
              alert({ success: true });
            }
          }
        });
    } else {
      console.log(this.stripeTest);
    }
  }
}