Charging credit card with Stripe in Ionic app

Ionic Framework ionic-v3
1

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.

Thanks.

2

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

3

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=“https://js.stripe.com/v3/” 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.

4

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

5

In my case, I did a httpClient.post 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"
);

\Stripe\Stripe::setApiKey($stripe['secret_key']);

global $post;
    try
    {
        $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'};
httpClient.post('http://whatever.com/chargestripe.php', JSON.stringify(params),{responseType: 'text'})
        .subscribe(res => {
console.log(res);
});

For more info, visit https://stripe.com/docs/charges or https://stripe.com/docs/api/charges/create.

Hope this helps. Good luck

6

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

7

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.

8

great! thanks. Hopefully it works well

9

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

10

Hi

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
11

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.

12

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

13

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:
Screenshot_24
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};
this.httpClient.post('https://mysite.com/wp-content/themes/archi-child/payment.php', JSON.stringify(params),{responseType: 'text'})
        .subscribe(res => {
console.log(res);
});

Please help