Razorpay Integration in Ionic Anwendung

Was ist ein Zahlungs-Gateway?

Ein Zahlungs-Gateway ist ein Dienst zum Kauf von Produkten oder zur Bezahlung von Abonnements über eine beliebige mobile/webbasierte Anwendung. Da es aufgrund von Sicherheitsbeschränkungen keine direkte Interaktion zwischen der Anwendung und den Zahlungsabwicklern gibt, fungiert das Zahlungs-Gateway als Vermittler zwischen ihnen.

Welche Möglichkeiten gibt es?

Es gibt zwar eine Vielzahl von Zahlungsvermittlern, aber die folgenden sind einige der beliebtesten Zahlungsgateways:

1. Streifen
2. PayPal
3. Amazon Zahlungen
4. Bezahlen Sie U
5. Razorpay

Wir haben für diese Demo die Razorpay-Integration gewählt, da sie für die Integration und Anpassung gut dokumentiert ist. Es bietet klare und intuitive visuelle Designs für Kassen, was die Integration während der Entwicklung vereinfacht, und unterstützt eine breite Palette von Zahlungsoptionen wie Kredit- und Debitkarten, Banküberweisungen, e-Wallets, UPI, EMI.

Die Demo ist mit Angular (Ionic) mobile App implementiert. Das schrittweise Vorgehen in der Demo wird im Folgenden beschrieben:

1. Einrichten der Entwicklungsumgebung (Node, npm, ionic, cordova und deren Abhängigkeiten), um ionic-Anwendungen zu erstellen und auszuführen
2. Installieren Sie das Plugin mit den folgenden Befehlen

Ionic Cordova Plugin hinzufügen com.razorpay.cordova

npm installieren

1. Deklarieren Sie eine Variable in der ts-Datei Ihrer Seite.

declare var razorPayCheckout: any;

1. Fügen Sie den folgenden Code hinzu:

var options = {
description: ‘product or payment descripion’,
image: ‘image link to display in the UI’,
currency: ‘INR’,
key: ‘razor_pay_key’,
amount: ‘5000’,
name: ‘foo’,
prefill: {
email: ”,
contact: ”,
name: ”
},
theme: {
color: ‘#F37254’
}
}

• Währung : Razorpay akzeptiert 92 internationale Währungen (Stand heute). Unter dem folgenden Link finden Sie eine Liste aller unterstützten Währungen Internationaler Zahlungssupport von Razorpay
• Schlüssel : Den Schlüssel erhalten Sie von Razorpay.
• Farbe : Hex-Farbcode zum Ändern des UI-Themas des Zahlungsmoduls von razor.
• Prefill : Dies ist ein optionales Feld. Wenn es nicht angegeben ist, muss der Benutzer die Details manuell eingeben.

const successCallback = function(success) {
alert(‘payment_id: ‘ + success.razorpay_payment_id);
};
const cancelCallback = function (error) {
alert(error.description);
};
RazorpayCheckout.on(‘payment.success’, successCallback);
RazorpayCheckout.on(‘payment.cancel’, cancelCallback);
RazorpayCheckout.open(options);

1. Normale Fehlerreaktion:-

{
“error”: {
“code”: “GATEWAY_ERROR”,
“description”: “The gateway request timed out”,
“field”: null
}
}

1. Öffnen Sie die Razorpay-Website und registrieren Sie ein Konto.
2. Gehen Sie im Dashboard zu Einstellungen -> API-Schlüssel.
3. Klicken Sie auf 'Testschlüssel erzeugen' unter Testmodus aktiviert.

• Notieren Sie sich die erzeugten Schlüssel.

Arbeitsablauf der Anwendung:

Erhöhen Sie die Anzahl der Produkte auf 1 oder mehr. Klicken Sie jetzt auf die Schaltfläche Mit Razorpay bezahlen, um den Betrag zu bezahlen.
Geben Sie Ihre Handynummer und Ihre E-Mail-Adresse in das Feld ein und wählen Sie eine Zahlungsoption wie Kreditkarte, Net Banking usw. Klicken Sie auf mehr, um alle verfügbaren Zahlungsoptionen zu sehen.

Wählen Sie Karte als Zahlungsmethode, und geben Sie die Kartendaten auf dem Bildschirm ein. Von hier aus können wir zurückgehen, um die Zahlungsmethode zu ändern. Im Folgenden sehen Sie die verschiedenen Bildschirme der Benutzeroberfläche je nach gewählter Zahlungsmethode.

Wählen Sie eine Zahlungsmethode, geben Sie die erforderlichen Daten ein und klicken Sie auf Bezahlen, um fortzufahren. Sobald die Zahlung erfolgreich verbucht wurde, wird der Benutzer mit einer Erfolgsmeldung informiert.
Beispiel für ein Ionic Cordova Projekt als Referenz:
Razorpay Integration

Anmerkung:

Nachfolgend sehen Sie das Demo-Video für die Online-Zahlung mit Razorpay. Diese Demo wird im Testmodus durchgeführt. Das Video ist diesem Dokument als Referenz beigefügt.

Referenzen

Razorpay Integrationen Github Razorpay cordova