In-App-Kauf mit React Native

Jun 11 2019Written by Manektech Team

In-App Käufe! Unter anderem eine Möglichkeit, von Ihrer tragbaren Anwendung zu profitieren. Sie können Ihr Produkt einmalig verkaufen oder ein Abonnement anbieten, abhängig von Ihren Produkten. Für mobile Anwendungen wird der In-App-Kauf zu einem wichtigen Bestandteil, wenn Sie digitale Inhalte oder Funktionen verkaufen.

Im Allgemeinen unterstützen iOS und Google In-App-Käufe. Sie implementieren sie einfach zusammen mit Ihrem nativen Code. Wenn Sie jedoch ein hybrides Framework für die EntwicklungIhrer mobilen App verwenden, ist es schwierig, die einzelnen Plattformen iOS und Android in einem Code zu verwalten.

In diesem Blog habe ich bei der Entwicklung der React Native-App die Bibliothek "react-native-iap" verwendet, die bei jedem Kauf einer iOS- und Android-In-App für ein einzelnes Produkt und Abonnement eine gute Unterstützung bietet.

Bevor Sie mit der Implementierung beginnen, gehe ich davon aus, dass Sie bereits auf In-App-Einstellungen in Ihrem App Store und Play Store reagieren. Lassen Sie uns ein paar einmalige Kaufgegenstände und ein paar automatisch erneuerbare Abonnementgegenstände erstellen.

Installationsanleitung


Lassen Sie uns eine neue React Native-App erstellen. Nachdem Sie sie erfolgreich erstellt haben, fügen Sie mit diesem Befehl das folgende Paket in Ihr Projekt ein.

npm ich reagiere-native-iap --save

Für Android einrichten 
Sie müssen der Android-Manifest-Datei Berechtigungen hinzufügen.

Einführen 
Importieren Sie die Bibliothek in Ihren React Native-Code. Verwenden Sie dazu den folgenden Code.

port * als RNIap von "react-native-iap"

Verwendungszweck 
Öffnen Sie Ihre App.js-Datei und fügen Sie Ihre Kaufgegenstände und Abonnementgegenstände für iOS und Android ein, wie im folgenden Code beschrieben.

// Artikel kaufen 
const itemSkus = Platform.select ({ 
ios: [ 
"EINFÜGEN IHRER EINKAUFS-ID IOS" 
], 
Android: [ 
"Geben Sie Ihre Kaufnummer ein ANDROID" 
] 
});

// Abonnementgegenstände 
const itemSubs = Platform.select ({ 
ios: [ 
"FÜGEN SIE IHR ABONNEMENT ID IOS EIN" 
], 
Android: [ 
"FÜGEN SIE IHRE ABO-ID ANDROID EIN" 
] 
});

Holen Sie sich In-App-Produkte für iOS und Android


Wenn Sie getProducts () widerrufen, erhalten Sie eine Liste der gültigen Produkte, die im App Store und im Play Store erstellt wurden. Sie erhalten eine JSON-Antwort auf alle Ihre Produkte. 
Versuchen { 
const products = warte auf RNIap.getProducts (itemSkus); 
this.setState ({products}); 
} catch (err) { 
console.warn (err); // standardisierter err.code und err.message verfügbar 
} 

In-App-Kauf 
Sie können buyProduct () aufrufen, sobald Sie eine gültige Produktliste haben. buyProduct () wird häufig sowohl für Verbrauchsartikel als auch für Abonnementartikel verwendet. Sie kündigen das Abonnement von Ihrer iOS- oder Android-Einstellung.

Versuchen 
// Gibt ein Kaufobjekt mit einer Quittung zurück, die zur Validierung auf Ihrem Server verwendet werden kann. 
const purchase = wait RNIap.buyProduct ('IHRE PRODUKT-ID'); 
this.setState ({ 
quittung: purchase.transactionReceipt, // speichere die quittung, wenn du sie brauchst, lokal oder auf deinem server. 
}); 
} catch (err) { 
// standardisierter err.code und err.message verfügbar 
console.warn (err.code, err.message); 
} 
Hinweis: Für iOS haben Sie zwei Möglichkeiten, den Empfang entweder auf dem Mobiltelefon oder auf dem Server zu überprüfen. Für Android müssen Sie die Überprüfung jedoch nur auf dem Server durchführen.

In-App-Käufe wiederherstellen


Wenn Sie bereits einen Kauf getätigt haben und Ihre vorherigen Einkäufe in Ihrer App wiederherstellen möchten, müssen Sie getAvailablePurchases () aufrufen. Es werden alle zuvor gekauften Produkte und Abonnements aufgelistet.

getPurchases = async () => { 
Versuchen { 
const purchase = wait RNIap.getAvailablePurchases (); 
} catch (err) { 
console.warn (err); // standardisierter err.code und err.message verfügbar 
} 
}

Nach erfolgreichem Abonnementkauf erhalten Sie als Antwort einen Abonnementbeleg und weitere Details. Die Quittung wird später verwendet, um Ihren Kauf zu bestätigen, während Sie Ihre App das nächste Mal öffnen. Wenn also ein Benutzer das Abonnement kündigt, wird das Abonnement des Benutzers auf den normalen Modus zurückgesetzt.

Die Empfangsbestätigung wird mit validateReceiptIos () abgeschlossen, wie in den folgenden Codefragmenten beschrieben.

const receptBody = { 
'Zugangsdaten': purchase.transactionReceipt, 
'Passwort': '******' 
}; 
const result = wait RNIap.validateReceiptIos (receiptBody, false); 
console.log (Ergebnis);

Der oben angegebene Validierungscode gilt nur für iOS. Wenn Sie Ihre App später nach dem Abonnement öffnen, verwenden Sie diese Quittung und validieren sie mit Ihrem App-Geheimnis für diese App im App Store.

Kontaktiere uns

Hier, um ehrgeizigen Menschen zu helfen TRANSFORMIEREN Sie die digitalen Lösungen!