{"id":25968,"date":"2021-06-17T14:36:00","date_gmt":"2021-06-17T11:36:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25968"},"modified":"2021-10-17T20:15:58","modified_gmt":"2021-10-17T17:15:58","slug":"opas-raidan-integrointiin-php-n-verkkosivustoon","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/opas-raidan-integrointiin-php-n-verkkosivustoon\/","title":{"rendered":"Opas raidan integrointiin PHP: n verkkosivustoon"},"content":{"rendered":"

Jos sinulla on verkkosivusto, ker\u00e4\u00e4t verkkomaksua, olet todenn\u00e4k\u00f6isesti kuullut Stripe Payment Gatewaysta<\/strong>. Stripen avulla maksu voidaan hyv\u00e4ksy\u00e4 luotto- tai maksukortilla. T\u00e4m\u00e4 on k\u00e4tev\u00e4mpi tapa maksaa asiakkaillesi verkossa. T\u00e4ss\u00e4 artikkelissa tutkitaan Stripe-integraatiota verkkosivustolle PHP: n avulla.<\/p>\n

Miksi Stripe-maksuyhdysk\u00e4yt\u00e4v\u00e4\u00e4 tulisi k\u00e4ytt\u00e4\u00e4?<\/h3>\n

Stripe<\/a> on yksi Internetin suosituimmista ja turvallisimmista maksuyhdysk\u00e4yt\u00e4vist\u00e4. K\u00e4ytt\u00e4j\u00e4n korttitiedot ovat aina turvassa Stripe-maksujen yhteydess\u00e4. Itse asiassa Stripe-kassalla ne tarjoavat luotuja elementtej\u00e4, joissa k\u00e4ytt\u00e4j\u00e4n on sy\u00f6tett\u00e4v\u00e4 kortin tiedot. Stripe generoi korttitietojen sy\u00f6tt\u00e4miseen tarvittavat elementit ajon aikana, mik\u00e4 tekee yhdysk\u00e4yt\u00e4v\u00e4st\u00e4 turvallisemman.<\/p>\n

Sy\u00f6tetty\u00e4\u00e4n kortin tiedot Stripe luo tunnuksen, jota k\u00e4ytet\u00e4\u00e4n korttimaksun veloittamiseen. T\u00e4m\u00e4n seurauksena korttitietoja ei tarvitse tallentaa ollenkaan.<\/p>\n

T\u00e4st\u00e4 huolimatta katsotaanpa Stripe-integraatio verkkosivustolle PHP: n avulla.<\/p>\n

Hanki API-avaimet raitojen integrointia varten<\/h3>\n

Aloittamiseen sinulla on oltava Stripe-tili<\/a>. Jos haluat integroida Stripe-yhdysk\u00e4yt\u00e4v\u00e4n sovellukseesi, sinun on hankittava Stripe-salainen avain ja julkaistava avain.<\/p>\n

Kirjaudu Stripe-kojelautaan. Saat n\u00e4m\u00e4 avaimet kehitt\u00e4jilt\u00e4-> API-avaimet<\/strong>. Suosittelen, ett\u00e4 testaa ensin maksutapahtumat testitilassa. Jos kaikki toimii hyvin, siirry live-tilaan. Tartu siis API-avaimiin testaustilaan.<\/p>\n

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

Stripe Checkout -lomake<\/h3>\n

Aina kun integroimme maksuyhdysk\u00e4yt\u00e4v\u00e4n verkkosivustolle, meid\u00e4n on tallennettava tapahtuman tiedot tietokantaan. Joten luodaan payments<\/code>taulukko k\u00e4ytt\u00e4m\u00e4ll\u00e4 alla olevaa SQL-kysely\u00e4.<\/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
Luo seuraavaksi kassalomake. Kuten aiemmin mainitsin, Stripe luo sinulle korttielementtej\u00e4. Luomme n\u00e4m\u00e4 elementit kassalomakkeeseen seuraamalla Stripe-dokumentaatiota<\/a>.<\/p>\n
Luo index.html<\/code>tiedosto ja aseta siihen alla oleva koodi.<\/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
Lis\u00e4\u00e4 muotoilu lomakkeeseen k\u00e4ytt\u00e4m\u00e4ll\u00e4 style.css<\/code>tiedoston alla olevaa koodia .<\/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
T\u00e4m\u00e4n j\u00e4lkeen korttielementin ja raidanToken luomiseksi sinun on lis\u00e4tt\u00e4v\u00e4 seuraava JavaScript-koodi card.js<\/code>tiedostoon. T\u00e4m\u00e4 JavaScript-koodi vahvistaa my\u00f6s kortin tiedot.<\/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
Sinun on korvattava paikkamerkki PUBLISHABLE_KEY todellisella avaimellasi yll\u00e4 olevassa koodissa.<\/p>\n
Olen lis\u00e4nnyt lomakkeeseen satunnaisen tyylin. Voit s\u00e4\u00e4t\u00e4\u00e4 lomakkeen ulkoasua verkkosivustollesi sopivaksi. Stripe tarjoaa lis\u00e4ksi erilaisia \u200b\u200bkorttielementtien malleja. Lue lis\u00e4\u00e4 dokumentaatiosta<\/a>.<\/p>\n
Kun k\u00e4ytt\u00e4j\u00e4 l\u00e4hett\u00e4\u00e4 kortin yksityiskohdat sis\u00e4lt\u00e4v\u00e4n lomakkeen, Stripe luo taustalle tunnuksen, joka asetetaan piilotetuksi kent\u00e4ksi ’tunnus’. T\u00e4t\u00e4 tunnusta k\u00e4ytet\u00e4\u00e4n korttimaksun veloittamiseen Stripe SDK: lla.<\/p>\n
L\u00e4het\u00e4mme lomaketiedot charge.php<\/code>. T\u00e4ss\u00e4 PHP-tiedostossa veloitamme kortin ja suoritamme maksun.<\/p>\n
Stripe-integrointi Omnipayn kanssa PHP: ss\u00e4<\/h3>\n
Me kaikki asetimme perusm\u00e4\u00e4rityksill\u00e4. Asenna nyt Omnipay Stripe -kirjasto<\/a>, jotta voit veloittaa korttimaksun. Avaa p\u00e4\u00e4te projektin juurihakemistossa ja suorita alla oleva komento:<\/p>\n
composer require league\/omnipay omnipay\/stripe<\/code><\/pre>\n
Kun olet asentanut kirjaston, luo config.php-tiedosto ja alusta maksuobjekti- ja tietokantayhteys.<\/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
Muista korvata kaikki paikkamerkit todellisilla arvoilla. Seuraavaksi charge.php<\/code>kirjoita koodi seuraavasti.<\/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
Olemme valmiit koodaavan osan kanssa. Testaa hiekkalaatikkomaksut. Stripe tarjoaa nuken korttitiedot<\/a> maksun testaamiseksi.<\/p>\n
Aina kun p\u00e4\u00e4t\u00e4t l\u00e4hte\u00e4 liven\u00e4, sinun tarvitsee vain vaihtaa salainen ja julkaistava avain live-tunnistetiedoilla.<\/p>\n
Toivon, ett\u00e4 saat tiet\u00e4\u00e4 Stripe-integraatiosta PHP-verkkosivustolla. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n