Stripe Payment Gateway-integration i Laravel
Om du driver en webbutik eller någon form av betald tjänst måste du antagligen acceptera kreditkortsbetalningar i din ansökan. Stripe är en av de populära betalningsportarna som accepterar kredit- eller bankkortbetalningar online. Dessutom behöver inte användaren lämna din webbplats för att göra kortbetalningen. I den här artikeln studerar vi Stripe Payment Gateway-integration i Laravel.
För att integrera Stripe gateway i Laravel ska vi använda Omnipay- biblioteket som är populärt bland utvecklarna. Så utan ytterligare dröjsmål, låt oss börja med vår integration.
Skaffa API-nycklar för stripeintegration
Först måste du skapa ett Stripe-konto om du inte redan har ett. För att integrera Stripe gateway måste du först ta din hemliga och publicerbara nyckel. Du kommer att få dessa nycklar från sidan Developers-> API Keys.
Det rekommenderas alltid att testa onlinetransaktionerna först med sandlådetangenter och om allt fungerar bra, välj livenycklar.
Grundläggande installation i Laravel för Stripe-integration
Innan du börjar acceptera onlinebetalningar med Stripe måste du utföra en grundläggande installation. Vi kommer att behöva randnycklar under API-integrering så lägg till dessa nycklar i .envfilen.
STRIPE_PUBLISHABLE_KEY=PASTE_PUBLISHABLE_KEY
STRIPE_SECRET_KEY=PASTE_SECRET_KEY
STRIPE_CURRENCY=USDNär vi lägger till nya konstanter i miljöfilen bör vi köra kommandot nedan för att rensa konfigurationscachen.
php artisan config:cacheNär det gäller onlinebetalningar bör man spara transaktionsuppgifterna i databasen. För detta skapar du en migrering med kommandot:
php artisan make:migration create_payments_tableI migreringsfilen redigerar du upmetoden enligt följande:
public function up()
{
Schema::create('payments', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('payment_id');
$table->string('payer_email');
$table->float('amount', 10, 2);
$table->string('currency');
$table->string('payment_status');
$table->timestamps();
});
}Kör sedan kommandot nedan för att utföra migrering.
php artisan migrateVi kräver ett HTML-formulär där en användare kan ange sina kortuppgifter och annan information. Skapa en payment.blade.phpfil och lägg till koden nedan i den.
<link rel="stylesheet" href="{{ asset('/css/style.css') }}" />
<script src="https://js.stripe.com/v3/"></script>
<form action="{{ url('charge') }}" method="post" id="payment-form">
<div class="form-row">
<p><input type="text" name="amount" placeholder="Enter Amount" /></p>
<p><input type="email" name="email" placeholder="Enter Email" /></p>
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
{{ csrf_field() }}
</form>
<script>
var publishable_key = '{{ env('STRIPE_PUBLISHABLE_KEY') }}';
</script>
<script src="{{ asset('/js/card.js') }}"></script>I bladfilen inkluderade vi CSS- och JS-filer direkt. Du kan inkludera det på ett annat sätt enligt ditt projektflöde. Slutligen definiera rutterna enligt följande.
rutter / web.php
Route::get('/payment', 'PaymentController@index');
Route::post('/charge', 'PaymentController@charge');Vi skapar styrenheten PaymentControlleri nästa steg.
Skapa randkortelement
Stripe tillhandahåller sina egna förbyggda UI-komponenter som samlar in kundkortsdata säkert utan att hantera känslig data. Kortuppgifterna omvandlas till ‘Token’ som sedan måste skickas till dina servrar. Med hjälp av denna ‘Token’ kan du debitera kunderna. Detta är ett sätt som är säkert eftersom din applikation inte behöver lagra eller interagera med kundkortsinformation.
Du kanske har märkt i bladfilen som vi inkluderade card.jsfilen. Skapa den här JS-filen under den offentliga katalogen och lägg till koden nedan.
js / card.js
// Create a Stripe client.
var stripe = Stripe(publishable_key);
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
// Submit the form with the token ID.
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}Bladfilen har också inkluderat style.cssfilen. Skapa style.cssi den offentliga mappen. Denna CSS kommer att ha nedanstående kod.
css / style.css
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}Stripe tillhandahåller olika typer av användargränssnittselement för att bygga en kassa med kreditkortsuppgifter. Läs mer om det i deras dokumentation.
Stripe Payment Gateway-integration i Laravel
Vi ställer alla in den önskade konfigurationen. Nu kan vi fortsätta och integrera Stripe-betalningsgatewayen i Laravel. Kör kommandot nedan för att installera Omnipay-biblioteket i ditt projekt.
composer require league/omnipay omnipay/stripeFör att ringa bladfilen och ladda transaktionen skapa en PaymentControllermed kommandot artisan:
php artisan make:controller PaymentControllerEftersom vi ska lagra transaktionsinformation i databasen, skapa en modell Paymentsom är associerad med betalningstabellen i databasen.
php artisan make:model PaymentSlutligen PaymentController.phphar följande kod som debiterar transaktionen och infogar transaktionsinformation i din databas.
PaymentController.php
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use OmnipayOmnipay;
use AppModelsPayment;
class PaymentController extends Controller
{
public function index()
{
return view('payment');
}
public function charge(Request $request)
{
if ($request->input('stripeToken')) {
$gateway = Omnipay::create('Stripe');
$gateway->setApiKey(env('STRIPE_SECRET_KEY'));
$token = $request->input('stripeToken');
$response = $gateway->purchase([
'amount' => $request->input('amount'),
'currency' => env('STRIPE_CURRENCY'),
'token' => $token,
])->send();
if ($response->isSuccessful()) {
// payment was successful: insert transaction data into the database
$arr_payment_data = $response->getData();
$isPaymentExist = Payment::where('payment_id', $arr_payment_data['id'])->first();
if(!$isPaymentExist)
{
$payment = new Payment;
$payment->payment_id = $arr_payment_data['id'];
$payment->payer_email = $request->input('email');
$payment->amount = $arr_payment_data['amount']/100;
$payment->currency = env('STRIPE_CURRENCY');
$payment->payment_status = $arr_payment_data['status'];
$payment->save();
}
return "Payment is successful. Your payment id is: ". $arr_payment_data['id'];
} else {
// payment failed: display message to customer
return $response->getMessage();
}
}
}
}För sandlådeläget tillhandahåller Stripe dummy kreditkort för att testa en transaktion.
När du är klar med testning av sandlådeläge, byt ut dina API-nycklar för test mot den levande och din applikation börjar acceptera riktiga betalningar automatiskt.
Det är allt! Ni är alla klara med Stripe Payment Gateway-integrationen i Laravel. Jag skulle vilja höra dina tankar och förslag i kommentarsektionen nedan.
relaterade artiklar
- PayPal Payment Gateway-integration i Laravel
- Authorize.Net Payment Gateway Integration i Laravel
- PayKun Payment Gateway-integration i Laravel