Ionic and Stripe Elements?

Ionic Framework ionic-v3
1

Hi,

How can I integrate stripe in such a way that I can use Stripe.elements() . I would prefer to use there card validation form rather than a custom form ?

I’v included in index.html but still can’t access stripe.elements() ?

2

Did you find a solution?
I cant make this work, I added the script tag to the index.html, but keep getting this error:

Uncaught TypeError: __webpack_require__(...).createServer is not a function

3

Have a look at the native Stripe plugin here: http://ionicframework.com/docs/v2/native/stripe/
http://ionicframework.com/docs/v2/native/stripe/

4

I did get it working on browser but it doesn’t work on the phone when I tested it. To be honest you don’t need it, you just need a way to format the digits and display card icons. Then you can use the native plugin suggested above. I ended up using card.js, I would still prefer to use elements but I can’t figure out why it won’t work on the phone!!

5

I am using ngx-card, which calls card.js and I am receiving an error when this module calls card.js
toInitialize is undefinedCard@https://unpkg.com/card@2.3.0/dist/card.js:125:1

I imported the dependency into my apps main and also imported into the component that is using this module. I also included the script in index.html.

app.module.ts


import { CardModule } from 'ngx-card/ngx-card';
@NgModule({
  declarations: [
    ....
  ],
  imports: [
    .....
    CardModule,
    .....

index.html

<script src="https://unpkg.com/card@2.3.0/dist/card.js"></script>
</body>
</html>

HTML Page where form is loaded

<form card
  container=".card-container"
  card-width="500"
  [messages]="messages"
  [placeholders]="placeholders"
  [masks]="masks"
  formatting="false"
  debug="true">

  <input type="text" name="number" card-number/>
  <input type="text" name="first-name" card-name/>
  <input type="text" name="last-name" card-name/>
  <input type="text" name="expiry" card-expiry/>
  <input type="text" name="cvc" card-cvc/>
</form>

Angular Component for HTML page Above

I imported the following

import { CardModule } from 'ngx-card/ngx-card';

This is an Ionic 3 application (3.9.2) and Angular 4.1.3

6

+1 I am having this error as well!

7

How did you integrate card.js to your project? I can’t find any documentation on doing so. I even referenced the JS file in index.html and called new Card() in the .ts file, but no luck.