Implement Stripe Payment Gateway in Cordova/Phonegap Application

Question

Searched a lot. I want to integrate Stripe Payment Gateway in my cordova application is there any way to achieve it in android and ios using javascript.

Answer 1

I emailed stripe, and apparently it works fine on iOS if you simply integrate it as you would on the web. Unfortunately it does not work on android yet! :(

While Checkout should work fine on iOS devices with PhoneGap (or anything that uses native WebViews), it does not work on Android devices with native WebViews. This is a known issue, and one we would like to fix in the future, but are not able to fix yet. The solution, for now, if Android is a requirement is to build a custom form using Stripe.js[0].

UPDATE:

Apparently one exists! I haven't tried it yet but here's the link

http://plugins.telerik.com/plugin/stripe

UPDATE 2: checkout.js actually works fine with phonegap or cordova now. Check out the docs here.

UPDATE 3: Apparenly checkout.js is broken again for anything over and including cordova ios 4.0.0, the latest version of cordova ios that works is 3.9.2. Got another question going on here about it: Using Stripe Checkout with Cordova ios 4.0.0+

UPDATE 4: We are now using Stripe V3 Elements but stripe checkout.js should work as long as you have whitelisted stripe as seen here

Answer 2

Edit 2:

My below proposal hasn't worked, checkout.js gives me an error saying something went wrong, and to try a different browser. I still don't have a situation besides building my own checkout form.

Edit 1:

Proposed solution and how I am solving this:

In order to address this part of the checkout.js docs (seen in the FAQ at the bottom): Proposed solution:

In order to address this part of the checkout.js docs (See the FAQ at the bottom),

"All submissions of payment info using Checkout are made via a secure HTTPS connection. However, in order to protect yourself from certain forms of man-in-the-middle attacks, you must serve the page containing the payment form over HTTPS as well. In short, the address of the page containing Checkout must start with https:// rather than just http://."

To secure this, I am embedding an <iframe> in my Cordova app with the src set to an API endpoint I've made and I own. The API endpoint returns the <Form> snipper they show in the Simple implementation in the docs. So my api endpoint returns this HTML:

<form action="/charge" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
    data-amount="2000"
    data-name="Stripe.com"
    data-description="2 widgets"
    data-image="/img/documentation/checkout/marketplace.png"
    data-locale="auto">
  </script>
</form>

This way the checkout is secured with https!

Now here's my warning about the plugin earlier mentioned. Thanks @Amrit Kahlon for updating that post!

---

Warning! DO NOT use the plugin discussed in this thread: Telerik-Verified-Plugins/Stripe

There doesn't seem to be a good alternative out there plugin-wise, you'll have to do it yourself as well it seems.

The plugin requires you to store your Stripe secret key on the client-side, which gives malicious people a chance to take it and use it.

The secret key is supposed to stay secret.

This is what the plugin's docs (https://github.com/Telerik-Verified-Plugins/Stripe/blob/master/doc/index.md) say about itself:

Security Warning

This plugin requires that the Stripe secret key is embedded into the application. As the name suggests, you should never share the secret key as it allows full access to the Stripe API. Embedding the secret key into the application means that anyone can discover the key and use it to access the API. This could cause sensitive data to leak (all previous charges are visible) or even financial loss (refunds can be initiated).

It is highly unlikely that you want to embed your Stripe secret key in a Cordova application, and hence highly unlikely you want to use this plugin.

https://support.stripe.com/questions/difference-between-secret-key-and-publishable-key

The correct method to accept payments from mobile devices uses the publishable key only. Whilst it is possible to submit payments using the secret key, anyone who obtains your secret key can view all prior charges, issue refunds, and initiate transfers.

Please carefully consider if this is what is intended before use.