...
✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

Akzeptieren Sie Kreditkartenzahlungen mit PayPal Payments Pro in PHP

31

Sie möchten ein Zahlungsgateway integrieren, das Kreditkartenzahlungen akzeptiert? Kreditkartenzahlung ist eine der besten Möglichkeiten, um Online-Zahlungen zu akzeptieren. Kunden bevorzugen es, online mit ihrer Kreditkarte zu bezahlen. Es kann passieren, dass Sie Kunden verlieren, nur weil Ihre Website keine Kreditkartenzahlungen akzeptiert. Als Inhaber des Online-Shops sollten Sie auf Ihrer Website eine Kreditkartenoption zum Akzeptieren von Zahlungen hinzufügen.

Es gibt viele Zahlungsgateways, die eine Kreditkarte unterstützen. Authorize.Net und Stripe ermöglichen beispielsweise die Annahme von Kartenzahlungen online.

Leser wählen eine der oben genannten Optionen, aber wenn sie sich für PayPal entscheiden möchten, lesen Sie weiter. In diesem Artikel zeige ich Ihnen, wie Sie Kreditkartenzahlungen mit PayPal Payments Pro akzeptieren.

PayPal Payments Pro akzeptiert Zahlungen mit einer vollständig anpassbaren Lösung. Das bedeutet, dass Sie Ihr eigenes Zahlungsformular erstellen und Ihren Kunden belasten können. Es leitet Sie nicht auf die PayPal-Website weiter, um die Transaktion abzuschließen.

Wir werden auch ein eigenes Formular erstellen, in das ein Kunde seine Kartendaten eingibt und bezahlen kann, ohne die Website zu verlassen. Der Benutzer kann seine eigene Checkout-Seite gestalten und ermöglicht dem Benutzer die Eingabe der Kartendetails. Lassen Sie uns also ohne weitere Verzögerung eintauchen.

Einstieg

Bevor Sie Echtzeitzahlungen akzeptieren, wird immer empfohlen, diese zuerst im Sandbox-Modus zu testen. Wenn in der Sandbox alles wie erwartet funktioniert, sollten wir sie live schalten, um Probleme mit Kundenzahlungen zu vermeiden. Zum Testen von Zahlungen benötigen Sie ein PayPal-Sandbox-Konto. Erstellen Sie Ihr Konto bei PayPal Developer. Nachdem Sie ein Konto erstellt haben, gehen Sie im linken Menü zu SANDBOX->Konten und erstellen Sie ein Geschäftskonto.

Zum Zeitpunkt der Erstellung dieses Artikels ist PayPal Payments Pro in den USA, Großbritannien und Kanada verfügbar. Das bedeutet, dass Sie beim Erstellen eines Kontos eines dieser Länder auswählen müssen.

Sobald Sie ein Geschäftskonto haben, müssen Sie Ihren Kontotyp auf "Business-Pro" aktualisieren. Sie müssen Ihren Kontotyp "Business-Pro" haben, um Kreditkartenzahlungen zu akzeptieren. Um ein Upgrade durchzuführen, klicken Sie auf den Link „Upgrade to Pro” und PayPal wandelt Ihren Kontotyp in „Business-Pro” um.

Akzeptieren Sie Kreditkartenzahlungen mit PayPal Payments Pro in PHP

Klicken Sie als Nächstes auf die Registerkarte „API-Anmeldeinformationen” und rufen Sie Ihre Anmeldeinformationen ab. Wir benötigen diese Anmeldeinformationen im nächsten Teil dieses Tutorials.

Akzeptieren Sie Kreditkartenzahlungen mit PayPal Payments Pro in PHP

Anpassbares Zahlungsformular

Wie gesagt, mit PayPal Payments Pro können Sie Ihr eigenes Zahlungsformular gestalten. Lassen Sie uns ein schönes Checkout-Formular erstellen, in das der Kunde seine Zahlungsdaten eingibt. Ich werde für dieses Tutorial ein schön gestaltetes Formular für Codepen verwenden.

Die endgültige Ordnerstruktur sollte wie folgt aussehen:

Akzeptieren Sie Kreditkartenzahlungen mit PayPal Payments Pro in PHP

Denken Sie nicht an vendor, charge.php, composer.json, composer.lockfür jetzt. Wir werden es im späteren Teil erstellen.

Erstellen Sie eine css/card.cssDatei und fügen Sie den unten stehenden Code wie in codepen angegeben ein.

