Integração do Stripe Payment Gateway no Laravel
Se você estiver administrando uma loja online ou algum tipo de serviço pago, provavelmente precisará aceitar pagamentos com cartão de crédito em seu aplicativo. O Stripe é um dos mais populares métodos de pagamento que aceita pagamentos online com cartão de crédito ou débito. Além disso, o usuário não precisa sair do seu site para efetuar o pagamento com cartão. Neste artigo, estudamos a integração do gateway de pagamento Stripe no Laravel.
Para integrar o Stripe gateway no Laravel, vamos usar a biblioteca Omnipay, que é popular entre os desenvolvedores. Portanto, sem mais delongas, vamos começar com nossa integração.
Obtenha chaves de API para integração com Stripe
Primeiro, você precisa criar uma conta Stripe, se ainda não tiver uma. Para integrar o gateway Stripe, você primeiro precisa obter sua chave secreta e publicável. Você obterá essas chaves na página Desenvolvedores-> Chaves de API.
É sempre recomendável testar as transações online primeiro com as chaves da sandbox e, se tudo funcionar bem, use as chaves ativas.
Configuração básica no Laravel para integração com Stripe
Antes de começar a aceitar pagamentos online usando Stripe, você precisa realizar uma configuração básica. Exigiremos chaves de distribuição durante a integração da API, portanto, adicione essas chaves no .envarquivo.
STRIPE_PUBLISHABLE_KEY=PASTE_PUBLISHABLE_KEY
STRIPE_SECRET_KEY=PASTE_SECRET_KEY
STRIPE_CURRENCY=USDSempre que adicionarmos novas constantes no arquivo de ambiente, devemos executar o comando abaixo para limpar o cache de configuração.
php artisan config:cacheQuando se trata de pagamentos online, deve-se armazenar os detalhes da transação no banco de dados. Para isso, crie uma migração usando o comando:
php artisan make:migration create_payments_tableNo arquivo de migração, edite o upmétodo da seguinte maneira:
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();
});
}Em seguida, execute o comando abaixo para executar a migração.
php artisan migrateExigiremos um formulário HTML onde o usuário pode inserir os detalhes do cartão e outras informações. Crie um payment.blade.phparquivo e adicione o código abaixo nele.
<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>No arquivo blade, incluímos arquivos CSS e JS diretamente. Você pode incluí-lo de outra forma de acordo com o fluxo do projeto. Finalmente, defina as rotas como segue.
rotas / web.php
Route::get('/payment', 'PaymentController@index');
Route::post('/charge', 'PaymentController@charge');Criaremos o controlador PaymentControllernas próximas etapas.
Gerar Elementos de Cartão Stripe
O Stripe fornece seus próprios componentes de interface do usuário pré-construídos que coletam dados do cartão do cliente com segurança, sem manipular dados confidenciais. Os detalhes do cartão são convertidos em ‘Token’, que precisa ser enviado aos seus servidores. Usando este ‘Token’ você pode cobrar dos clientes. Esta é uma forma segura, pois seu aplicativo não precisa armazenar ou interagir com os detalhes do cartão do cliente.
Você deve ter notado no arquivo blade que incluímos card.js. Crie este arquivo JS no diretório público e adicione o código abaixo a ele.
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();
}O arquivo blade também inclui o style.cssarquivo. Crie style.cssdentro da pasta pública. Este CSS terá o código abaixo.
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;
}O Stripe fornece diferentes tipos de elementos de IU para a construção de um formulário de checkout com detalhes de cartão de crédito. Leia mais sobre isso em sua documentação.
Integração do Stripe Payment Gateway no Laravel
Todos nós configuramos com a configuração necessária. Agora podemos ir em frente e integrar o gateway de pagamento Stripe no Laravel. Execute o comando abaixo para instalar a biblioteca Omnipay em seu projeto.
composer require league/omnipay omnipay/stripePara chamar o arquivo blade e cobrar a transação, crie um PaymentControllerusando o comando artisan:
php artisan make:controller PaymentControllerComo devemos armazenar os detalhes da transação no banco de dados, crie um modelo Paymentque esteja associado à tabela de pagamentos no banco de dados.
php artisan make:model PaymentPor fim, PaymentController.phpterá o seguinte código que cobra a transação e insere os detalhes da transação em seu banco de dados.
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();
}
}
}
}Para o modo sandbox, o Stripe fornece cartões de crédito fictícios para testar uma transação.
Quando terminar de testar o modo sandbox, substitua suas chaves de API de teste por uma ao vivo e seu aplicativo começará a aceitar pagamentos reais automaticamente.
É isso! Você concluiu a integração do gateway de pagamento Stripe no Laravel. Eu gostaria de ouvir seus pensamentos e sugestões na seção de comentários abaixo.
Artigos relacionados
- Integração de gateway de pagamento PayPal no Laravel
- Authorize.Net Payment Gateway Integration no Laravel
- Integração de gateway de pagamento PayKun no Laravel