[SOLVED] Stripe integration without plugin

We’ve integrated Stripe into our app without using any of the available plugins. However we have encountered an issue:

Firstly our solution: in the index.html we import https://js.stripe.com/v2/ and set the publishable key using Stripe.setPublishableKey(‘xxx’);

In out payment class we set Stripe: any; and have the following code to create a token:

Stripe.setPublishableKey(‘xxx’);
this.card = new Card();
this.card.number = this.cardNumber;
this.card.cvc = this.cardCVC;
this.card.exp_month = this.cardExpMonth;
this.card.exp_year = this.cardExpYear;
this.card.address_zip = this.cardAddressZip;

  try {
    Stripe.card.createToken(this.card, (status, response) => this.stripeResponseHandler(status, response));
  }
  catch (e) {
    this.handleError("submitPayment - inner", e);
  }

The token is then handled by our API.

This implementation has a syntax error on both of the Stripe.xxx calls: Cannot find name ‘Stripe’. Did you mean the instance member ‘this.Stripe’? (Ionic serve ignores the syntax error and allows for a successful payment to be made, however ionic build fails to build due to the syntax error)

However if I change it to this.Stripe.xxx then I get an error on the actual app when trying to process the payment: cannot read property setPublishableKey of undefined

Any suggestions to solve this issue are welcome :slight_smile: although please note that we would rather not use the angular plugin at this stage.

Since the payment is processing. try declare var Stripe; above @component. This is usually a typescript error. its not able to access the Stripe module

3 Likes

That worked, brilliant thanks!

Hi, I’m quite keen to find out how this has worked out.

Firstly, stripe.js should be served from a https site. In your case, it’s included in the ionic app. This worked ok for me with test payments and keys but once I started to use live payments, I start getting a warning even with ionic serve, saying it should use a secure connection.

How did you manage to get over this ?

I too am wondering about the https issue when using stripe.js. I am still in development, but I hope this doesn’t become an issue.

The other way to handle the original issue in this thread would be to reference the window object and cast it to any.

(<any>window).Stripe.card.createToken

Whats the benefit of using this over the plugin?

Did you ever manage to solve this, without stripe Ionic is useless to me, and Im pretty far down the development road now!

Have a look at this.,

No plugins were used.

Hey Amila,

I’ve managed to do it without plugins now too! I would have bought this if you had told me sooner haha! But just out of interest how did you format the strings for the card and expiry date? Did you use stripe elements? or did you implement your own formatting using angular?

I used angular payment plugin for formatting the card number.

Have you got a link ?

http://seandesmond.github.io/angular-payment/payment-tpls-0.2.0-SNAPSHOT.js

just copy the link of strip below the cordova.js script tag i.e. in index.html of your project then whichever page you using strip just declare Stripe :any; then you can use Stripe without plugin of cordova plugin in ionic 2 platform.

any updates on this? I am in the same situation

Thanks for the solution using stripe plugin for payment integration. But could you tell me how to generate that publishable key. And can you share any git hub link to clone sample project using this stripe.

Yo, was anyone able to solve the HTTPS issue? My app works fine in test mode, but I get the “Live Stripe.js integrations must use HTTPS” error when I switch to live mode.:confounded:

Hy, I have a stripe token. But I don’t know how to charge it. here is my code for charging the token:
Screenshot_22
When, I run this. I get the error with the name of:


Please help?

did you find a solution for this ?

Late to the party, but would this help…

Hi @charlescc , I found a solution but it was not too good. I charged my token from the server.