React Native

Mobile Käufe haben in der letzten Zeit zugenommen. Novalnet ermöglicht es seinen Händlern, React Native als eine der Schlüsselkomponenten einzusetzen. Diese Option erlaubt es Händlern, Zahlungen auf Mobilgeräten nahtlos für ihre Kunden zu integrieren. Die Einrichtung fast aller modernen Zahlungsarten war noch nie so einfach, da Sie jetzt Novalnets anpassbare gehostete Zahlungsseite in Ihrer mobilen App verwenden können.

React Native vereint die besten Anteile einer Entwicklung für die jeweilige Betriebssystemumgebung mit React, einer erstklassigen JavaScript-Bibliothek zum Erstellen von Nutzerschnittstellen.

Wie funktioniert es?

Wenn der Endkunde auf den Button “Bestellen” in seiner / ihrer mobilen App klickt, um die Zahlung zu bestätigen, wird die von Novalnet gehostete Zahlungsseite in der App als WebView angezeigt. Der Kunde kann die bevorzugte Zahlungsart auswählen und sobald der Kunde den Zahlungsvorgang abschließt, erhalten Sie das Ergebnis der Zahlung an Ihre entsprechenden URLs für die Rückmeldung (transaction.return_url, transaction.error_return_url). Außerdem können Sie einen Aufruf an die /transaction/details-API ausführen, um zusätzliche Details zum Ergebnis der Transaktion zu erhalten.

Anforderungen

Um dieses Verfahren zu implementieren, müssen die folgenden Bibliotheken auf Ihrem Server installiert sein.

react-native-webview
react-native-base64

Schritte um den Kauf per WebView abzuschließen

Befolgen Sie die Schritte unten zur Einbindung einer mobilen App unter Einsatz von React Native:

Schritt 1: Generierung einer Zahlungs-URL

Sie schicken alle notwendigen Transaktionsparameter im voraus an Novalnet ohne Interaktion mit dem Nutzer und übergeben somit alle Daten auf denen die Transaktion basiert (Nutzer-/Bestelldaten, Händler-Zugangsdaten etc. außer sensiblen Zahlungsdaten) über einen Serveraufruf, um die URL für die Zahlung zu generieren (auf dem Novalnet-Server gehostet).

Referenz zu den Parametern

Das Beispiel in den Schritten unten enthält nur die minimalen Parameter für die Ausführung und Erklärung des Demos. Um mehr über alle Parameter, ihre Beschreibungen, eine Erklärung zum Header und zu den Ergebnissen zu erfahren, sehen Sie sich bitte dies an: >>Link<<.

Anpassung der Zahlungsseite mit einem Layout und Design Ihrer Wahl

Die bei Novalnet gehostete Zahlungsseite lässt sich im Hinblick auf Layout und Design komplett einstellen, Sie können diese nach Ihren Wünschen anpassen. Sehen Sie sich dazu den Block unter hosted_page in dem Link mit der Referenz zu allen Parametern an, um das Layout per Stylesheet anzupassen sowie den Header, Footer etc.

REACT JS

