Платежные системы. Stripe

Как и обещал в предыдущей статье Платежные системы — кратко познакомлю с платежным шлюзом Stripe.

Stripe без Woocommerce

Допустим, вам нужно с сайта получать электронные платежи. И сайт этот не на WordPress, либо необходимо выполнять какую-либо кастомную задачу без управления Woocommerce. Заказчик продает такой товар, с таким диким числом динамически меняющихся параметров ( был опыт с продажей еды, подсчет калорий, выбор из меню, по дням, по неделям ), что проще сделать кастомно, не привлекая стандартный функционал интернет магазина. И вот собрали все параметры, сделали заказ, и.. нет у нас готового Woocommerce Stripe. Стало быть нужно сделать платеж самим. Здесь на помощь хорошо подойдет Stripe. Функционал очень гибкий, и обширный.

 

Платежная форма на странице

Для начала сходим на офф сайт и  возьмем пример кода оттуда.


‹form id="payment-form" action="/charge" method="post"› 
‹div class="form-row"›

‹label for="card-element"› Credit or debit card ‹/label›
‹div class="form-group"›

‹!-- Немного модифакнем добавив поле Amount (Количество условных тугриков) --›
‹div class="form-group"›‹label for="amount"›Amount:‹/label›
  ‹input id="amount" class="form-control" name="amount" required="required" type="text" value="" /›
‹/div›
‹!-- --›

‹/div›
 
‹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›

‹/form›

Форма готова. Надо вдохнуть в нее жизнь.

В файле functions.php подключим Stripe script и наш вспомогательный.

Для начала создадим ‘stripe-our-script.js’  и скопипастим туда из примера:



//  Функция отправки данных Ajax на сервер
function sendData( token ){

	$.ajax({
        method: "POST",
        url:  my_ajax.url,
        data: { 
        	action: 'send_stripe', 
        	token: token,
        	amount: $('#amount').val()
        	 },
        beforeSend:function(){
          
        }
      })
        .done(function( res ) {
         console.log( res );
             // Здесь выполняем дальнейшие действия после оплаты
        })
}

var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh'); // Ключ после испытаний меняется на Live (клянчим у заказчика, либо ключи либо доступы в конуру-личный кабинет Stripe)

// Create an instance of Elements
var elements = stripe.elements();

// Стили формы
var style = {
  base: {
    color: '#32325d',
    lineHeight: '24px',
    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});

// смонтируем объект Stripe card к нашему Div в форме
card.mount('#card-element');  

// Здесь можно сократить код написав это на Jquery
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 {
     // 
      sendData( result.token ); // пошлем данные из формы на сервер с готовым токеном
    }
  });
});

 


add_action( 'wp_enqueue_scripts', function(){
	wp_enqueue_script( 'stripe-script', 'https://js.stripe.com/v3/');
	wp_enqueue_script( 'stripe-our-script', get_template_directory_uri() . '/js/stripe-our-script.js', array('stripe-script'), '1.0', true);
        wp_localize_script( 'stripe-our-script', 'my_ajax', 
		array(
			'url' => admin_url('admin-ajax.php')
		)
	);  
});

все получилось форма задышала.

Пишем серверную часть. Получим данные:

/* предварительно качаем SDK STRIPE PHP
   
    composer require stripe/stripe-php
   
   и подключим его
*/
 require_once('vendor/autoload.php');

add_action('wp_ajax_send_stripe','send_stripe');
add_action( 'wp_ajax_nopriv_send_stripe', 'send_stripe' );

function send_stripe(){

	\Stripe\Stripe::setApiKey("sk_test_BQokikJOvBiI2HlWgH4olfQ2"); 
	// После испытаний меняем на Live Key, клянчим у заказчика
	// sk_live_BQokikJOvBiI2HlWgH4olfQ2

	// опускаем валидаицю данных
	$token = $_POST['token']; // встретим наш токен
	$amount = $_POST['amount']*100; 
	// нужно умножить Amount на 100, почему то в Stripe считают, что из формы приходят центы

	try{
		$charge = \Stripe\Charge::create(array(
		  "amount" =› $amount,
		  "currency" =› "usd",
		  "description" =› "Example charge",
		  "source" =› $token,
		));

	if( $charge-›status === 'succeeded' ) { /* Успешный платеж, пишем в базу, трубим и т.д. */ }
		// полюбопытствуйте что вам вернул сервер Stripe
		echo "‹pre›";
			print_r( $charge );
		echo "‹/pre›";

		echo "Payment Ok";
	}catch(Exception $e){
		echo $e-›getMessage(); // Если чтото пошло не так - уведомим юзера
	}

	die(); // это же Ajax
}

Вот и все!
Спасибо за внимание!

One Reply to “Платежные системы. Stripe”

  1. Интересная статья.
    Ничего лишнего и все понятно.
    А можно еще примеров? К примеру, можно ли организовать подписку через Stripe?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *