Akzeptieren Sie Kreditkartenzahlungen mit PayPal Payments Pro in PHP
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.
- Akzeptieren Sie Kreditkartenzahlungen mit Authorize.Net Payment Gateway in PHP
- Ein Leitfaden für die Stripe-Integration in Websites mit PHP
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.
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.
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:
Denken Sie nicht an vendor
, charge.php
, composer.json
, composer.lock
für jetzt. Wir werden es im späteren Teil erstellen.
Erstellen Sie eine css/card.css
Datei 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.js
Datei 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.js
aus diesem GitHub-Repository. Speichern Sie diese Datei in Ihrem ‘js’-Verzeichnis.
Erstellen Sie nun eine index.html
Datei. 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.html
Datei 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.php
Datei 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.