Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ngx-stripe

Package Overview
Dependencies
Maintainers
1
Versions
160
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-stripe

  • 15.5.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
53K
increased by21.56%
Maintainers
1
Weekly downloads
 
Created
Source

An Angular 6+ wrapper for StripeJS elements

drawing version license

Ngx Stripe is a thin wrapper around Stripe Elements. It allows adding Elements to any Angular app. The StripeJS Reference covers complete Elements customization details. You can use Elements with any Stripe product to collect online payments. To find the right integration path for your business, explore Stripe Docs.

  • Learn how to use ngx-stripe on the new docs site 🤓

Notice

After reviewing the state of the art for React and Vue counterparts, some major changes are going to be introduced to align this project with Stripe Elements.

  1. ngx-stripe will no longer maintain its own interfaces. Instead, @stripe/stripe-js has been added as peer dependency. This will make the library easier to maintain and avoid mistakes.
  2. Stripe Service has been updated with all the missing APIs from StripeJS
  3. All the missing Element Components like IBAN, Ideal, FPX, ... have been added
  4. Request Payment Button now has full support
  5. Added Container Style functionality support
  6. A Migration guide has been added with details of what have changed
  7. The new version of library is compatible from Angular 6+ major versions. Check the Installation section to see how to install an older version.
  8. All documentation has been moved to a new docs site

In order to ease the transition, we are naming the old version of the library legacy and we have created some npm tags to make it easy to install older versions.

Features

  • Lazy script loading
  • Element Components
  • Stripe Observable wrapper

Installation

Active Versions

To install the last active version:

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

To install an specific version for an older Angular major, use the lts npm tags or check the table below to pick the right version, for example, for v8:

$ npm install ngx-stripe@v8-lts @stripe/stripe-js

Legacy Versions

To install some of the older versions of the library use the legacy npm tags or check the table below to pick the right version, for example, for v7:

$ npm install ngx-stripe@v7-legacy

Choose the version corresponding to your Angular version:

Angularngx-stripe (legacy)ngx-stripe
15Not Available15.x+
14Not Available14.x+
13Not Available13.x+
12Not Available12.x+
11Not Available11.x+
10Not Available10.x+
9v9-legacy / 9.0.x+v9-lts / 9.1.x+
8v8-legacy / 7.4.4+v8-lts / 8.1.x+
7v7-legacy / 7.x+v7-lts / 7.5.x+
6v6-legacy / 0.6.xv6-lts / 6.1.x+
50.5.x or lessNot Available
40.4.x or lessNot Available

Using the library

Most of the documentation has been moved to a new docs site. Only a very basic example has been left here:

Import the NgxStripeModule into your application

The module takes the same parameters as the global Stripe object. The APIKey and the optional options to use Stripe connect

  • apiKey: string
  • options?: { stripeAccount?: string; }
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the library
import { NgxStripeModule } from 'ngx-stripe';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    NgxStripeModule.forRoot('***your-stripe-publishable-key***'),
    LibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Card Element Component

Once the module has been imported, you can collect credit card details using the ngx-stripe-card component.

Then you can use the Stripe Service, which is basically an Obseravble wrapper around the stripejs object, to use that information. In this example we use it to create a token, but it can be use to confirm a Payment Intent, Setup Intent, etc...

Please check the docs site to see a complete set of Stripe Element Components available and the full API of the Stripe Service.

// stripe.html

<form novalidate (ngSubmit)="createToken()" [formGroup]="stripeTest">
  <input type="text" formControlName="name" placeholder="Jane Doe">
  <ngx-stripe-card
    [options]="cardOptions"
    [elementsOptions]="elementsOptions"
  ></ngx-stripe-card>
  <button type="submit">
    CREATE TOKEN
  </button>
</form>
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

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

@Component({
  selector: 'ngstr-create-token',
  templateUrl: 'stripe.html'
})
export class StripeCreateTokenComponent implements OnInit {
  @ViewChild(StripeCardComponent) card: StripeCardComponent;

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

  elementsOptions: StripeElementsOptions = {
    locale: 'es'
  };

  stripeTest: FormGroup;

  constructor(private fb: FormBuilder, private stripeService: StripeService) {}

  ngOnInit(): void {
    this.stripeTest = this.fb.group({
      name: ['', [Validators.required]]
    });
  }

  createToken(): void {
    const name = this.stripeTest.get('name').value;
    this.stripeService
      .createToken(this.card.element, { name })
      .subscribe((result) => {
        if (result.token) {
          // Use the token
          console.log(result.token.id);
        } else if (result.error) {
          // Error creating the token
          console.log(result.error.message);
        }
      });
  }
}

Support us

ngx-stripe is an MIT-licensed open source project. You can now become a sponsor with GitHub Sponsors.

We've been bringing ngx-stripe to the world for over 4 years and are excited to be able to start dedicating some real resources to the project.

Your sponsorship helps us keep a team of maintainers actively working to improve ngx-stripe and ensure it stays up-to-date with the latest Stripe changes. If you're using ngx-stripe in a commercial capacity and have the ability to start a sponsorship, we'd greatly appreciate the contribution.

Principal Sponsors

License

MIT © Ricardo Sánchez Gregorio

Keywords

FAQs

Package last updated on 14 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc