Pont des API web

1Que sont les passerelles d'API web ?#

La WebView d'Android ne prend pas en charge plusieurs API web modernes que Chrome gère. Votre application générée ajoute automatiquement ces API par polyfill pour que les sites fonctionnent comme dans Chrome :

✅ Notifications web (API Notification)
✅ Partage web (navigator.share)
✅ Presse-papiers (navigator.clipboard)
✅ window.close()
✅ Liens target="_blank" et window.open()

Aucune configuration nécessaire : cela fonctionne automatiquement dans toutes les applications générées.

2Notifications web#

Les sites web qui utilisent Notification.requestPermission() et new Notification() afficheront de vraies notifications Android.

• Sur Android 13+, l'utilisateur reçoit une boîte de dialogue d'autorisation système
• Sur Android 12 et versions antérieures, les notifications sont autorisées par défaut
• Toucher une notification ouvre l'application
• L'option « tag » remplace les notifications précédentes (conforme à la spécification Web)

// Your website JS — works the same as in Chrome:
Notification.requestPermission().then(function(result) {
  if (result === 'granted') {
    new Notification('Hello!', {
      body: 'This is a native Android notification',
      tag: 'my-notif'
    });
  }
});

3API Web Share#

navigator.share() ouvre la feuille de partage native d'Android, permettant aux utilisateurs de partager du contenu vers WhatsApp, Telegram, e-mail, etc.

• Prend en charge title, text et url
• navigator.canShare() renvoie true
• Fonctionne exactement comme la boîte de partage de Chrome

// Share content from your website:
navigator.share({
  title: 'Check this out',
  text: 'Amazing content!',
  url: 'https://example.com/page'
});

4API Presse-papiers#

navigator.clipboard.writeText() et readText() sont reliés au presse-papiers natif d'Android.

• writeText() copie du texte dans le presse-papiers du système
• readText() lit le presse-papiers du système
• Les deux renvoient des Promises (conformément à la spécification Web)

// Copy to clipboard:
await navigator.clipboard.writeText('Hello World');

// Read from clipboard:
const text = await navigator.clipboard.readText();

5window.close() et target="_blank"#

Deux lacunes courantes de la WebView sont aussi corrigées :

• window.close() : ferme/termine l'activité de l'application (utile pour les pages de retour de paiement/authentification)
• Liens target="_blank" : se chargent dans la WebView au lieu d'être ignorés silencieusement
• Appels window.open() : traités de la même façon

Aucune modification du site web n'est nécessaire : cela fonctionne tout seul.

6Correspondance de domaine pour les liens externes#

Quand « Liens externes → Ouvrir dans le navigateur » est activé, l'application fait correspondre les domaines intelligemment :

• google.com et www.google.com sont traités comme le même domaine
• Seuls les domaines réellement différents s'ouvrent dans Chrome
• Les redirections au sein du même site restent dans la WebView

Cela évite qu'un site comme google.com qui redirige vers www.google.com s'ouvre par erreur dans Chrome.

7Liens UPI et applications de paiement (Razorpay, GPay, PhonePe, Paytm)#

Tout lien dont le schéma n'est pas une page web ouvre automatiquement l'application Android qui le gère, sans configuration ni liste de schémas à renseigner :

• upi://pay : intention UPI générique (l'utilisateur choisit son application UPI)
• paytmmp:// (Paytm), phonepe://, tez:// (Google Pay), gpay://
• tel:, mailto:, sms:, whatsapp://, tg://, intent://

Cela fonctionne partout où une page peut naviguer :
✅ Un lien <a href="upi://pay?..."> touché
✅ Une redirection JS (window.location.href = 'upi://...')
✅ Une fenêtre contextuelle : window.open('paytmmp://...'), c'est ainsi que Razorpay Checkout passe la main aux applications UPI

Ainsi, les pages de paiement Razorpay / Cashfree / PhonePe fonctionnent telles quelles : le client touche une option UPI, l'application de paiement s'ouvre, il valide, et le gestionnaire de succès de votre page se déclenche à son retour. Si aucune application du téléphone ne gère le schéma, l'utilisateur voit un message clair au lieu d'une page d'erreur vide.

⚠️ Vous vendez des biens NUMÉRIQUES dans une application du Play Store ? Google exige Play Billing pour cela : utilisez plutôt le guide des achats intégrés. Le paiement UPI/carte est destiné aux biens physiques, aux services et aux applications distribuées hors de Play.

<!-- Simplest form — a plain UPI intent link. The user's phone
     shows every installed UPI app (GPay/PhonePe/Paytm/BHIM): -->
<a href="upi://pay?pa=merchant@bank&pn=MyStore&am=99.00&cu=INR&tn=Order%20123">
  Pay ₹99 via UPI
</a>

8Exemple complet : Razorpay Checkout avec UPI, de bout en bout#

Un parcours complet à copier-coller avec Razorpay Checkout. Ce qui se passe sur le téléphone :

1. Le client touche « Payer 499 ₹ » → Razorpay Checkout s'ouvre dans la page
2. Le client choisit UPI → son application UPI s'ouvre automatiquement (c'est le passage de relais paytmmp:// / phonepe:// que l'application gère pour vous)
3. Le client valide dans l'application UPI et revient : Android ramène votre application tout seul
4. La fonction de rappel se déclenche avec un identifiant de paiement → affichez votre écran de succès
5. dismiss se déclenche s'il annule → laissez-lui la possibilité de réessayer

Remplacez rzp_test_XXXXXXXX par votre clé depuis dashboard.razorpay.com. Testez d'abord avec une clé key_test : le mode test de Razorpay simule la validation UPI.

⚠️ Pour une vraie boutique, confirmez le paiement côté serveur (webhook Razorpay ou API Orders + vérification de signature) avant d'expédier des biens : le gestionnaire côté navigateur seul peut être falsifié.

<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

<h2>Premium Plan — ₹499</h2>
<button id="payBtn">Pay ₹499</button>
<p id="result"></p>

<script>
document.getElementById('payBtn').onclick = function () {
  var rzp = new Razorpay({
    key: 'rzp_test_XXXXXXXX',      // your Razorpay Key ID
    amount: 49900,                  // paise — ₹499.00
    currency: 'INR',
    name: 'My Store',
    description: 'Premium Plan',
    prefill: { contact: '', email: '' },
    theme: { color: '#2563eb' },

    // Fires after the customer returns from their UPI app
    handler: function (response) {
      document.getElementById('result').textContent =
        '✅ Paid! Payment ID: ' + response.razorpay_payment_id;
      // Real store: send response.razorpay_payment_id to your
      // server / webhook flow and verify before unlocking anything.
    },

    modal: {
      ondismiss: function () {
        document.getElementById('result').textContent =
          'Payment cancelled — tap Pay to try again.';
      }
    }
  });
  rzp.open();
};
</script>