Shopify - Schnelle Einrichtung | Novalnet-Dokumentation

Payment-Plugins Shopify Schnelle Einrichtung

Schnelle Einrichtung

Diese Anleitung beschreibt einen schnellen Installationsablauf für die Novalnet-Zahlungsapp, um diese in Ihr Shopsystem einzubinden, und damit zu beginnen Zahlungen weltweit anzunehmen. Für diese Einbindung ist ein Novalnet-Händleraccount notwendig, um Novalnet-Zahlungen anzunehmen. Stellen Sie deshalb sicher, dass Sie Ihre Händler-Kontodaten von unserem Sales-Team erhalten haben. Falls nicht, schicken Sie eine E-Mail an sales@novalnet.de.

Anforderungen:

Novalnet-Zahlungsapp

1.2.0

Änderungsprotokoll

Version	1.2.0
Datum	09.06.2023
Anmerkungen	[Neu] Eingebaute Zahlungsarten: Google Pay, Onlineüberweisung, Trustly, WeChat Pay und Alipay [Verbessert] Verbesserte Anweisungen in der Readme-Datei der Installationsanleitung

Um anzufangen:

Loggen Sie sich im Novalnet Admin-Portal mit den Daten zu Ihrem Händler-Account (Nutzer-Zugangsdaten) ein.
Loggen Sie sich in Ihr Shopify-Shopsystem ein.
Falls Sie nur die Installationsanleitung ohne einen Link zur Installation der Zahlungsapp erhalten haben, schicken Sie uns bitte eine E-Mail an technic@novalnet.de mit Ihrer Händler-ID.

Installation der App

Kontaktieren Sie bitte sales@novalnet.de, um den Link zur Installation der Novalnet-Zahlungsapp zu erhalten. Nachdem Sie den Link zur Installation erhalten haben, folgen Sie den Schritten unten im Admin-Panel des Shops (wie in den Bildern unten angezeigt):

Schritt 1: Klicken Sie auf den generierten Link, der Sie zur Shopify Admin-Seite mit dem Installationsablauf für die Novalnet-App führt.

Schritt 2: Klicken Sie auf App installieren , um den Installationsvorgang abzuschließen.

Richten Sie eine benutzerdefinierte Zahlungsmethode ein

Sobald die Installation abgeschlossen ist und eine benutzerdefinierte Zahlungsmethode angelegt werden soll, befolgen Sie die folgenden Schritte (wie in dem Bildern unten angezeigt):

Schritt 1: Gehen Sie zu Einstellungen.

Schritt 2: Gehen Sie zu Zahlungen.

Schritt 3: Wählen Sie Eigene Zahlungsmethoden erstellen unter Eigene Zahlungsmethoden erstellen im Drop-Down-Menü.

Fügen Sie den unten aufgeführten Text im Feld Benutzerdefinierte Zahlungsmethode ein, um den Namen der Zahlungsart anzuzeigen.

Kredit-/Debitkarte

Für die übrigen Novalnet-Zahlungsarten geben Sie die Namen der Novalnet-Zahlungsarten unten in das Feld für den Namen der benutzerdefinierten Zahlungsart ein.

Kredit-/Debitkarte, SEPA-Lastschrift, Rechnung, Vorkasse, Barzahlen/viacash, SEPA-Lastschrift mit Zahlungsgarantie, Rechnung mit Zahlungsgarantie, Sofortüberweisung, PayPal, iDEAL, Eps, Giropay, Przelewy24, PostFinance Card, PostFinance E-Finance, Multibanco, Bancontact, Onlineüberweisung , WeChat Pay, Alipay, Trustly und Google Pay

Fügen Sie den unten aufgeführten Text in das Feld für zusätzliche Details ein, um eine Beschreibung der Zahlungsart anzuzeigen.

Bitte schließen Sie die Zahlung auf der nächsten Seite ab, um Ihre Bestellung abzuschließen.
Erst nach erfolgreicher Zahlung wird die Ware an Sie geliefert.

