Ionic 4中如何从InAppBrowser返回应用？支付成功后返回方法

Hey there! I’ve tackled these exact InAppBrowser return flows in Ionic 4 before, so let’s walk through both scenarios step by step.

1. General Scenario: Returning to App from InAppBrowser #

By default, InAppBrowser gives users basic ways to head back to your app:

• On Android: The system back button will close the InAppBrowser and return to your app (as long as you haven’t overridden global back button behavior).
• On iOS: The default toolbar includes a "Done" button that does the same.

But if you need custom controls or want to trigger the return programmatically, here’s how to handle it:

Option A: Listen for Exit Events #

You can hook into the exit event to run code right after the user closes the InAppBrowser:

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

constructor(private iab: InAppBrowser) {}

openExternalUrl() {
  const browser = this.iab.create('https://example.com', '_blank', {
    toolbar: 'yes',
    location: 'yes'
  });

  // Run logic when the user returns to the app
  browser.on('exit').subscribe(() => {
    console.log('User is back in the app!');
    // Add post-return actions here (e.g., refresh data, show a notification)
  });
}

Option B: Add a Custom Back Button to the Toolbar #

If you want a dedicated back button in the InAppBrowser toolbar, configure it in the options and listen for the backbutton event:

openExternalUrlWithCustomBack() {
  const browser = this.iab.create('https://example.com', '_blank', {
    toolbar: 'yes',
    leftButton: '<img src="assets/back-arrow.png" width="30" height="30">',
    toolbarColor: '#f5f5f5'
  });

  browser.on('backbutton').subscribe(() => {
    browser.close(); // Close the browser and return to the app immediately
  });
}

Option C: Trigger Return from the Loaded Webpage #

If the external page has a button meant to send users back to your app, have that button call window.close() (this works for pages opened in the InAppBrowser). Just ensure the external domain is trusted if you’re dealing with cross-origin restrictions.

2. Payment Gateway Scenario: Return to App After Successful Payment #

This requires a bit more setup because you need the payment gateway to notify your app when the payment completes. Here’s the standard approach using a custom URL scheme:

Step 1: Define a Custom URL Scheme #

First, set up a unique URL scheme for your app (e.g., myapp://). This lets the payment gateway redirect directly back to your app.

• Android: Add this to your config.xml (it will auto-update the AndroidManifest file):

  <allow-intent href="myapp://*" />
  <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:scheme="myapp" />
  </intent-filter>
  

• iOS: Add this to your config.xml (it will update the Info.plist file):

  <allow-intent href="myapp://*" />
  <preference name="URL_SCHEME" value="myapp" />
  

Step 2: Configure Payment Gateway Callback #

In your payment gateway settings, set the success callback URL to your custom scheme, e.g., myapp://payment-success?transactionId=12345. Most major gateways (Stripe, PayPal, etc.) support this.

Step 3: Listen for the Redirect in InAppBrowser #

When opening the payment page, listen for the loadstart event to detect when the payment gateway redirects to your custom URL. Then close the browser and handle the success:

processPayment() {
  const paymentUrl = 'https://your-payment-gateway.com/checkout?amount=100';
  const browser = this.iab.create(paymentUrl, '_blank', {
    toolbar: 'yes',
    location: 'no' // Hide address bar for a cleaner payment flow
  });

  browser.on('loadstart').subscribe((event) => {
    const url = event.url;
    // Check if the URL matches your payment success scheme
    if (url.startsWith('myapp://payment-success')) {
      browser.close(); // Close the InAppBrowser right away
      
      // Parse transaction details from the URL if needed
      const transactionId = new URL(url).searchParams.get('transactionId');
      console.log('Payment successful! Transaction ID:', transactionId);

      // Navigate to your app's payment success page
      this.navCtrl.navigateForward('/payment-success');
    }
  });

  // Handle payment cancellation or failure cases
  browser.on('exit').subscribe(() => {
    console.log('Payment was cancelled or failed');
    this.navCtrl.navigateForward('/payment-failure');
  });
}

Important Notes #

• Test the URL scheme on a real device (emulators/simulators sometimes have issues with deep links).
• Always validate transaction details with your backend before marking a payment as successful—don’t rely solely on the frontend redirect.

内容的提问来源于stack exchange，提问作者M Rizwan