@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,700,500);
 
body {
  padding: 60px 0;
  background-color: rgba(178,209,229,0.7);
  margin: 0 auto;
  width: 600px;
}
.body-text {
  padding: 0 20px 30px 20px;
  font-family: "Roboto";
  font-size: 1em;
  color: #333;
  text-align: center;
  line-height: 1.2em;
}
.form-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.card-wrapper {
  background-color: #6FB7E9;
  width: 100%;
  display: flex;
 
}
.personal-information {
  background-color: #3C8DC5;
  color: #fff;
  padding: 1px 0;
  text-align: center;
}
h1 {
  font-size: 1.3em;
  font-family: "Roboto"
}
input {
  margin: 1px 0;
  padding-left: 3%;
  font-size: 14px;
}
input[type="text"]{
  display: block;
  height: 50px;
  width: 97%;
  border: none;
}
input[type="email"]{
  display: block;
  height: 50px;
  width: 97%;
  border: none;
}
input[type="submit"]{
  display: block;
  height: 60px;
  width: 100%;
  border: none;
  background-color: #3C8DC5;
  color: #fff;
  margin-top: 2px;
  curson: pointer;
  font-size: 0.9em;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
}
input[type="submit"]:hover{
  background-color: #6FB7E9;
  transition: 0.3s ease;
}
#column-left {
  width: 46.5%;
  float: left;
  margin-bottom: 2px;
}
#column-right {
  width: 46.5%;
  float: right;
}
 
@media only screen and (max-width: 480px){
  body {
    width: 100%;
    margin: 0 auto;
  }
  .form-container {
    margin: 0 2%;
  }
  input {
    font-size: 1em;
  }
  #input-button {
    width: 100%;
  }
  #input-field {
    width: 96.5%;
  }
  h1 {
    font-size: 1.2em;
  }
  input {
    margin: 2px 0;
  }
  input[type="submit"]{
    height: 50px;
  }
  #column-left {
    width: 96.5%;
    display: block;
    float: none;
  }
  #column-right {
    width: 96.5%;
    display: block;
    float: none;
  }
}

Ebenso hat unsere js/card.jsDatei den folgenden Code.

/* Card.js plugin by Jesse Pollak. https://github.com/jessepollak/card */
 
$('form').card({
    container: '.card-wrapper',
    width: 280,
 
    formSelectors: {
        nameInput: 'input[name="first-name"], input[name="last-name"]'
    }
});

Holen Sie sich eine Kopie von jquery.card.jsaus diesem GitHub-Repository. Speichern Sie diese Datei in Ihrem ‘js’-Verzeichnis.

Erstellen Sie nun eine index.htmlDatei. In dieser Datei werden wir HTML-Markup hinzufügen, das unser Checkout-Formular anzeigt.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Online Payments</title>
    <link rel="stylesheet" href="css/card.css">
</head>
<body>
    <form method="POST" action="charge.php">
        <div class="form-container">
            <div class="personal-information">
                <h1>Payment Information</h1>
            </div> <!-- end of personal-information -->
              
            <input id="column-left" type="text" name="first-name" placeholder="First Name" required="required" />
            <input id="column-right" type="text" name="last-name" placeholder="Surname" required="required" />
            <input id="input-field" type="text" name="number" placeholder="Card Number" required="required" />
            <input id="column-left" type="text" name="expiry" placeholder="MM / YY" required="required" />
            <input id="column-right" type="text" name="cvc" placeholder="CCV" required="required" />
  
            <div class="card-wrapper"></div>
  
            <input id="input-field" type="text" name="streetaddress" required="required" autocomplete="on" maxlength="45" placeholder="Streed Address"/>
            <input id="column-left" type="text" name="city" required="required" autocomplete="on" maxlength="20" placeholder="City"/>
            <input id="column-right" type="text" name="zipcode" required="required" autocomplete="on" pattern="[0-9]*" maxlength="5" placeholder="ZIP code"/>
            <input id="input-field" type="email" name="email" required="required" autocomplete="on" maxlength="40" placeholder="Email"/>
            <input id="input-field" type="text" name="amount" required="required" autocomplete="on" maxlength="40" placeholder="Amount"/>
            <input id="input-button" name="submit" type="submit" value="Submit"/>
  
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/jquery.card.js"></script>
    <script src="js/card.js"></script>
</body>
</html>