Sobald der Text hinzugefügt wurde, klicken Sie auf Aktivieren (wie im Bild unten angezeigt):

Die Novalnet-Zahlungsart wird dann im Frontend-Checkout angezeigt (wie im Bild unten dargestellt):

Befolgen Sie dasselbe Verfahren, um die übrigen Novalnet-Zahlungsarten auf der Checkout-Seite im Frontend anzuzeigen.

Haben Sie eine Empfehlung oder einen Verbesserungsvorschlag für uns? Teilen Sie uns Ihre Überlegungen bitte mit, um unsere Zahlungsplugins weiter zu entwickeln, entweder an technic@novalnet.de oder rufen Sie uns unter +49 89 9230683-19 an.

Hinzufügen eines benutzerdefinierten Skripts

Ablauf der Einbindung im Checkout

Gehen Sie zu Einstellungen.

Gehen Sie zu Checkout.

Fügen Sie das unten erwähnte angepasste Skript im Feld Zusätzliche Skripte unter Seite zum Bestellstatus ein.

HTML_TEXT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"  integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://paygate.novalnet.de/v2/checkout-1.0.0.js?t={{'now' | date: '%s' | plus: 0}}" id="novalnet-checkout-js" integrity="sha384-aDPsa/rYHZHxQVB8g9cvUke1bQgiQSaZM6VLi0L1dudq31rn3JG9T6R/0/OHIn9v" crossorigin="anonymous"></script>
<script type="text/javascript">
var paymentGateway = {{ checkout.transactions[0].gateway | json }};
if ($.inArray(paymentGateway, ['Kredit-/Debitkarte', 'SEPA-Lastschrift', 'Rechnung', 'Vorkasse', 'Barzahlen/viacash', 'SEPA-Lastschrift mit Zahlungsgarantie', 'Rechnung mit Zahlungsgarantie', 'Sofortüberweisung', 'PayPal', 'iDEAL', 'eps', 'Giropay', 'Przelewy24', 'PostFinance Card', 'PostFinance E-Finance', 'Multibanco', 'Bancontact', 'Onlineüberweisung', 'Alipay', 'WeChat Pay', 'Google Pay', 'Trustly']) != '-1') {
Novalnet.setParam("vendor", "<Merchant need to provide the vendor id>");
Novalnet.setParam("product", "<Merchant need to provide the product id>");
Novalnet.setParam("tariff", "<Merchant need to provide the tariff id>");
Novalnet.setParam("test_mode", "0");
Novalnet.setParam("on_hold", "0");
Novalnet.setParam("address_form", "0");
Novalnet.setParam("thide", "1");
Novalnet.setParam("shide", "1");
Novalnet.setParam("skip_cfm", "1");
Novalnet.setParam("skip_suc", "1");
Novalnet.setParam("lhide", "1");
Novalnet.setParam("nn_it", "child_window");
Novalnet.setParam("rftarget", "top");
Novalnet.setParam("chosen_only", "1");
Novalnet.setParam("hook_url", "https://extapi.novalnet.de/shopify/<Merchant need to provide the product id>/v1/ext_sys_activation.php");
{% assign language_code = shop.locale | split: '-' | first | upcase %}

const checkoutParams = [
  { liquidProp: "{{checkout.total_price}}", param: "amount" },
  { liquidProp: "{{checkout.currency}}", param: "currency" },
  { liquidProp: "{{checkout.email}}", param: "email" },
  { liquidProp: "{{checkout.customer.id}}", param: "customer_no" },
  { liquidProp: "{{checkout.order_number}}", param: "order_no" },
  { liquidProp: "{{language_code}}", param: "lang" },
  { liquidProp: "{{checkout.billing_address.first_name}}", param: "firstname" },
  { liquidProp: "{{checkout.billing_address.last_name}}", param: "lastname" },
  { liquidProp: "{{checkout.billing_address.address1}}", param: "street", additionalParam: { param: "search_in_street", value: "1" } },
  { liquidProp: "{{checkout.billing_address.city}}", param: "city" },
  { liquidProp: "{{checkout.billing_address.country_code}}", param: "country_code" },
  { liquidProp: "{{checkout.billing_address.zip}}", param: "zip" },
  { liquidProp: "{{checkout.billing_address.phone}}", param: "tel" },
  { liquidProp: "{{checkout.billing_address.company}}", param: "company" },
  { liquidProp: "{{checkout.order_id}}", param: "inputval1", additionalParam: { param: "input1", value: "shop_order_id" } },
  { liquidProp: "{{shop.url}}", param: "inputval2", additionalParam: { param: "input2", value: "s_url" } }
];

for (const item of checkoutParams) {
  const liquidValue = item.liquidProp;   
  if (liquidValue !== "") {
    Novalnet.setParam(item.param, liquidValue);    
    if (item.additionalParam) {    
      Novalnet.setParam(item.additionalParam.param, item.additionalParam.value);
    }
  }
}

const chkShippingParams = [
  { liquidProp: "{{checkout.email}}", param: "checkout[email]" },
  { liquidProp: "{{checkout.shipping_address.first_name}}", param: "checkout[shipping_address][first_name]" },
  { liquidProp: "{{checkout.shipping_address.last_name}}", param: "checkout[shipping_address][last_name]" },
  { liquidProp: "{{checkout.shipping_address.address1}}", param: "checkout[shipping_address][address1]" },
  { liquidProp: "{{checkout.shipping_addrenss.address2}}", param: "checkout[shipping_address][address2]" },
  { liquidProp: "{{checkout.shipping_address.city}}", param: "checkout[shipping_address][city]" },
  { liquidProp: "{{checkout.shipping_address.zip}}", param: "checkout[shipping_address][zip]" },
  { liquidProp: "{{checkout.shipping_address.country}}", param: "checkout[shipping_address][country]" },
  { liquidProp: "{{checkout.shipping_address.province}}", param: "checkout[shipping_address][province]" },
  { liquidProp: "{{checkout.shipping_address.phone}}", param: "checkout[shipping_address][phone]" },
  { liquidProp: "{{checkout.shipping_address.company}}", param: "checkout[shipping_address][company]" }  
];

var chkParams = new URLSearchParams();
for (const item of chkShippingParams) {
  const liquidValue = item.liquidProp;   
  if (liquidValue !== "") {      
    chkParams.append(item.param, liquidValue);
  }
}

var additionalParams = chkParams.toString();

var discount_code = "";
{% for discount_application in checkout.discount_applications %}
    discount_code = "{{ discount_application.title }}";
{% endfor %}

if (discount_code !== "") {
    additionalParams = additionalParams + '&discount=' + discount_code;
}

var params = [];
{% for line_item in checkout.line_items %}
    var product = "{{ line_item.variant_id }}:" + "{{ line_item.quantity }}";
    params.push(product);
{% endfor %}

var cartRestoreLink = "{{ shop.url | append: '/cart/' }}" + params.join(",") + "?" + additionalParams;
cartRestoreLink = encodeURIComponent(cartRestoreLink);

if (cartRestoreLink !== "") {
  Novalnet.setParam("input3", "cart_restore_link");
  Novalnet.setParam("inputval3", cartRestoreLink);
}

switch (paymentGateway) {
  case 'Kredit-/Debitkarte':
    Novalnet.setParam("key", "6");
    break;  
  case 'SEPA-Lastschrift':
    Novalnet.setParam("key", "37");
    break;  
  case 'Rechnung':
    Novalnet.setParam("key", "27");
    Novalnet.setParam("invoice_type", "INVOICE");
    break;  
  case 'Vorkasse':
    Novalnet.setParam("key", "27");
    Novalnet.setParam("invoice_type", "PREPAYMENT");
    break;  
  case 'Barzahlen/viacash':
    Novalnet.setParam("key", "59");  
    break;  
  case 'SEPA-Lastschrift mit Zahlungsgarantie':
    Novalnet.setParam("key", "40");  
    break;  
  case 'Rechnung mit Zahlungsgarantie':
    Novalnet.setParam("key", "41");  
    break;  
  case 'Sofortüberweisung':
    Novalnet.setParam("key", "33");  
    break;  
  case 'PayPal':
    Novalnet.setParam("key", "34");  
    break;  
  case 'iDEAL':
    Novalnet.setParam("key", "49");  
    break;  
  case 'eps':
    Novalnet.setParam("key", "50");  
    break;  
  case 'Giropay':
    Novalnet.setParam("key", "69");  
    break;  
  case 'Przelewy24':
    Novalnet.setParam("key", "78");  
    break;  
  case 'PostFinance Card':
    Novalnet.setParam("key", "87");  
    break;  
  case 'PostFinance E-Finance':
    Novalnet.setParam("key", "88");  
    break;  
  case 'Multibanco':
    Novalnet.setParam("key", "73");  
    break;  
  case 'Bancontact':
    Novalnet.setParam("key", "44");  
    break;  
  case 'Onlineüberweisung':
    Novalnet.setParam("key", "113");  
    break;  
  case 'Alipay':
    Novalnet.setParam("key", "115");  
    break;  
  case 'WeChat Pay':
    Novalnet.setParam("key", "116");  
    break;  
  case 'Trustly':
    Novalnet.setParam("key", "110");  
    break;  
  case 'Google Pay':
    Novalnet.setParam("key", "121");  
    break;  
}

if (window.location.href.indexOf("thank_you") > -1) {
    jQuery("#main-header").html("Sie werden auf der nächsten Seite mit der Auswahl der Zahlungsseite fortfahren. Bitte schließen Sie die Zahlung auf der nächsten Seite ab, um Ihre Bestellung abzuschließen.");
    Novalnet.render("novanet_payment_form_div");
}

function NovalnetEventHandler(event) {
  if (event.type === 'message' && event.data) {
    var jsonEventData;
    try {
      jsonEventData = JSON.parse(event.data);
    } catch (error) {
      jsonEventData = event.data;
    }

    var nnStatus = jsonEventData.status || '';
    var nnStatusText = jsonEventData.status_desc || jsonEventData.status_text || '';    

    if (nnStatus === '100') {
      if (jsonEventData.payment_type && (jsonEventData.payment_type === 'INVOICE_START' || jsonEventData.payment_type === 'GUARANTEED_INVOICE')) {
        jQuery("#main-header").html("Vielen Dank für Ihre Bestellung. Sie erhalten in Kürze eine E-Mail mit den Bankdaten für die Überweisung, um Ihre Zahlung abzuschließen. Bitte überprüfen Sie Ihre E-Mail und führen Sie die Überweisung aus, um Ihre Zahlung abzuschließen.");
      } else if (jsonEventData.payment_type && jsonEventData.payment_type === 'CASHPAYMENT') {
        jQuery("#main-header").html("Vielen Dank für Ihre Bestellung. Sie erhalten in Kürze eine E-Mail mit der Barzahlen Zahlschein-ID. Mit dem Zahlschein können Sie Ihren Kauf in einer Barzahlen-Partnerfiliale bezahlen. Bitte prüfen Sie Ihr E-Mail-Postfach und nehmen Sie die Bezahlung vor Ort vor.");
      } else if (jsonEventData.payment_type && jsonEventData.payment_type === 'MULTIBANCO') {
        jQuery("#main-header").html("Vielen Dank für Ihre Bestellung. Sie erhalten in Kürze eine E-Mail mit der Zahlungsreferenz. Damit können Sie entweder an einem Multibanco-Geldautomaten oder im Onlinebanking bezahlen.");
      } else {
        jQuery("#main-header").html("Vielen Dank {{ checkout.billing_address.first_name}}!");
      }

      Novalnet.closeChildWindow();
    } else if (nnStatus !== '' && nnStatus !== '100' && nnStatusText !== '') {
      jQuery(".os-header__hanging-icon").remove();
      jQuery("#main-header").html(nnStatusText);
      jQuery('.os-step__special-description').parent().remove();      
      Novalnet.closeChildWindow();      
      var cartRestoreLink = jsonEventData.inputval3 || jsonEventData.cart_restore_link || '';
      cartRestoreLink = decodeURIComponent(cartRestoreLink);
      cartRestoreLink = cartRestoreLink || (location.protocol + '//' + location.host + '/collections/all');
      window.location.href = cartRestoreLink;
    }
  }
}

function isJson(strVal) {
    try {
        JSON.parse(strVal);
        return true;
    } catch (e) {
        return false;
    }
}

function bindEvent(element, eventName, NovalnetEventHandler) {
    if (element.addEventListener) {
        element.addEventListener(eventName, NovalnetEventHandler, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, NovalnetEventHandler);
    }
}

// Listen to message from child window
bindEvent(window, 'message', NovalnetEventHandler);
}
</script>
<div id="novanet_payment_form_div"></div>

Händlernachweise

Um Ihre Händleranmeldeinformationen zu erhalten, gehen Sie zum Novalnet Admin-Portal, navigieren Sie zum Menü Projekte und klicken Sie auf das Symbol rechts neben Ihrem Projekt, um die Projektdetails anzuzeigen.

Klicken Sie auf API-Anmeldeinformationen und kopieren Sie die MID (Händler-ID), Projekt-ID und Tarif-ID wie unten angezeigt.

Fügen Sie die kopierte MID (Händler-ID), Projekt- ID und Tarif-ID in das Feld Zusätzliche Skripte unter Bestellstatus-Seite ein und klicken Sie auf Speichern wie unten angezeigt

Stornierung der Bestellung

Ist eine Zahlung fehlgeschlagen, wird der Käufer zu der Warenkorbseite umgeleitet, wie unten angezeigt. Zusätzlich bleiben die gesamten Informationen zum Checkout wie Lieferadresse, Kunden-E-Mail, Produktdetails, Rabattcoupons, und Steuern im Warenkorb dieser Bestellung, so dass der Kunde wieder zum Warenkorb zurückgeleitet wird.

Benachrichtigungen per E-Mail an Endkunden im Novalnet-Admin-Portal aktivieren

Um die Bestätigung per E-Mail an den Endkunden für Ihre Website zu aktivieren, gehen Sie zu Novalnet Admin-Portal → Projekte → Wählen Sie Ihr Projekt aus → E-Mail Benachrichtigungen → und aktivieren Sie dort Buchungsbestätigungs-E-Mail an den Kunden

Anpassung der Bestellbestätigungs-E-Mail

Der Endkunde erhält die Bestellbestätigungs-E-Mail vor dem Zahlungsvorgang (nur für Zahlungen über Novalnet). Deshalb sollte das Shopify-E-Mail-Template angepasst werden, um den Endkunden über noch ausstehende Zahlungen zu benachrichtigen, indem Sie dem unten erwähnten Verfahren folgen,
Gehen Sie zu Einstellungen → Benachrichtigungen → Bestellbestätigung wie unten angezeigt.

Klicken Sie auf Code bearbeiten und befolgen Sie die unten erwähnten Schritte aus der Readme-Datei im Feld Email body (HTML).

Schritt 1:

HTMLMIXED_TEXT

/**Search the below line*/
Thank you for your purchase!

/**Replace the following code with above searched line*/
{% for transaction in transactions %}
	{% if ((transaction.gateway_display_name == 'Kredit-/debitkarte') or (transaction.gateway_display_name == 'SEPA-
	Lastschrift') or (transaction.gateway_display_name == 'Rechnung') or (transaction.gateway_display_name == 'Vorkasse') or
	(transaction.gateway_display_name == 'Barzahlen/viacash') or (transaction.gateway_display_name == 'SEPA-Lastschrift mit
	zahlungsgarantie') or (transaction.gateway_display_name == 'Rechnung mit zahlungsgarantie') or
	(transaction.gateway_display_name == 'Sofortüberweisung') or (transaction.gateway_display_name == 'PayPal') or
	(transaction.gateway_display_name == 'iDEAL') or (transaction.gateway_display_name == 'Eps') or
	(transaction.gateway_display_name == 'Giropay') or (transaction.gateway_display_name == 'Przelewy24') or
	(transaction.gateway_display_name == 'PostFinance card') or (transaction.gateway_display_name == 'PostFinance e-
	finance') or (transaction.gateway_display_name == 'Multibanco') or (transaction.gateway_display_name == 'Bancontact') 
	or (transaction.gateway_display_name == 'Onlineüberweisung') or (transaction.gateway_display_name == 'Trustly') 
	or (transaction.gateway_display_name == 'Alipay') or (transaction.gateway_display_name == 'WeChat pay') 
	or (transaction.gateway_display_name == 'Google pay')) %}
		Herzlichen Dank für Ihre Bestellung! Bitte beachten Sie, dass Ihre Zahlung noch aussteht!
	{% else %}
		Thank you for your purchase!
	{% endif %}
{% endfor %}

Schritt 2:

HTMLMIXED_TEXT

/**Search the below line*/
we're getting your order ready to be shipped. We will notify you when it has been sent.

/**Replace the following code above the searched line*/
{% for transaction in transactions %}
	{% if ((transaction.gateway_display_name == 'Kredit-/debitkarte') or (transaction.gateway_display_name == 'SEPA-
	Lastschrift') or (transaction.gateway_display_name == 'Rechnung') or (transaction.gateway_display_name == 'Vorkasse') or
	(transaction.gateway_display_name == 'Barzahlen/viacash') or (transaction.gateway_display_name == 'SEPA-Lastschrift mit
	zahlungsgarantie') or (transaction.gateway_display_name == 'Rechnung mit zahlungsgarantie') or
	(transaction.gateway_display_name == 'Sofortüberweisung') or (transaction.gateway_display_name == 'PayPal') or
	(transaction.gateway_display_name == 'iDEAL') or (transaction.gateway_display_name == 'Eps') or
	(transaction.gateway_display_name == 'Giropay') or (transaction.gateway_display_name == 'Przelewy24') or
	(transaction.gateway_display_name == 'PostFinance card') or (transaction.gateway_display_name == 'PostFinance e-
	finance') or (transaction.gateway_display_name == 'Multibanco') or (transaction.gateway_display_name == 'Bancontact') 
	or (transaction.gateway_display_name == 'Onlineüberweisung') or (transaction.gateway_display_name == 'Trustly') 
	or (transaction.gateway_display_name == 'Alipay') or (transaction.gateway_display_name == 'WeChat pay') 
	or (transaction.gateway_display_name == 'Google pay')) %}
		Wir haben Ihre Bestellung erhalten. Wir werden Sie über den Versand informieren, sobald die Zahlung für Ihre
		Bestellung erfolgreich abgeschlossen wurde. Wir möchten uns auf diesem Weg noch einmal herzlich für Ihr Vertrauen
		bedanken!
	{% else %}
		we're getting your order ready to be shipped. We will notify you when it has been sent.
	{% endif %}
{% endfor %}

Klicken Sie zuletzt auf Speichern, um die Änderungen zu hinterlegen.

Sehen Sie sich das Bild unten an, um zu sehen, wie die angepasste E-Mail-Benachrichtigung dem Käufer angezeigt wird.

Die Anpassungen oben werden für das Shop-Standard-E-Mail-Template verarbeitet. Sie können auf der Grundlage Ihrer Bedürfnisse Ihre Bestellbestätigungs-E-Mail-Vorlage entsprechend anpassen.

Die Händler können von Novalnet noch ein viel stärker angepasstes Layout erhalten, wenn sie das "Shopify PLUS"-Paket von Shopify für Ihren Shop haben.