✅ Notícias, temas e plug-ins da WEB e do WordPress. Aqui compartilhamos dicas e as melhores soluções para sites.

Integração do Stripe Payment Gateway no Laravel

79

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=USD

Sempre que adicionarmos novas constantes no arquivo de ambiente, devemos executar o comando abaixo para limpar o cache de configuração.

php artisan config:cache

Quando 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_table

No 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 migrate

Exigiremos 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', '[email protected]'); Route::post('/charge', '[email protected]');

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/stripe

Para chamar o arquivo blade e cobrar a transação, crie um PaymentControllerusando o comando artisan:

php artisan make:controller PaymentController

Como 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 Payment

Por 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

Fonte de gravação: artisansweb.net

Este site usa cookies para melhorar sua experiência. Presumiremos que você está ok com isso, mas você pode cancelar, se desejar. Aceitar Consulte Mais informação