Element Components
Element components
provide a flexible way to securely collect payment information in your Angular app.
You can mount individual Element components inside of your Elements
tree. Note that you can only mount one of each type of Element.
Create Token
In this example the Card Element
is used to collection payment information and create a token.
The full list of components available:
Component | Selector |
Card Element | ngx-stripe-card |
Card Number Element | ngx-stripe-card-number |
Card Expiry Element | ngx-stripe-card-expiry |
Card CVC Element | ngx-stripe-card-cvc |
Payment Request Button Element | ngx-stripe-payment-request-button |
Au Bank Account Element | ngx-stripe-au-bank-account |
Iban Element | ngx-stripe-iban |
Ideal Bank Element | ngx-stripe-ideal-bank |
Fpx Bank Element | ngx-stripe-fpx-bank |
Card Group Directive
If you want to use the card number, expiry and cvc as separated elements you need to put them inside the card group directive.
This is necessary to ensure the three elements shared the same stripe elements objects, otherwise it won't work. As you can see in the example element options is not available for any of the three child components, but only for the group directive.
Here is an example using the Card Group as a Directive:
We also make available the component selector, in case you prefer to work that way, here is an example using the Card Group as a Component.
Last updated