componentDidMount() {
  // Need to enter your payment access key value here
  const payment_access_key  = '###YOUR_PAYMENT_ACCESS_KEY###';

  // Now, have to encode the payment_access_key value with the base64 encode
  const encoded_data        = base64.encode(payment_access_key);

  // Action Endpoint
  const endpoint            = 'https://payport.novalnet.de/v2/seamless/payment';

  // Build the Headers
  const headers = {
    // The Content-Type should be "application/json"
    "Content-Type": "application/json",

    // The charset should be "utf-8"
    "Charset":"utf8",

    // Optional
    "Accept":"application/json",

    // The formed authenticate value (case-sensitive)
    "X-NN-Access-Key": encoded_data
  };

  const data = {};

  // Build Merchant Data
  data.merchant = {
    // Your API signature value
    "signature": "###YOUR_API_SIGNATURE###",

    // Your corresponding tariff ID
    "tariff": "###YOUR_TARIFF_ID###"
  };

  // Build Customer Data
  data.customer = {
    // Shopper's first name
    "first_name": "Max",

    // Shopper's last name
    "last_name": "Mustermann",

    // Shopper's email
    "email": "test@novalnet.de",

    // Shopper's customer number from the shop
    "customer_no": "###CUSTOMER_NUMBER###",

    // Shopper's Telephone number
    "tel": "+49 089 123456",

    // Shopper's Mobile number
    "mobile": "+49 174 7781423",

    // Shopper's IP address - Decomment it based on your usage
    // "customer_ip": "###CUSTOMER_IP###",

    // Shopper's birthdate value YYYY-MM-DD - Decomment it based on your usage
    // "birth_date": "1992-06-10",

    // Shopper's gender - Decomment it based on your usage
    // "gender": "u",

    // Shopper's company vat ID value - Decomment it based on your usage
    // "vat_id": "DE123456",

    // Shopper's company regestration number - Decomment it based on your usage
    // "reg_no": "HRB1234",

    // Shopper's company tax ID value - Decomment it based on your usage
    // "tax_id": "123/123/123",

    // Shopper's session value - Decomment it based on your usage
    // "session": "fedgrgst5653653hdgfsvgdsf622627e",

    // Shopper's fax number - Decomment it based on your usage
    // "fax": "+49 89 654321",

    // Shopper's billing address
    "billing": {
      // House number
      "house_no": "2",

      // Street
      "street": "Musterstr",

      // City
      "city": "Musterhausen",

      // zip
      "zip": "12345",

      // Country's ISO code
      "country_code": "DE",

      // Name of the company - Decomment it based on your usage
      // "company": "ABC GmbH"
    }
  };

  // Build Transaction Data
  data.transaction = {
    // The Payment type of the transaction
    "payment_type": "###PAYMENT_TYPE###",

    // The transaction amount in smaller currency unit
    // For the predefined tariff, amount is not required to be passed explicitly
    "amount": "###TRANSACTION_AMOUNT###",

    // The transaction currency's ISO code
    // For the predefined tariff, currency is not required to be passed explicitly
    "currency": "###TRANSACTION_CURRENCY###",

    // The mode of the transaction
    "test_mode": "###TEST_MODE###",

    // The order no of the transaction
    "order_no": "###TRANSACTION_ORDER_NUMBER###",

    // Need to be specify this for the Redirect payment types to which you need to redirect on SUCCESS
    "return_url": "###YOUR_RETURN_URL###",

    // Need to be specify this for the Redirect payment types to which you need to redirect on FAILURE (optional)
    "error_return_url": "###YOUR_ERROR_RETURN_URL###",

    // The Notify URL value for this particular transaction
    "hook_url": "###HOOK_URL###",

    // The flag to create the token for the payment data - Decomment it based on your usage
    // "create_token": 1,
  };

  // Hosted Payment page customizations
  data.hosted_page = {
    // Change logo in the Hosted payment page
    "logo": "###YOUR_SHOP_LOGO###",

    // Change the styling of the Hosted payment page - Decomment it based on your usage
    // "css_url": "###YOUR_CSS_URL###",

    // Payment types to be displayed in the Hosted Payment Page
    "display_payments": [
        "CREDITCARD",
        "DIRECT_DEBIT_SEPA",
        "INVOICE",
        "IDEAL",
         
        "PAYPAL"
    ],

    // Payment types to be hidden in the Hosted Payment Page - Used when necessary and display_payments when not in use
    //"hide_payments": [
    //    "CREDITCARD",
    //    "DIRECT_DEBIT_SEPA",
    //    "INVOICE",
    //    "IDEAL",
    //     
    //    "PAYPAL"
    //],

    // Hide the following sections from the Hosted Payment Page
    "hide_blocks": [
        "ADDRESS_FORM",
        "SHOP_INFO",
        "LANGUAGE_MENU",
        "HEADER",
        "TARIFF"
    ],

    // Customize the display of the following pages
    "skip_pages": [
        "CONFIRMATION_PAGE",
        "SUCCESS_PAGE",
        "PAYMENT_PAGE"
    ]
  };

  let request_data = {
    method: 'POST',
    body: JSON.stringify(data),
    headers: headers
  }
  return fetch(endpoint, request_data)
        .then(response => response.json())
        .then((responseJson) => {
          // Handle Response
          if(responseJson.result.redirect_url && responseJson.transaction.txn_secret) {
            this.setState({
              nnJsonData: responseJson
            })
          } else {
            //Handle the failure cases here
            console.log('Failure message:'+responseJson.result.status_text);
          }
        })
        .catch((error) => {
          //Handle the error
          console.error(error);
        });
  }

