Charging credit card with Stripe in Ionic app


Is there anywhere on earth that one can find info on using Stripe payment plugin to charge a credit card in an Ionic 3 app?? I want to fully integrate Stripe into my app, so it functions similar to the Uber app. Stripe’s ionic native plugin doesn’t seem to have charging functionality (it’s only for creating a token and validating card info, and nothing else), and I can’t find any tutorial showing how to charge a card & stuff.

I’ve searched google and all I’ve seen are plugins & templates for full integration, all for sale.

Any help would be greatly appreciated, as I’m at a stand still at the moment.



hi you got any solution ?
I also need this for my app


Yes I did. The plugin is useless so I’m not using it. Instead, I did the following

  • Added this line to index.html

<script src=“” async></script>

  • Declared Stripe on the page you intend to use it. I did it in a provider

declare var Stripe: any;

  • Declared a local variable to reference the Stripe variable above

public stripe;

  • In the constructor, set the local stripe …

this.stripe = Stripe(‘pk_Your_stripe_key’);

You can now use the stripe variable to create token, etc.

Good luck.


Hey, I have a stripe token with test key. I just want to charge it. Can you help???


In my case, I did a to a PHP file I made that has the code to charge the credit card.

The PHP code looks like this…

$stripe = array(
  "secret_key"      => "sk_test_XXXXXXXXXXXXXX",
  "publishable_key" => "pk_test_XXXXXXXXXXXXXXX"


global $post;
        $charge = \Stripe\Charge::create([
            'amount' => $post->amount,
            'currency' => $post->currency,
            'description' => $post->description,
            'source' => $post->token,
        echo json_encode($charge);
    catch (\Stripe\Error\Base $e) {
        // Code to do something with the $e exception object when an error occurs
        echo("Error charging: ".$e->getMessage());
    } catch (Exception $e) {
        // Catch any other non-Stripe exceptions
        echo("Error charging: ".$e->getMessage());

So the .ts code would be something like this (assuming you’re charging $100, and your token is XXXXYYYY)

let params={amount:10000, currency:'USD',description:'Test', token:'XXXXYYYY'};'', JSON.stringify(params),{responseType: 'text'})
        .subscribe(res => {

For more info, visit or

Hope this helps. Good luck


Hey Obinnae,

Want to check with you if there is any issue in production using this method? There is a warning that stripe needs a https connection and since this is an ionic app I am not sure how this is works?

I am doing the exact same thing as you haha


Hi Thehuangkai, I haven’t tried it in production yet, but there shouldn’t be an issue. I get the warning as well.
Just be sure to host the PHP file on a secure https server.
Hope this helps.


great! thanks. Hopefully it works well


@obinnae Hi, in which file, I need to add this code.



The php code is put it into your server which have ssl (https) , not in ionic,

It just like a website to use Stripe, so you need a server (such as lamp) to use it

1 Like

Hi @ivan5182 , I can understand, And I have a https server. But the problem is that, in which file in the server, where I need to put this code. Like ( functions.php ) or other.


You can create any file you wish and put the code there, then reference it from the ionic .ts file.


Hy @obinnae, I just do the same as you said, But I am getting file code in the console log instead of response. See my console log:
I also tried to use publishable_ key in the file.
Here is my ionic code that you provided:

 let params={amount:10000, currency:'USD',description:'Test', token: this.token};'', JSON.stringify(params),{responseType: 'text'})
        .subscribe(res => {

Please help