stripe-element v1.0.1

stripe-element

Yet unofficial stripe wrapper for angular

npm i -S stripe-element

What ?

Stripe is an online payment processing for internet businesses. It provides developper with a well documented API and related javascript library for clients. They are of two kinds:

• stripe.js & element Securely collect sensitive card details using Elements,their pre-built UI components
• chechout provides your customers with a streamlined, mobile-ready payment experience. You can cee it as a customizable ready-to-run form.

stripe-element is presented as a wrapper for angular, as it enables you to use stripe withe the flexibility for angular directives, in the scope of the same framework.

How to ?

The wrapper, stripe-element is built around the element of the same name.

<stripe-element></stripe-element>

Is that all, you may ask ? No, but you're almost there. You now just need to choose what you want to choose: stripe.js & element or checkout ?

stripe.js & element

Not yet implemented at the moment

checkout

0. Include stripe-checkout js lib in your app

You'd better include it in your head tag, before you angular app bootstraping.

<script src="https://checkout.stripe.com/checkout.js"></script>

1. Register it to use in your module

import { StripeCheckoutDirective } from './stripe-checkout.directive';
import { NgModule } from '@angular/core';


@NgModule({
  declarations: [
    StripeCheckoutDirective,
  ],
})
export class AppModule { }

2. React when your customer's validate checkout form

Eventually have a function to react when your customer informations are sumitted. In our case, AppComponent.prototype.token

The workflow with Stripe API is even well explained by Nishant Asthana.

import { Component } from '@angular/core';



@Component({...})
export class AppComponent {
  title = 'stripe';

  /**
   * 
   * Callback to be run when checkout stripe token is available
   * 
   **/
  public token(token) {
  }
}

stripe-element to the recue in your templates where checkout attribute indicates that you rely on checkout forms.

<button id="stripe-checkout-payment">
    Pay through checkout
</button>



<stripe-element
    key="pk_test_ADL7A5jL1qHfXYso8vCIx9Wf"
    selector="#stripe-checkout-payment"
    [token]="token"
    event="click"
    checkout>
</stripe-element>

Exception made for selector and event, all checkout attributes defined by are available, with their respective types and defaults ckeckout documentation. As for the two exceptions to this:

• selector is the DOM3 selector for the element that triggers checkout form
• event is the DOM3 event which, when fired of element matched by selector, initiates the opening of the checkout form.

(As for current implementation, selector and event aren't observed for changes. Their value are captured once, during ngInit even on this directive.)

Contribute

This project just containts distribution files.

Feel free to open you usses here, following general good practices for opening an issue.

For features and bug fixes, they are all welcomed on the development repository at https://github.com/squall-io/stripe-element-ts