Schritt 2: Laden des Zahlungsformulars in der mobilen App

Sobald der URL für die Zahlung erfolgreich erstellt wurde, können Sie die Zahlungsseite mit WebView in Ihrer mobilen App anzeigen.

REACT JS

render() {
   // Load the Payment form URL
   return this.state.nnJsonData ? (
      <WebView
        source={{
            uri: this.state.nnJsonData.result.redirect_url
          }
        }
      />
   ) : null; //Handle the UI loading icon/any other failure info display
}

Das gehostete Zahlungsformular von Novalnet wird auf die folgende Weise mit WebView dargestellt.

Sie können die Beispiel-Codedatei für React Native JS auch hier herunterladen: >>Link<<

Schritt 3: Erhalt / Verarbeitung des Zahlungsstatus

Nach erfolgreichem Abschluss der Zahlung wird der Kunde zu dem angegebenen transaction.return_url weitergeleitet, welcher in dem ersten Aufruf zur Generierung der Zahlungs-URL übergeben wurde (siehe Schritt 1 oben).

Das Fällen einer Entscheidung zum Ergebnis in WebView hängt nur von dem Parameter status im Objekt result ab. Der Parameter kann entweder den Wert SUCCESS (erfolgreich) oder FAILURE (fehlgeschlagen) annehmen.

RESPONSE

// To handle the API response, we need the TID and STATUS as minimal parameters for the decision making
if (RESPONSE.STATUS && RESPONSE.TID)
{
  if (RESPONSE.STATUS == 'SUCCESS')
  {
    // Perform the success procedure
  }
  else
  {
    // Perform the failure procedure
  }
}
else
{
  // Fatal error as the mandatory parameters for the decision making is not present 
}
?>

Abholung aller Transaktionsdetails (optional)

Wenn Sie schon Meldungen über einen Webhook verarbeiten, ist dieser Schritt nicht notwendig, denn Ihr Webhook erhält alle Transaktionsdetails.

Die Rückmeldung in WebView liefert Ihnen nur minimale Daten zur Transaktion. Um die gesamten Transaktionsdetails abzuholen, führen Sie einen Aufruf an die /transaction/details-API durch und verwenden dabei die tid welche in der Rückmeldung an WebView in Schritt 2 zurückgegeben wurde.

Um mehr zu den Parametern, Beispielcodes und Ergebnissen bei der Abfrage von Transaktionsdetails über die API zu erfahren, sehen Sie sich dies hier an >>Link<<

React Native

Wie funktioniert es?

Anforderungen

Schritte um den Kauf per WebView abzuschließen

Schritt 1: Generierung einer Zahlungs-URL

Referenz zu den Parametern

Anpassung der Zahlungsseite mit einem Layout und Design Ihrer Wahl

Schritt 2: Laden des Zahlungsformulars in der mobilen App

Schritt 3: Erhalt / Verarbeitung des Zahlungsstatus

Abholung aller Transaktionsdetails (optional)

Verwandte Themen