{"id":29558,"date":"2021-06-17T13:48:00","date_gmt":"2021-06-17T10:48:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29558"},"modified":"2021-10-18T03:31:45","modified_gmt":"2021-10-18T00:31:45","slug":"przewodnik-po-integracji-stripe-w-witrynie-z-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/przewodnik-po-integracji-stripe-w-witrynie-z-php\/","title":{"rendered":"Przewodnik po integracji Stripe w witrynie z PHP"},"content":{"rendered":"

Je\u015bli prowadzisz stron\u0119 internetow\u0105 i pobierasz p\u0142atno\u015bci online, to prawdopodobnie s\u0142ysza\u0142e\u015b o Stripe Payment Gateway<\/strong>. Korzystaj\u0105c ze Stripe mo\u017cna przyj\u0105\u0107 p\u0142atno\u015b\u0107 kart\u0105 kredytow\u0105 lub debetow\u0105. Jest to wygodniejszy spos\u00f3b p\u0142acenia klientom online. W tym artykule przyjrzymy si\u0119 integracji Stripe ze stron\u0105 internetow\u0105 za pomoc\u0105 PHP.<\/p>\n

Dlaczego warto korzysta\u0107 z bramki p\u0142atno\u015bci Stripe?<\/h3>\n

Stripe<\/a> to jedna z najpopularniejszych i najbezpieczniejszych bramek p\u0142atniczych w Internecie. Dane karty u\u017cytkownika s\u0105 zawsze bezpieczne przy p\u0142atno\u015bciach Stripe. W rzeczywisto\u015bci w kasie Stripe udost\u0119pniaj\u0105 wygenerowane elementy, w kt\u00f3rych u\u017cytkownik musi wprowadzi\u0107 dane karty. Elementy do wprowadzania danych karty s\u0105 generowane przez Stripe w czasie wykonywania, co sprawia, \u017ce \u200b\u200bta brama jest bezpieczniejsza.<\/p>\n

Po wprowadzeniu danych karty Stripe generuje token, kt\u00f3ry pos\u0142u\u017cy do obci\u0105\u017cenia p\u0142atno\u015bci kart\u0105. Dzi\u0119ki temu w og\u00f3le nie trzeba przechowywa\u0107 danych karty.<\/p>\n

Bior\u0105c to pod uwag\u0119, przyjrzyjmy si\u0119 integracji Stripe ze stron\u0105 internetow\u0105 za pomoc\u0105 PHP.<\/p>\n

Uzyskaj klucze API do integracji Stripe<\/h3>\n

Na pocz\u0105tek powiniene\u015b mie\u0107 konto Stripe<\/a>. Aby zintegrowa\u0107 bram\u0119 Stripe w swojej aplikacji, musisz uzyska\u0107 tajny klucz Stripe i klucz do publikacji.<\/p>\n

Zaloguj si\u0119 do swojego panelu Stripe. Otrzymasz te klucze z Developers->API Keys<\/strong>. Polecam najpierw przetestowa\u0107 transakcje p\u0142atnicze w trybie testowym. Je\u015bli wszystko dzia\u0142a dobrze, przejd\u017a do trybu na \u017cywo. Wi\u0119c chwy\u0107 klucze API do trybu testowania.<\/p>\n

\"Przewodnik<\/a><\/p>\n

Formularz zam\u00f3wienia w paski<\/h3>\n

Ilekro\u0107 integrujemy bramk\u0119 p\u0142atno\u015bci na stronie internetowej, musimy przechowywa\u0107 szczeg\u00f3\u0142y transakcji w bazie danych. Stw\u00f3rzmy wi\u0119c payments<\/code>tabel\u0119 za pomoc\u0105 poni\u017cszego zapytania SQL.<\/p>\n

CREATE TABLE `payments` (\u00a0`id` int(11) NOT NULL AUTO_INCREMENT,\n\u00a0`payment_id` varchar(255) NOT NULL,\n\u00a0`amount` float(10,2) NOT NULL,\n\u00a0`currency` varchar(255) NOT NULL,\n\u00a0`payment_status` varchar(255) NOT NULL,\n\u00a0`captured_at` datetime NOT NULL DEFAULT current_timestamp(),\n\u00a0PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;<\/code><\/pre>\n
Nast\u0119pnie utw\u00f3rz formularz kasy. Jak wspomnia\u0142em wcze\u015bniej, Stripe generuje dla Ciebie elementy kart. Wygenerujemy te elementy w formularzu kasowym, post\u0119puj\u0105c zgodnie z dokumentacj\u0105 Stripe<\/a>.<\/p>\n
Utw\u00f3rz index.html<\/code>plik i umie\u015b\u0107 w nim poni\u017cszy kod.<\/p>\n
<link rel=\"stylesheet\" href=\"style.css\" \/>\n<script src=\"https:\/\/js.stripe.com\/v3\/\"><\/script>\n<form action=\"charge.php\" method=\"post\" id=\"payment-form\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" name=\"amount\" placeholder=\"Enter Amount\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"card-element\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Credit or debit card\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"card-element\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<!-- A Stripe Element will be inserted here. -->\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<!-- Used to display form errors. -->\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"card-errors\" role=\"alert\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<button>Submit Payment<\/button>\n<\/form>\n<script src=\"card.js\"><\/script><\/code><\/pre>\n
Dodaj stylizacj\u0119 do formularza, korzystaj\u0105c z poni\u017cszego kodu w style.css<\/code>pliku.<\/p>\n
.StripeElement {\n\u00a0\u00a0\u00a0\u00a0box-sizing: border-box;\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0height: 40px;\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0padding: 10px 12px;\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0border: 1px solid transparent;\n\u00a0\u00a0\u00a0\u00a0border-radius: 4px;\n\u00a0\u00a0\u00a0\u00a0background-color: white;\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0box-shadow: 0 1px 3px 0 #e6ebf1;\n\u00a0\u00a0\u00a0\u00a0-webkit-transition: box-shadow 150ms ease;\n\u00a0\u00a0\u00a0\u00a0transition: box-shadow 150ms ease;\n}\n\u00a0\u00a0\n.StripeElement--focus {\n\u00a0\u00a0\u00a0\u00a0box-shadow: 0 1px 3px 0 #cfd7df;\n}\n\u00a0\u00a0\n.StripeElement--invalid {\n\u00a0\u00a0\u00a0\u00a0border-color: #fa755a;\n}\n\u00a0\u00a0\n.StripeElement--webkit-autofill {\n\u00a0\u00a0\u00a0\u00a0background-color: #fefde5 !important;\n}<\/code><\/pre>\n
Nast\u0119pnie, aby wygenerowa\u0107 element karty i stripeToken nale\u017cy doda\u0107 do card.js<\/code>pliku nast\u0119puj\u0105cy kod JavaScript. Ten kod JavaScript weryfikuje r\u00f3wnie\u017c dane karty.<\/p>\n
\/\/ Create a Stripe client.\nvar stripe = Stripe('PUBLISHABLE_KEY');\n\u00a0\u00a0\n\/\/ Create an instance of Elements.\nvar elements = stripe.elements();\n\u00a0\u00a0\n\/\/ Custom styling can be passed to options when creating an Element.\n\/\/ (Note that this demo uses a wider set of styles than the guide below.)\nvar style = {\n\u00a0\u00a0\u00a0\u00a0base: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: '#32325d',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontFamily: '\"Helvetica Neue\", Helvetica, sans-serif',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSmoothing: 'antialiased',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: '16px',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'::placeholder': {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: '#aab7c4'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0invalid: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: '#fa755a',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0iconColor: '#fa755a'\n\u00a0\u00a0\u00a0\u00a0}\n};\n\u00a0\u00a0\n\/\/ Create an instance of the card Element.\nvar card = elements.create('card', {style: style});\n\u00a0\u00a0\n\/\/ Add an instance of the card Element into the `card-element` <div>.\ncard.mount('#card-element');\n\u00a0\u00a0\n\/\/ Handle real-time validation errors from the card Element.\ncard.addEventListener('change', function(event) {\n\u00a0\u00a0\u00a0\u00a0var displayError = document.getElementById('card-errors');\n\u00a0\u00a0\u00a0\u00a0if (event.error) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0displayError.textContent = event.error.message;\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0displayError.textContent = '';\n\u00a0\u00a0\u00a0\u00a0}\n});\n\u00a0\u00a0\n\/\/ Handle form submission.\nvar form = document.getElementById('payment-form');\nform.addEventListener('submit', function(event) {\n\u00a0\u00a0\u00a0\u00a0event.preventDefault();\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0stripe.createToken(card).then(function(result) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (result.error) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Inform the user if there was an error.\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var errorElement = document.getElementById('card-errors');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errorElement.textContent = result.error.message;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Send the token to your server.\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0stripeTokenHandler(result.token);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n});\n\u00a0\u00a0\n\/\/ Submit the form with the token ID.\nfunction stripeTokenHandler(token) {\n\u00a0\u00a0\u00a0\u00a0\/\/ Insert the token ID into the form so it gets submitted to the server\n\u00a0\u00a0\u00a0\u00a0var form = document.getElementById('payment-form');\n\u00a0\u00a0\u00a0\u00a0var hiddenInput = document.createElement('input');\n\u00a0\u00a0\u00a0\u00a0hiddenInput.setAttribute('type', 'hidden');\n\u00a0\u00a0\u00a0\u00a0hiddenInput.setAttribute('name', 'stripeToken');\n\u00a0\u00a0\u00a0\u00a0hiddenInput.setAttribute('value', token.id);\n\u00a0\u00a0\u00a0\u00a0form.appendChild(hiddenInput);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Submit the form\n\u00a0\u00a0\u00a0\u00a0form.submit();\n}<\/code><\/pre>\n
Musisz zast\u0105pi\u0107 symbol zast\u0119pczy PUBLISHABLE_KEY swoim rzeczywistym kluczem w powy\u017cszym kodzie.<\/p>\n
Do formularza doda\u0142am losow\u0105 stylizacj\u0119. Mo\u017cesz dostosowa\u0107 projekt formularza, aby pasowa\u0142 do Twojej witryny. Dodatkowo Stripe zapewnia r\u00f3\u017cne wzory element\u00f3w kart. Przeczytaj wi\u0119cej na ten temat w dokumentacji<\/a>.<\/p>\n
Gdy u\u017cytkownik przesy\u0142a formularz z danymi karty, Stripe generuje w tle token, kt\u00f3ry ustawi si\u0119 jako ukryte pole \u201etoken". Ten token b\u0119dzie u\u017cywany do obci\u0105\u017cania p\u0142atno\u015bci kart\u0105 za pomoc\u0105 Stripe SDK.<\/p>\n
Wysy\u0142amy dane formularza do charge.php<\/code>. W tym pliku PHP obci\u0105\u017cymy kart\u0119 i wykonamy p\u0142atno\u015b\u0107.<\/p>\n
Integracja Stripe z Omnipay w PHP<\/h3>\n
Wszyscy ustawiamy si\u0119 z podstawow\u0105 konfiguracj\u0105. Teraz, aby do\u0142adowa\u0107 p\u0142atno\u015b\u0107 kart\u0105, zainstaluj bibliotek\u0119 Omnipay Stripe<\/a>. Otw\u00f3rz terminal w katalogu g\u0142\u00f3wnym projektu i uruchom poni\u017csze polecenie:<\/p>\n
composer require league\/omnipay omnipay\/stripe<\/code><\/pre>\n
Po zainstalowaniu biblioteki utw\u00f3rz plik config.php i zainicjuj obiekt p\u0142atno\u015bci oraz po\u0142\u0105czenie z baz\u0105 danych.<\/p>\n
<?php\nrequire_once \"vendor\/autoload.php\";\n\u00a0\u00a0\nuse OmnipayOmnipay;\n\u00a0\u00a0\u00a0\n\/\/ Connect with the database \n$db = new mysqli('MYSQL_HOST', 'MYSQL_DB_USERNAME', 'MYSQL_DB_PASSWORD', 'MYSQL_DB_NAME');\n\u00a0\u00a0\u00a0\u00a0\nif ($db->connect_errno) {\n\u00a0\u00a0\u00a0\u00a0die(\"Connect failed: \". $db->connect_error);\n}\n\u00a0\u00a0\u00a0\n$gateway = Omnipay::create('Stripe');\n$gateway->setApiKey('SECRET_KEY_HERE');<\/code><\/pre>\n
Pami\u0119taj, aby zast\u0105pi\u0107 wszystkie symbole zast\u0119pcze rzeczywistymi warto\u015bciami. Nast\u0119pnie w swoim charge.php<\/code>napisz kod w nast\u0119puj\u0105cy spos\u00f3b.<\/p>\n
<?php\nrequire_once \"config.php\";\n\u00a0\u00a0\u00a0\nif (isset($_POST['stripeToken']) && !empty($_POST['stripeToken'])) {\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0try {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$token = $_POST['stripeToken'];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$response = $gateway->purchase([\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'amount' => $_POST['amount'],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'currency' => 'USD',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'token' => $token,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0])->send();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ($response->isSuccessful()) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ payment was successful: update database\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$arr_payment_data = $response->getData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$payment_id = $arr_payment_data['id'];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$amount = $_POST['amount'];\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Insert transaction data into the database\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$isPaymentExist = $db->query(\"SELECT * FROM payments WHERE payment_id = '\".$payment_id.\"'\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($isPaymentExist->num_rows == 0) { \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$insert = $db->query(\"INSERT INTO payments(payment_id, amount, currency, payment_status) VALUES('$payment_id', '$amount', 'USD', 'Captured')\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"Payment is successful. Your payment id is: \". $payment_id;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ payment failed: display message to customer\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $response->getMessage();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0} catch(Exception $e) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $e->getMessage();\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Sko\u0144czyli\u015bmy z cz\u0119\u015bci\u0105 koduj\u0105c\u0105. \u015amia\u0142o i przetestuj p\u0142atno\u015bci w piaskownicy. Stripe udost\u0119pnia dane atrapy karty<\/a> do testowania p\u0142atno\u015bci.<\/p>\n
Za ka\u017cdym razem, gdy zdecydujesz si\u0119 na transmisj\u0119 na \u017cywo, wystarczy zmieni\u0107 sw\u00f3j tajny i publikowalny klucz za pomoc\u0105 po\u015bwiadcze\u0144 na \u017cywo.<\/p>\n
Mam nadziej\u0119, \u017ce dowiesz si\u0119 o integracji Stripe na stronie z PHP. Chcia\u0142bym us\u0142ysze\u0107 wasze przemy\u015blenia i sugestie w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n