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 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 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 Terms | Privacy open in In app browser or hide/remove the Terms | Privacy 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!

Answer 1

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.

Answer 2

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 ;)