Angular to Stripe module containing useful providers, components, and directives
Table of Contents
From a command terminal type the following
npm install stripe-angular --save
Make stripe-angular available throughout your app
Please note, you only use
.forRoot()on your base app module
This ONLY matters if you need to support lazy loading via loadChildren()
You must provide your Stripe account's publishableKey
StripeScriptTag.setPublishableKey performs 3 operations
- Checks for window.Stripe
1.1 If undefined, head tag is found and script tag with src "https://js.stripe.com/v3/" is added
- Sets publishableKey in StripeJs library
- All stripe-angular components use the initialized Stripe instance
A practical example to convert card data into a Stripe token
Requires you to have already initialized Stripe
Builds a display for card intake and then helps tokenize those inputs
Helps tokenize banking data. Does NOT include display inputs like stripe-card does.
For stripe-bank input fields, be sure to use the above mentioned link
Here is the most commonly used input fields:
country: "US", currency: "usd", routing_number: "110000000", account_number: "000123456789", account_holder_name: "Jenny Rosen", account_holder_type: "individual"
This component is not intended to stand alone but it could. Component stripe-card extends stripe-source.
<!-- stripe source not intended to stand alone like this -->createSource<!-- stripe-card has source bindings -->createSource
What is a Stripe source?
Source objects allow you to accept a variety of payment methods with a single API. A source represents a customer’s payment instrument, and can be used with the Stripe API to create payments. Sources can be charged directly, or attached to customers for later reuse.
Why use Stripe sources?
Stripe sources allows you, the developer, to focus on data differences between payment formats instead using different components for each like stripe-card and stripe-bank
By taking into consideration the flexibility of the Sources API when designing your checkout flow, you can minimize any changes required to support additional payment methods as you add them.