{"id":29685,"date":"2021-06-17T14:36:00","date_gmt":"2021-06-17T11:36:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29685"},"modified":"2021-10-17T04:14:26","modified_gmt":"2021-10-17T01:14:26","slug":"en-guide-for-randintegrering-pa-webbplats-med-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/en-guide-for-randintegrering-pa-webbplats-med-php\/","title":{"rendered":"En guide f\u00f6r randintegrering p\u00e5 webbplats med PHP"},"content":{"rendered":"

Om du driver en webbplats och samlar in en onlinebetalning har du f\u00f6rmodligen h\u00f6rt talas om Stripe Payment Gateway<\/strong>. Med Stripe kan man acceptera betalningen med ett kredit- eller bankkort. Detta \u00e4r ett bekv\u00e4mare s\u00e4tt att betala online f\u00f6r dina kunder. I den h\u00e4r artikeln studerar vi Stripe-integration till webbplatsen med PHP.<\/p>\n

Varf\u00f6r ska man anv\u00e4nda Stripe Payment Gateway?<\/h3>\n

Stripe<\/a> \u00e4r en av de mest popul\u00e4ra och s\u00e4kra betalningsportarna p\u00e5 Internet. Anv\u00e4ndarens kortuppgifter \u00e4r alltid s\u00e4kra med Stripe-betalningarna. Faktum \u00e4r att vid Strip-kassan tillhandah\u00e5ller de genererade element d\u00e4r en anv\u00e4ndare m\u00e5ste ange kortuppgifter. Elementen f\u00f6r att ange kortinformation genereras av Stripe under k\u00f6rning vilket g\u00f6r denna gateway s\u00e4krare.<\/p>\n

Efter att ha angett kortuppgifterna genererar Stripe en token som anv\u00e4nds f\u00f6r att debitera kortbetalningen. Som ett resultat beh\u00f6ver du inte lagra kortinformation alls.<\/p>\n

Med det sagt, l\u00e5t oss ta en titt p\u00e5 Stripe-integration till en webbplats med PHP.<\/p>\n

Skaffa API-nycklar f\u00f6r stripeintegration<\/h3>\n

F\u00f6r att komma ig\u00e5ng b\u00f6r du ha ett Stripe-konto<\/a>. F\u00f6r att integrera Stripe gateway i din applikation m\u00e5ste du skaffa din Stripe hemliga nyckel och publicerbar nyckel.<\/p>\n

Logga in p\u00e5 din Stripe-instrumentpanel. Du f\u00e5r dessa nycklar fr\u00e5n utvecklare-> API-nycklar<\/strong>. Jag rekommenderar att du f\u00f6rst testar betalningstransaktioner med testl\u00e4get. Om allt fungerar bra, g\u00e5 sedan till live-l\u00e4ge. S\u00e5 ta tag i API-nycklarna f\u00f6r testl\u00e4ge.<\/p>\n

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

Stripe Checkout Form<\/h3>\n

N\u00e4r vi integrerar en betalningsport p\u00e5 webbplatsen m\u00e5ste vi lagra transaktionsuppgifterna i databasen. S\u00e5 l\u00e5t oss skapa en payments<\/code>tabell med hj\u00e4lp av SQL-fr\u00e5gan nedan.<\/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
Skapa sedan ett utcheckningsformul\u00e4r. Som jag n\u00e4mnde tidigare genererar Stripe kortelement till dig. Vi kommer att generera dessa element i kassan genom att f\u00f6lja stripdokumentationen<\/a>.<\/p>\n
Skapa index.html<\/code>fil och placera nedanst\u00e5ende kod i den.<\/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
L\u00e4gg till lite styling i formul\u00e4ret med hj\u00e4lp av koden nedan i style.css<\/code>filen.<\/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
Efter detta, f\u00f6r att generera kortelement och stripToken m\u00e5ste du l\u00e4gga till f\u00f6ljande JavaScript-kod i card.js<\/code>filen. Denna JavaScript-kod validerar ocks\u00e5 kortuppgifterna.<\/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
Du m\u00e5ste ers\u00e4tta platsh\u00e5llaren PUBLISHABLE_KEY med din faktiska nyckel i ovanst\u00e5ende kod.<\/p>\n
Jag har lagt till slumpm\u00e4ssig styling i formul\u00e4ret. Du kan justera formul\u00e4rets design s\u00e5 att den passar din webbplats. Dessutom ger Stripe olika m\u00f6nster av kortelement. L\u00e4s mer om det i dokumentationen<\/a>.<\/p>\n
N\u00e4r anv\u00e4ndaren skickar in ett formul\u00e4r med kortinformation genererar Stripe en token i bakgrunden som kommer att st\u00e4llas in som ett dolt f\u00e4lt ’token’. Denna token anv\u00e4nds f\u00f6r att debitera en kortbetalning med Stripe SDK.<\/p>\n
Vi skickar formul\u00e4rdata till charge.php<\/code>. I den h\u00e4r PHP-filen kommer vi att debitera kortet och utf\u00f6ra betalningen.<\/p>\n
Stripintegration med Omnipay i PHP<\/h3>\n
Vi st\u00e4ller alla in med den grundl\u00e4ggande konfigurationen. Nu, f\u00f6r att debitera kortbetalningen, installera Omnipay Stripe-biblioteket<\/a>. \u00d6ppna terminalen i din projektkatalog och k\u00f6r kommandot nedan:<\/p>\n
composer require league\/omnipay omnipay\/stripe<\/code><\/pre>\n
Skapa en config.php-fil efter installation av biblioteket och initiera betalningsobjekt och databasanslutning.<\/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
Se till att ers\u00e4tta alla platsh\u00e5llare med de faktiska v\u00e4rdena. D\u00e4refter charge.php<\/code>skriver du koden enligt f\u00f6ljande.<\/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
Vi \u00e4r klara med kodningsdelen. Forts\u00e4tt och testa sandl\u00e5dans betalningar. Stripe tillhandah\u00e5ller kortuppgifter<\/a> f\u00f6r att testa betalningen.<\/p>\n
N\u00e4r du best\u00e4mmer dig f\u00f6r att g\u00e5 live beh\u00f6ver du bara \u00e4ndra din hemliga och publicerbara nyckel med liveuppgifterna.<\/p>\n
Jag hoppas att du kan l\u00e4ra dig om Stripe-integrationen p\u00e5 en webbplats med PHP. Jag skulle vilja h\u00f6ra dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n