Issuing Elements

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)
      });
  }
}