...
✅ Nowości, motywy, wtyczki WEB i WordPress. Tutaj dzielimy się wskazówkami i najlepszymi rozwiązaniami dla stron internetowych.

Akceptuj płatności kartą kredytową za pomocą PayPal Payments Pro w PHP

41

Czy chcesz zintegrować bramkę płatniczą, która akceptuje płatności kartą kredytową? Płatność kartą kredytową jest jedną z najlepszych opcji akceptowania płatności online. Klienci wolą płacić online za pomocą kart kredytowych. Może się zdarzyć, że tracisz klientów tylko dlatego, że Twoja witryna nie akceptuje płatności kartą kredytową. Jako właściciel sklepu internetowego powinieneś dodać na swojej stronie opcję płatności kartą kredytową.

Dostępnych jest wiele bramek płatniczych, które obsługują kartę kredytową. Na przykład Authorize.Net i Stripe umożliwiają przyjmowanie płatności kartą online.

Czytelnicy wybierają dowolną z powyższych opcji, ale jeśli chcą przejść na PayPal, czytaj dalej. W tym artykule pokażę, jak akceptować płatności kartą kredytową za pomocą PayPal Payments Pro.

PayPal Payments Pro akceptuje płatności za pomocą całkowicie konfigurowalnego rozwiązania. Oznacza to, że możesz stworzyć własną formę płatności i obciążyć klienta. Nie przekierowuje Cię do witryny PayPal w celu sfinalizowania transakcji.

Zamierzamy również stworzyć własny formularz, w którym klient wprowadzi dane swojej karty i będzie mógł zapłacić bez opuszczania strony internetowej. Użytkownik może zaprojektować własną stronę kasy i umożliwia wprowadzenie danych karty. Więc bez dalszej zwłoki zanurkujmy.

Pierwsze kroki

Przed zaakceptowaniem płatności w czasie rzeczywistym zawsze zaleca się przetestowanie go w trybie piaskownicy. Jeśli wszystko działa zgodnie z oczekiwaniami w piaskownicy, powinniśmy wprowadzić ją w życie, aby uniknąć problemów z płatnościami klientów. Do testowania płatności musisz mieć konto w piaskownicy PayPal. Utwórz konto na PayPal Developer. Po założeniu konta przejdź do SANDBOX->Konta z menu po lewej stronie i załóż konto firmowe.

W chwili pisania tego artykułu usługa PayPal Payments Pro jest dostępna w Stanach Zjednoczonych, Wielkiej Brytanii i Kanadzie. Oznacza to, że podczas tworzenia konta musisz wybrać jeden z tych krajów.

Gdy masz już konto firmowe, musisz zmienić typ konta na „Business-Pro". Musisz mieć konto typu „Business-Pro”, aby akceptować płatności kartą kredytową. Aby go uaktualnić, kliknij łącze „Uaktualnij do wersji Pro”, a PayPal zmieni typ Twojego konta na „Business-Pro”.

Akceptuj płatności kartą kredytową za pomocą PayPal Payments Pro w PHP

Następnie kliknij kartę „Poświadczenia API” i pobierz swoje dane uwierzytelniające. Będziemy potrzebować tych poświadczeń w następnej części tego samouczka.

Akceptuj płatności kartą kredytową za pomocą PayPal Payments Pro w PHP

Konfigurowalny formularz płatności

Jak już wspomniałem, korzystając z PayPal Payments Pro możesz zaprojektować własną formę płatności. Stwórzmy ładny formularz kasy, w którym klient wprowadza swoje dane dotyczące płatności. W tym samouczku użyję ładnie zaprojektowanego formularza na codepen.

Ostateczna struktura folderów powinna wyglądać następująco:

Akceptuj płatności kartą kredytową za pomocą PayPal Payments Pro w PHP

Nie myśl o tym vendor, charge.php, composer.json, composer.lockna razie. Stworzymy to w dalszej części.

Utwórz css/card.cssplik i dodaj do niego poniższy kod zgodnie z codepen.

@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;
  }
}

Podobnie nasz js/card.jsplik będzie miał następujący kod.

/* 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"]'
    }
});

Pobierz kopię jquery.card.jsz tego repozytorium GitHub. Zapisz ten plik w swoim katalogu ‘js’.

Teraz utwórz index.htmlplik. W tym pliku dodamy znacznik HTML, który wyświetla nasz formularz zamówienia.

<!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>

Przejdź do przeglądarki i uruchom index.htmlplik. Powinieneś teraz zobaczyć ładnie wyglądający formularz kasy.

Akceptuj płatności kartą kredytową za pomocą PayPal Payments Pro

Teraz możesz już korzystać z poświadczeń API PayPal i formularza HTML. Nadszedł czas, aby wszystko zdynamizować. Integracja bramki płatniczej nie jest wcale łatwym zadaniem. Musisz to zbadać i przeczytać całą dokumentację dostarczoną przez dostawcę. Czasami staje się to tak zagmatwane i pomimo długich godzin, nie udało ci się osiągnąć celu. Wiele razy się z tym mierzyłam. A jeśli chodzi o PayPal, sytuacja komplikuje się z powodu obszernej dokumentacji PayPal.

Tak już nie jest. Omnipay ułatwia życie naszemu programiście w zakresie integracji bramki płatności. Korzystając z tej biblioteki, nie musisz czytać dokumentacji bramki płatności. Po prostu uzyskaj dane uwierzytelniające API, postępuj zgodnie z instrukcjami Omnipay i gotowe. Sprawdź ich stronę GitHub, aby uzyskać więcej informacji.

Uruchom poniższe polecenie, aby zainstalować Omnipay i obsługiwaną bibliotekę PayPal.

composer require league/omnipay:^3 omnipay/paypal

Po zainstalowaniu powyższych bibliotek, poniższy kod trafi do twojego charge.phppliku.

<?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();
    }
}

Pamiętaj, aby zastąpić symbole zastępcze PAYPAL_API_USERNAME, PAYPAL_API_PASSWORD, PAYPAL_API_SIGNATURE rzeczywistymi wartościami. Teraz przejdź do przeglądarki i spróbuj dokonać płatności fikcyjnymi danymi karty kredytowej. Powinieneś otrzymać wiadomość o sukcesie wraz z identyfikatorem transakcji. Użytkownik może otrzymać testowe karty kredytowe dostarczane przez PayPal.

Akceptuj płatności na żywo za pomocą bramki płatności PayPal Pro

Po zakończeniu testowania w piaskownicy przekaż poświadczenia na żywo dla symboli zastępczych używanych w kodzie. Musisz także przekazać do setTestMode()metody wartość ‘false’ .

Wszystko sprowadza się do akceptowania płatności kartą kredytową za pomocą PayPal Payments Pro w PHP. Mam nadzieję, że pomoże Ci to zintegrować rozwiązanie płatnicze na Twojej stronie internetowej. Wypróbuj ten samouczek i daj mi znać swoje przemyślenia i sugestie w sekcji komentarzy poniżej.

Źródło nagrywania: artisansweb.net

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów