Support » Plugins » Paypal Checkout Code in HTML Block Gutenberg

  • nealsi

    (@nealsi)


    Hi, ich versuche den offiziellen Paypal Checkout von der Paypal Website auf meiner Seite zu integrieren.

    Nutze ich den Standard Check-Out mit festem Euro-Betrag, funktioniert alles ganz normal im Gutenberg-Editor mit einem HTML Block. Ich kann die Buttons ganz normal sehen, wenn ich die Seite veröffentlicht habe.

    Nutze ich den Check-Out mit variablen EUR Betrag (d.h. die Kunden können es selbst eingeben), funktioniert es nicht mehr.
    Daraufhin werden mir zwar innerhalb des Gutenberg Editors in der Vorschau des HTML Blocks zwar alles korrekt angezeigt. Aber wenn ich die Seite als Vorschau oder Veröffentlicht auf meiner Website ansehe, funktioniert die Ansicht nicht mehr. Es werden mir nicht alle Felder und auch keine Buttons mehr angezeigt.

    Ich betreibe keinen Woo Commerce Shop. Ich möchte den Link zur Zahlungsseite mit meiner Rechnung via E-Mail versenden und so die Bezahlung der Rechnung ermöglichen.

    Weiß jemand Rat?

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • Moderator Bego Mario Garde

    (@pixolin)

    Ich werde bei Aufruf der angegebenen Webseite auf die Startseite weitergeleitet. Ein Paypal-Zahlungsdformular finde ich nicht.

    Deine Frage ist ohne den Websitebericht und ohne Angaben zum Code, den du verwendest, auch schwer nachvollziehbar. Ich müsste jetzt erst nach „dem offiziellen Paypal Checkout“ suchen und raten, ob das auch der Code ist, den du eingefügt hast.

    Thread-Starter nealsi

    (@nealsi)

    https://oschau-online.de/zahlung/

    Code für Festbetrag:

    <div id="smart-button-container">
          <div style="text-align: center;">
            <div id="paypal-button-container"></div>
          </div>
        </div>
      <script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>
      <script>
        function initPayPalButton() {
          paypal.Buttons({
            style: {
              shape: 'rect',
              color: 'gold',
              layout: 'vertical',
              label: 'paypal',
              
            },
    
            createOrder: function(data, actions) {
              return actions.order.create({
                purchase_units: [{"amount":{"currency_code":"USD","value":1}}]
              });
            },
    
            onApprove: function(data, actions) {
              return actions.order.capture().then(function(orderData) {
                
                // Full available details
                console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
    
                // Show a success message within this page, e.g.
                const element = document.getElementById('paypal-button-container');
                element.innerHTML = '';
                element.innerHTML = '<h3>Thank you for your payment!</h3>';
    
                // Or go to another URL:  actions.redirect('thank_you.html');
                
              });
            },
    
            onError: function(err) {
              console.log(err);
            }
          }).render('#paypal-button-container');
        }
        initPayPalButton();
      </script>

    Code für variablen Betrag:

    <div id="smart-button-container">
        <div style="text-align: center"><label for="description">Buchungsnummer </label><input type="text" name="descriptionInput" id="description" maxlength="127" value=""></div>
          <p id="descriptionError" style="visibility: hidden; color:red; text-align: center;">Please enter a description</p>
        <div style="text-align: center"><label for="amount">Rechnungsbetrag </label><input name="amountInput" type="number" id="amount" value="" ><span> EUR</span></div>
          <p id="priceLabelError" style="visibility: hidden; color:red; text-align: center;">Please enter a price</p>
        <div id="invoiceidDiv" style="text-align: center; display: none;"><label for="invoiceid"> </label><input name="invoiceid" maxlength="127" type="text" id="invoiceid" value="" ></div>
          <p id="invoiceidError" style="visibility: hidden; color:red; text-align: center;">Please enter an Invoice ID</p>
        <div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
      </div>
      <script src="https://www.paypal.com/sdk/js?client-id=AQY1ryDHZREFyHPrVMpeHiOS0Ip7Axp-JEZcar7hC1uA9PSi8BmuwRfQT_oWYdPxYzFulNgNk76eGjyz&enable-funding=venmo&currency=EUR" data-sdk-integration-source="button-factory"></script>
      <script>
      function initPayPalButton() {
        var description = document.querySelector('#smart-button-container #description');
        var amount = document.querySelector('#smart-button-container #amount');
        var descriptionError = document.querySelector('#smart-button-container #descriptionError');
        var priceError = document.querySelector('#smart-button-container #priceLabelError');
        var invoiceid = document.querySelector('#smart-button-container #invoiceid');
        var invoiceidError = document.querySelector('#smart-button-container #invoiceidError');
        var invoiceidDiv = document.querySelector('#smart-button-container #invoiceidDiv');
    
        var elArr = [description, amount];
    
        if (invoiceidDiv.firstChild.innerHTML.length > 1) {
          invoiceidDiv.style.display = "block";
        }
    
        var purchase_units = [];
        purchase_units[0] = {};
        purchase_units[0].amount = {};
    
        function validate(event) {
          return event.value.length > 0;
        }
    
        paypal.Buttons({
          style: {
            color: 'black',
            shape: 'pill',
            label: 'paypal',
            layout: 'vertical',
            
          },
    
          onInit: function (data, actions) {
            actions.disable();
    
            if(invoiceidDiv.style.display === "block") {
              elArr.push(invoiceid);
            }
    
            elArr.forEach(function (item) {
              item.addEventListener('keyup', function (event) {
                var result = elArr.every(validate);
                if (result) {
                  actions.enable();
                } else {
                  actions.disable();
                }
              });
            });
          },
    
          onClick: function () {
            if (description.value.length < 1) {
              descriptionError.style.visibility = "visible";
            } else {
              descriptionError.style.visibility = "hidden";
            }
    
            if (amount.value.length < 1) {
              priceError.style.visibility = "visible";
            } else {
              priceError.style.visibility = "hidden";
            }
    
            if (invoiceid.value.length < 1 && invoiceidDiv.style.display === "block") {
              invoiceidError.style.visibility = "visible";
            } else {
              invoiceidError.style.visibility = "hidden";
            }
    
            purchase_units[0].description = description.value;
            purchase_units[0].amount.value = amount.value;
    
            if(invoiceid.value !== '') {
              purchase_units[0].invoice_id = invoiceid.value;
            }
          },
    
          createOrder: function (data, actions) {
            return actions.order.create({
              purchase_units: purchase_units,
            });
          },
    
          onApprove: function (data, actions) {
            return actions.order.capture().then(function (orderData) {
    
              // Full available details
              console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
    
              // Show a success message within this page, e.g.
              const element = document.getElementById('paypal-button-container');
              element.innerHTML = '';
              element.innerHTML = '<h3>Thank you for your payment!</h3>';
    
              // Or go to another URL:  actions.redirect('thank_you.html');
              
            });
          },
    
          onError: function (err) {
            console.log(err);
          }
        }).render('#paypal-button-container');
      }
      initPayPalButton();
      </script>
    Moderator Bego Mario Garde

    (@pixolin)

    Aber wenn ich die Seite als Vorschau oder Veröffentlicht auf meiner Website ansehe, funktioniert die Ansicht nicht mehr. Es werden mir nicht alle Felder und auch keine Buttons mehr angezeigt.

    Was meinst du damit?

    Wir wissen nicht, was du im Editor angezeigt bekommst und wie die Seite aussehen sollte.

    Warum nutzt du kein fertiges Plugin? Den JavaScript-Code über einen HTML-Block einzubinden ist nicht ideal.

    Thread-Starter nealsi

    (@nealsi)

    Also ist es im Gutenberg-Editor nicht weiter möglich Code einzufügen? Verstehe ich das richtig? Es gibt keinen Funktion die es zulässt, dass ich mit den von Paypal zur Verfügung gestellten Check-Out Codes arbeiten kann….

    Thread-Starter nealsi

    (@nealsi)

    Was meinst du damit?

    Ich meine damit, dass wenn ich die Seite im Editor ansehe, werden mir die Check-out Buttons von Paypal ganz regulär angezeigt. Wenn ich die Seite aber veröffentliche (wie jetzt geschehen) werden mir im Block mit der variablen Zahlungsmöglichkeit keine Buttons angezeigt.

    Im Block mit dem festen Zahlbetrag werden mir die Buttons normal angezeigt.

    Wenn du auf die Seite gehst, siehst du es. im oberen Block funktioniert es nicht, im unteren geht es….

    Moderator Bego Mario Garde

    (@pixolin)

    Verstehe ich das richtig? Es gibt keinen Funktion die es zulässt, dass ich mit den von Paypal zur Verfügung gestellten Check-Out Codes arbeiten kann….

    Die richtige Vorgehensweise, wäre ein Plugin zu schreiben und das JavaScript mit den Funktionen einzubinden, die WordPress dafür zur Verfügung stellt. Oder ein fertiges Plugin verwenden.

    Ich meine damit, dass wenn ich die Seite im Editor ansehe, werden mir die Check-out Buttons von Paypal ganz regulär angezeigt.

    Ja, dir. Mir nicht. Ich kann dir schlecht über die Schulter schauen? 🙂

    Wenn du auf die Seite gehst, siehst du es. im oberen Block funktioniert es nicht, im unteren geht es….

    Ich sehe eigentlich nur zwei Formularfelder „Buchungsnummer“ und „Rechnungsbetrag“. Wenn ich da einen Betrag eingebe, muss ich mich anschließend bei Paypal einloggen. Zahlung habe ich dann abgebrochen, da reicht mein Taschengeld nicht … 

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • Das Thema „Paypal Checkout Code in HTML Block Gutenberg“ ist für neue Antworten geschlossen.