Gehen Sie zum Browser und führen Sie die index.htmlDatei aus. Sie sollten nun ein gut aussehendes Checkout-Formular sehen.

Akzeptieren Sie Kreditkartenzahlungen mit PayPal Payments Pro

Sie sind jetzt mit Ihren PayPal-API-Anmeldeinformationen und dem HTML-Formular fertig. Es ist Zeit, die Dinge dynamisch zu machen. Die Integration eines Zahlungsgateways ist insgesamt keine leichte Aufgabe. Sie müssen es recherchieren und die gesamte Dokumentation des Anbieters lesen. Manchmal wird es so verwirrend und trotz vieler Stunden haben Sie Ihr Ziel nicht erreicht. Ich war schon oft damit konfrontiert. Und wenn es um PayPal geht, wird die Situation aufgrund der umfangreichen PayPal-Dokumentation komplexer.

Dies ist nicht mehr der Fall. Omnipay erleichtert unseren Entwicklern das Leben in Bezug auf die Integration von Zahlungsgateways. Wenn Sie diese Bibliothek verwenden, müssen Sie die Dokumentation zum Zahlungsgateway nicht lesen. Rufen Sie einfach Ihre API-Anmeldeinformationen ab, befolgen Sie die Omnipay-Anweisungen und Sie sind fertig. Weitere Informationen finden Sie auf der GitHub-Seite.

Führen Sie den folgenden Befehl aus, um Omnipay und die unterstützte PayPal-Bibliothek zu installieren.

composer require league/omnipay:^3 omnipay/paypal

Nach der Installation der obigen Bibliotheken wird der folgende Code in Ihre charge.phpDatei eingefügt.

<?php
require_once "vendor/autoload.php";
  
use OmnipayOmnipay;
  
$gateway = Omnipay::create('PayPal_Pro');
$gateway->setUsername(PAYPAL_API_USERNAME);
$gateway->setPassword(PAYPAL_API_PASSWORD);
$gateway->setSignature(PAYPAL_API_SIGNATURE);
$gateway->setTestMode(true); // here 'true' is for sandbox. Pass 'false' when go live
  
if (isset($_POST['submit'])) {
  
    $arr_expiry = explode("/", $_POST['expiry']);
  
    $formData = array(
        'firstName' => $_POST['first-name'],
        'lastName' => $_POST['last-name'],
        'number' => $_POST['number'],
        'expiryMonth' => trim($arr_expiry[0]),
        'expiryYear' => trim($arr_expiry[1]),
        'cvv' => $_POST['cvc']
    );
  
    try {
        // Send purchase request
        $response = $gateway->purchase([
                'amount' => $_POST['amount'],
                'currency' => 'USD',
                'card' => $formData
        ])->send();
  
        // Process response
        if ($response->isSuccessful()) {
  
            // Payment was successful
            echo "Payment is successful. Your Transaction ID is: ". $response->getTransactionReference();
  
        } else {
            // Payment failed
            echo "Payment failed. ". $response->getMessage();
        }
    } catch(Exception $e) {
        echo $e->getMessage();
    }
}

Stellen Sie sicher, dass PAYPAL_API_USERNAME, PAYPAL_API_PASSWORD, PAYPAL_API_SIGNATURE des Platzhalters durch die tatsächlichen Werte ersetzt werden. Gehen Sie nun zu Ihrem Browser und versuchen Sie eine Zahlung mit Dummy-Kreditkartendaten durchzuführen. Sie sollten eine Erfolgsmeldung zusammen mit Ihrer Transaktions-ID erhalten. Der Benutzer kann erhalten Test Kreditkarten zur Verfügung gestellt von PayPal.

Akzeptieren Sie Live-Zahlungen mit dem PayPal Pro Payment Gateway

Nachdem Sie die Sandbox-Tests abgeschlossen haben, übergeben Sie die Live-Anmeldeinformationen für die in einem Code verwendeten Platzhalter. Sie müssen auch den Wert ‘false’ an die setTestMode()Methode übergeben.

Es geht darum, Kreditkartenzahlungen mit PayPal Payments Pro in PHP zu akzeptieren. Ich hoffe, es wird Ihnen helfen, eine Zahlungslösung für Ihre Website zu integrieren. Probieren Sie dieses Tutorial aus und teilen Sie mir Ihre Gedanken und Vorschläge im Kommentarbereich unten mit.

Aufnahmequelle: artisansweb.net

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen