PayPal Payment Wall Integration

chickenburner · 28. Februar 2020

Hallo,

ich möchte gerne die Payment Wall von PayPal in meine Webseite integrieren. Ich scheitere allerdings am Punkt Create a Payment Resource:

https://developer.paypal.com/docs/paypal-plus/germany/integrate/create-payment-resource/

Wo muss ich den Code einbinden?

Kann mir da jemand weiterhelfen oder kennt jemand vielleicht sogar ein gutes Tutorial zur Integration von der Payment Wall? Ich finde leider immer nur Tutorials zur Standard-Integration mit dem PayPal-Button. Oder ein Beispielcode, um zu sehen, wie das Endergebnis aussehen muss.

Vielen Dank im Voraus.

Roesi · 28. Februar 2020

Wie in Deine Seite einbinden?
Normal geht das über eine API Schnittstelle.
Hast Du einen Shop?

chickenburner · 28. Februar 2020

Hi Roesi,

Danke für deine Antwort.

Ich zeig am Besten mal, was ich habe und was ich nicht verstehe. Das ist mein aktueller Bestellvorgang:

Code:

<?php
session_start();
?>

<!DOCTYPE HTML>

<html lang="de">

<head>
      
    <title></title>
    
    <meta name="description" content="">
        
    
    <script src="https://www.paypalobjects.com/webstatic/ppplus/ppplus.min.js" type="text/javascript">
    </script>
    
    
    <?php include 'header.php' ?>
    
    <script type="text/javascript">
        
        function validation() {
            
            
            // ### Einhgabefelder prüfen ###
            
            var name = document.getElementById("name").value;
            var street = document.getElementById("street").value;
            var city = document.getElementById("city").value;
            var mail = document.getElementById("mail").value;
            var agb = document.getElementById("agb");
            
            var naco = name.split(' ').length;
            var stco = street.split(' ').length;
            var cico = city.split(' ').length;
            
            var error_message = document.getElementById("error_message");
            var error_message2 = document.getElementById("error_message2");
            var error_message3 = document.getElementById("error_message3");
            var error_message4 = document.getElementById("error_message4");
            var error_message5 = document.getElementById("error_message5");
            
           error_message.style.padding = "5px";
            error_message2.style.padding = "5px";
            error_message3.style.padding = "5px";
            error_message4.style.padding = "5px";
            error_message5.style.padding = "5px";
            
            
            
            if(name.length <5) {
                text = "Bitte gib einen gültigen Vor- und Nachnamen ein.";
                error_message.innerHTML = text;
                return false;
                
            } else {
                
                text = "";
                error_message.innerHTML = text;
                
            }
                        
          
            
               if(naco == 1 ) {
                text = "Bitte gib Vor- und Nachnamen ein.";
                error_message.innerHTML = text;
                return false;
                
            } else {
                
                text = "";
                error_message.innerHTML = text;
                
            }
            
          
            
            if(street.length <5) {
                text = "Bitte gib eine gültige Straße an.";
                error_message2.innerHTML = text;
                return false;
                
            } else {
                
                text = "";
                error_message2.innerHTML = text;
                
            }
            
             if(stco == 1 ) {
                text = "Bitte gib eine gültige Straße an.";
                error_message2.innerHTML = text;
                return false;
                
            } else {
                
                text = "";
                error_message2.innerHTML = text;
                
            }
            
            if(city.length <5) {
                text = "Bitte gib eine gültige Stadt an.";
                error_message3.innerHTML = text;
                return false;
              
            } else {
                
                text = "";
                error_message3.innerHTML = text;
                
            }
            
            if(cico == 1 ) {
                text = "Bitte gib eine gültige Stadt an.";
                error_message3.innerHTML = text;
                return false;
                
            } else {
                
                text = "";
                error_message3.innerHTML = text;
                
            }
            
            
            if(mail.indexOf("@") == -1 || mail.length <5) {
                text = "Bitte gib eine gültige E-Mail-Adresse an.";
                error_message4.innerHTML = text;
                return false;
              
            } else {
                
                text = "";
                error_message4.innerHTML = text;
                
            }
            
            
              if(agb.checked === false) {
                text = "Bitte bestätige unsere Bedingungen.";
                error_message5.innerHTML = text;
                return false;
                
            } else {
                
                text = "";
                error_message5.innerHTML = text;
                
            }
            
      

                /*  -----> BEZAHL-PROZESS <------  */
            
            
            /* ##### Bestellung anlegen ##### */

            
           var xml = new XMLHttpRequest();
            var params = 'name='+name+'&street='+street+'&city='+city+'&mail='+mail;
          
            xml.open('GET', 'sendRegisterData.php?name='+name+'&street='+street+'&city='+city+'&mail='+mail, false);
            xml.setRequestHeader('Content-type', 'application/x-www-form-urlencode');
            
            xml.onreadystatechange = function() {
                if(xml.readyState == 4 && xml.status == 200) {
                     //alert(xml.responseText);
                }
            }
            xml.send(params);
            

            
            return true;
        
        }
        
        
        </script>
    
    
    
    
</head>

<body>
    
<script src="https://www.paypal.com/sdk/js?client-id=MY_CLIENT_ID"></script>

