Integracja PayPal Payments Pro w Laravel
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/paypalUtwó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
- Integracja bramki płatności Authorize.Net w Laravel
- Integracja Stripe Payment Gateway w Laravel
- Integracja bramki płatności PayPal w Laravel