Integracja PayPal Payments Pro w Laravel

Ostatnia aktualizacja paź 18, 2021

Akceptuj płatności na żywo w systemie PayPal Payments Pro

Napisałem artykuł akceptujący płatności kartą kredytową za pomocą PayPal Payments Pro w PHP. Jeden z czytelników zapytał mnie, jak wykonać tę samą integrację w Laravelu. Chociaż Laravel jest napisany w PHP, pisząc kod dla Laravela, musisz przestrzegać ich standardów. Początkującym często trudno jest przekonwertować zwykły kod PHP w Laravelu.

W tym artykule dowiemy się, jak zintegrować PayPal Payments Pro i akceptować płatności kartą kredytową w Laravel.

Jeśli prowadzisz sklep internetowy, witrynę członkowską lub coś innego, w którym chcesz pobierać płatności online, PayPal jest bezpieczną opcją. Korzystając z PayPal Payments Pro, możesz akceptować płatności kartą kredytową online, które trafiają bezpośrednio na Twoje konto PayPal.

Zachowaj notatkę w momencie pisania tego artykułu, PayPal Payments Pro jest dostępny dla handlowców w Stanach Zjednoczonych, Wielkiej Brytanii i Kanadzie.

Pierwsze kroki

Aby rozpocząć, musisz uzyskać poświadczenia PayPal API. Dobrą praktyką jest zawsze testowanie płatności w trybie piaskownicy. Jeśli wszystko działa zgodnie z oczekiwaniami, dokonaj płatności.

Uzyskaj poświadczenia piaskownicy, logując się na konto programisty PayPal. Po zalogowaniu przejdź do SANDBOX->Konta z menu po lewej stronie i załóż konto firmowe.

Po założeniu konta firmowego zmień typ konta na „Business-Pro". Integracja PayPal Payments Pro wymaga konta typu „Business-Pro”. Kliknij łącze „Uaktualnij do wersji Pro”, a PayPal zmieni typ Twojego konta na „Business-Pro”.

Następnie kliknij kartę „Poświadczenia API” i skopiuj swoje dane uwierzytelniające.

Otwórz .envswój projekt Laravel i dodaj do niego skopiowane dane uwierzytelniające.


PAYPAL_API_USERNAME=
PAYPAL_API_PASSWORD=
PAYPAL_API_SIGNATURE=

Dodaj trasę do kontrolera w web.phppliku. W moim przypadku moja trasa wygląda następująco.


Route::resource('payment', 'PaymentController');

Mam zamiar użyć OmniPay biblioteki, która pozwala w łatwy sposób zintegrować sposobów płatności. Uruchom poniższe polecenie, które zainstaluje bibliotekę Omnipay.


composer require league/omnipay:^3 omnipay/paypal

Utwórz formularz płatności

Przyjmując płatność kartą kredytową, musisz udostępnić użytkownikom formularz, w którym mogą wprowadzić dane swojej karty. Zaprojektujmy formularz płatności, korzystając z tego przykładu codepen.

Utwórz folder 'css’ i 'js’ w katalogu 'public’ projektu Laravel. Skopiuj kod CSS z codepen i dodaj go w css/card.css.


@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.8%;
  float: left;
  margin-bottom: 2px;
}
#column-right {
  width: 46.8%;
  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 dodaj kod JavaScript z codepen do js/card.jspliku.


$('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’.

Na koniec w pliku ostrza dodaj poniższy kod.


<link rel="stylesheet" href="{{ asset('css/card.css') }}">
 
<form method="POST" action="{{ url('ROUTE_HERE') }}">
    {{ csrf_field() }}
    <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.4.1/jquery.min.js"></script>
<script src="{{ asset('js/jquery.card.js') }}"></script>
<script src="{{ asset('js/card.js') }}"></script>

W powyższym kodzie umieściłem CSS, JS z odpowiedniego katalogu. Musisz podać adres URL swojej trasy do akcji formularza.

Integracja PayPal Payments Pro w Laravel

Skończyliśmy z konfiguracją wymaganą do akceptowania płatności kartą kredytową. Teraz w kontrolerze musimy napisać kod zgodnie z instrukcją Omnipay. Omnipay ułatwia życie programistom. Musimy po prostu postępować zgodnie z ich instrukcjami, a oni wykonują całą ciężką pracę polegającą na przechwyceniu płatności i zwróceniu ostatecznej odpowiedzi.

PaymentController.php


<?php
 
namespace AppHttpControllers;
 
use IlluminateHttpRequest;
use OmnipayOmnipay;
 
class PaymentController extends Controller
{
 
    public $gateway;
 
    public function __construct()
    {
        $this->gateway = Omnipay::create('PayPal_Pro');
        $this->gateway->setUsername(env('PAYPAL_API_USERNAME'));
        $this->gateway->setPassword(env('PAYPAL_API_PASSWORD'));
        $this->gateway->setSignature(env('PAYPAL_API_SIGNATURE'));
        $this->gateway->setTestMode(true); // here 'true' is for sandbox. Pass 'false' when go live
    }
 
    public function index()
    {
        return view('payment');
    }
 
    public function store(Request $request)
    {
        $arr_expiry = explode("/", $request->input('expiry'));
  
        $formData = array(
            'firstName' => $request->input('first-name'),
            'lastName' => $request->input('last-name'),
            'number' => $request->input('number'),
            'expiryMonth' => trim($arr_expiry[0]),
            'expiryYear' => trim($arr_expiry[1]),
            'cvv' => $request->input('cvc')
        );
 
        try {
            // Send purchase request
            $response = $this->gateway->purchase([
                'amount' => $request->input('amount'),
                'currency' => 'USD',
                'card' => $formData
            ])->send();
 
            // Process response
            if ($response->isSuccessful()) {
 
                // Payment was successful
                $arr_body = $response->getData();
                $amount = $arr_body['AMT'];
                $currency = $arr_body['CURRENCYCODE'];
                $transaction_id = $arr_body['TRANSACTIONID'];
 
                echo "Payment of $amount $currency is successful. Your Transaction ID is: $transaction_id";
            } else {
                // Payment failed
                echo "Payment failed. ". $response->getMessage();
            }
        } catch(Exception $e) {
            echo $e->getMessage();
        }
    }
}

Tutaj w konstruktorze budujemy obiekt i przekazujemy do niego referencje. Gdy użytkownik przesyła formularz, kontrola przechodzi do metody „store”. W tej metodzie Omnipay wywołuje w tle API PayPal, przetwarza płatność i daje ostateczną odpowiedź.

Śmiało i spróbuj. Ponieważ testujemy płatność w trybie piaskownicy, będziesz potrzebować kart testowych. Kliknij tutaj, aby uzyskać fałszywe dane karty kredytowej. Po przesłaniu formularza powinieneś zobaczyć komunikat o powodzeniu wraz z identyfikatorem transakcji.

Akceptuj płatności na żywo w systemie PayPal Payments Pro

Gdy Twoje płatności działają pomyślnie w trybie piaskownicy, możesz przejść do trybu na żywo. W tym celu musisz zastąpić poświadczenia piaskownicy danymi na żywo w .envpliku. Przekaż także wartość „false” do metody setTestMode() w konstruktorze. Wyłączy tryb piaskownicy i aktywuje tryb na żywo.

Wszystko sprowadza się do akceptowania płatności kartą kredytową w systemie PayPal Payments Pro w Laravel. Chciałbym usłyszeć wasze przemyślenia i sugestie w sekcji komentarzy poniżej.

Powiązane artykuły

Źródło nagrywania: artisansweb.net