<!-- ############### HEADER ############### -->

    
    <header>

      <?php include 'Topbar.php' ?>

    </header>

<!-- ############### MAIN ############### -->
    
    <main>
        
        <div class="wrapper-us">
            
            <div class="left-us">
                <div class="headline_us">
                    Kasse
                </div>
                    
                <div class="subline-us">
                    1. Rechnungsadresse:
                </div>
                    


                <form id="checkout" method="POST"  class="form-all" action="/thanks.php">
            
                   <input name="name" class="form-name" id="name" type="text" placeholder="Name" value="" /> <br />
                    
                    <div id="error_message"></div> <br />
            
                    <input name="street" class="form-street" id="street" type="text" placeholder="Straße" value=""  />
        
                       <input name="plz" class="form-plz" type="text" id="city"  placeholder="PLZ" value=""  /> <br />
            
                    <div id="error_message2"></div>
          
                    <div id="error_message3"></div><br />
            
                    <input name="mail" class="form-mail" id="mail"  type="text" placeholder="E-Mail" value=""  /> <br />
                    
                    <div id="error_message4"></div> <br />
            
                    <label class="container">Ja, ich bin mit den Allgemeinen Geschäftsbedingungen, Rückgaberecht, etc. einverstanden.
                        <input type="checkbox" id="agb" >
                        <span class="checkmark"></span>
                    </label>
            
                    <div id="error_message5"></div> <br />
            
                    <input type="submit"  onClick="return validation();" id="submit-form" class="hidden" style="display:none;" />
 
                </form>
  
            </div>
        
            
            <div class="right-us-sub">
                
                <div class="right-us-inner-us">


                    <div class="pay-sec">2. Zahlungsart wählen:</div>
                    
                    
                    
                    <script type="application/javascript">
                        var ppp = PAYPAL.apps.PPP({
                            "approvalUrl": "'.$approval_url.'",
                            "placeholder": "ppplus",
                            "mode": "sandbox",
                            "country": "DE"
                        });
                    </script>
          
                    
                    <div id="ppplus">
                    </div>
                
                </div>
                
             <label for="submit-form" tabindex="0">
                 <div class="buy-button3 buy-butt-2">Jetzt kaufen</div>
            </label>
                
            </div>
            
        </div>
        
    </main>

      
<!-- ############### FOOTER ############### -->
    
    <footer>
        
        <?php include 'footer.php'; ?>
        
    </footer>


</body>

</html>

Den Code für die Payment Wall habe ich schon eingefügt:

https://developer.paypal.com/docs/paypal-plus/germany/integrate/integrate-payment-wall/

Dort wo jetzt Bezahl-Prozess steht, muss ich ja mittels der API den Code (JSON?) aus der Doku (mit einem HTTP-Request?) an PayPal senden. Ich hab schon die ganze Doku dazu durchgelesen, aber ich verstehe einfach nicht, wie ich das genau machen soll.

Ergänzung (28. Februar 2020)

Vielleicht so, aber wie klappt dann die Authentifizierung?:

Code:

return paypal.request({
method: 'post',
url: 'https://api.sandbox.paypal.com/v1/payments/payment',
json: {
                    {
          "intent": "sale",
          "payer": {
            "payment_method": "paypal"
          },
          "transactions": [{
            "amount": {
              "total": "21.50",
              "currency": "EUR",
              "details": {
                "subtotal": "15.00",
                "tax": "2.00",
                "shipping": "2.50",
                "handling_fee": "1.00",
                "shipping_discount": "-1.00",
                "insurance": "2.00"
              }
            },

            "description": "This is the payment transaction description.",
            "custom": "This is a hidden value",
            "invoice_number": "unique_invoice_number",

            "soft_descriptor": "your order description",
            "item_list": {
              "items": [{
                  "name": "Item 1",
                  "description": "add description here",
                  "quantity": "2",
                  "price": "10.00",
                  "sku": "1",
                  "currency": "EUR"
                },
                {
                  "name": "Voucher",
                  "description": "discount on your order",
                  "quantity": "1",
                  "price": "-5.00",
                  "sku": "vouch1",
                  "currency": "EUR"
                }
              ]
            }
          }],
          "note_to_payer": "Contact us for any questions on your order.",
          "redirect_urls": {
            "return_url": "http://example.com/success",
            "cancel_url": "http://example.com/cancel"
          }
        }
                }
            }).then(function(response) {

            })

nerdalicious · 29. Februar 2020

Authorization HTTP-Header fehlt:

Code:

return paypal.request({
method: 'post',
url: 'https://api.sandbox.paypal.com/v1/payments/payment',
headers: {
   authorization: 'Bearer xxxxxxDEIN AUTH TOKENxxxxx'
},
json: {

Ergänzung (29. Februar 2020)

Und Pro-Tip. Verwende CURL oder Postman, um zunächst sicher zu stellen, dass du den richtigen Auth Token verwendest.

Suche

PayPal Payment Wall Integration

chickenburner

Cadet 1st Year

Roesi

Lt. Commander Pro

chickenburner

Cadet 1st Year

nerdalicious

Cadet 2nd Year

Ähnliche Themen