Using Stripe Checkout in Cordova

Question

I am able to get the Stripe Checkout to work in my Ionic/Cordova app. It shows an iFrame where allow user to enter their Stripe login info / credit card info to finish the payment process.

However there is one user case that I can't support correctly - When user clicks the Terms | Privacy links from the Stripe Checkout iFrame, the link is opened with the Cordova Webview, which destroys my app since the Cordova left my app and went to the Stripe's Terms | Privacy web page. There is no back button on iOS and even though there is one on Android, the app state is totally destroyed since we've left our app.

I have tried using In app browser, but with no luck since I can't get URLs from Stripe to feed them to In app browser. Also I can't manipulate the Stripe Checkout iFrame HTML because of security reasons. So it seems that I don't have any way to either make the Terms | Privacy open in In app browser or hide/remove the Terms | Privacy by changing the iFrame HTML.

Is there a solution to this question? If not, I might consider not using Stripe Checkout in my app.

Thanks!

score 2 · Accepted Answer · answered Aug 30 '17 at 17:44

2

The long and short of it is that you should not use Checkout in Cordova apps. While some features may work in some cases, not all of them will work correctly (as is the case with the issue you described).

Instead, you should design your own custom form using Stripe's Elements library to use it in your Cordova webview.

answered Aug 30 '17 at 17:44

Ywain

16,854
4
51
67

Elements doesn't seem to remember my Stripe info (e.g. with verified phone number, I don't need to entry my cc info again) the same way Checkout does, which I consider the number one benefit I get from Checkout. I might just stick to my old and pale form input for customer info then. – nigong Aug 30 '17 at 17:50
2

Does Stripe Elements work in production? (my webview is displayed in `file://` and not in `https://`) – Lucas Basquerotto Sep 06 '19 at 19:41
I think @Ywain should strike the bit about Elements. Putting the stripe.js reference on a cordova app causes a warning that SSL will be required for production use. AFIK this breaks it for production use with cordova (or capacitor) apps. – Daniel Apr 16 '20 at 20:53

score 1 · Answer 2 · answered Feb 17 '21 at 16:41

I have successfully managed to get Stripe Checkout working in Cordova application using the mentioned InAppBrowser plugin.

You are right, you cannot feed the InAppBrowser plugin with a direct return URL, since Stripes javascript for checkout only creates a redirect.

The way around this, is by creating your own php file, which will do the stripe redirect.

redirect.php would look something like this, for using sofort payment type.

<?php 

// Include neccessary php Stripe sdk 
require_once('PATH TO STRIPE SDK');

$stripe_secret_key = 'YOUR STRIPE SECRET KEY'; 
$stripe_api_key = 'YOUR STRIPE API KEY'; 

// Using Stripe SDK create the Checkout 


// price in € 
$price_including = 100; 


\Stripe\Stripe::setApiKey($stripe_secret_key);

        $session = \Stripe\Checkout\Session::create([
            'payment_method_types' => ['sofort'],
            'line_items' => [[
              'price_data' => [
                'currency' => 'eur',
                'product_data' => [
                  'name' => 'YOUR PRODUCT NAME',
                ],
                'unit_amount' => $price_including*100,
              ],
              'quantity' => 1,
            ]],
            'mode' => 'payment',
            'success_url' => 'URL TO YOUR SUCCESS PAGE',
            'cancel_url' => 'URL TO YOUR ERROR PAGE',
          ]);
        
          $sid = $session->id;


// with the created Session ID call the Stripe Javascript which will do the redirect

// Include Stripe JS First
echo '<script src="https://js.stripe.com/v3/"></script>'; 

          echo '<script type="text/javascript">

                     var stripe = Stripe("'.$stripe_api_key.'");

                      function redirect() 
                      {
                        return stripe.redirectToCheckout({ sessionId: "'.$sid.'" });
                      }

                      redirect(); 
         
          </script>'; 


?>

and this is basically it, all you have left to do now is call the InAppBrowser with the URL pointing towards your created php file ;)

Using Stripe Checkout in Cordova

2 Answers2