Покрокова інструкція з впровадження платежів Stripe у React та PHP - javascript.org.ua

У цьому блозі ви дізнаєтесь, як безшовно інтегрувати обробку платежів через Stripe у вашій веб-застосунку, використовуючи React на фронтенді та PHP на бекенді. Ми охопимо все: від налаштування вашого акаунту Stripe до безпечної обробки платіжних намірів та транзакцій. Незалежно від того, чи ви початківець чи досвідчений розробник, цей посібник надасть чітку дорожню карту для створення безпечного та зручного рішення для обробки платежів.

Крок 1: Налаштування акаунту Stripe.

1. Реєстрація

Якщо ви плануєте впровадити платіжну систему Stripe у вашій веб-застосунку, перший крок — це правильно налаштувати ваш акаунт Stripe. Це гарантує безпечний і плавний процес оплати для ваших користувачів. Нижче наведено покрокову інструкцію, яка допоможе вам почати.

Для початку відвідайте сайт Stripe і виконайте ці прості кроки:

Реєстрація: Натисніть на кнопку Sign Up і надайте вашу електронну пошту, ім'я та безпечний пароль.
Перевірка акаунту: Підтвердіть вашу електронну пошту, натиснувши на підтверджувальне посилання, яке надішле Stripe.

2. Заповніть інформацію про бізнес.

Щоб почати обробку платежів, Stripe вимагає надання основної інформації про ваш бізнес:

Назва бізнесу: Вкажіть офіційну назву вашого бізнесу.
Адреса бізнесу: Введіть точну інформацію про місце знаходження вашого бізнесу.
Інформація про банківський рахунок: Додайте дані вашого банківського рахунку для отримання виплат.
Деталі продуктів/послуг: Дайте короткий опис продуктів або послуг, які ви будете пропонувати.

Надання точної інформації забезпечить ефективну обробку транзакцій та виплати.

3. Отримання API ключів

Stripe надає API ключі для безпечного з'єднання вашого фронтенду та бекенду.

Перейдіть до Dashboard > Developers > API Keys.

Там ви знайдете два типи ключів:

Publishable Key: Використовується на фронтенді для ідентифікації вашого акаунту Stripe.
Secret Key: Використовується на бекенді для аутентифікації безпечних API запитів.

Натисніть Reveal Test Key, щоб побачити та скопіювати ваш секретний ключ під час тестування.

Крок 2: Налаштування проекту для інтеграції Stripe

Після того, як ваш акаунт Stripe буде готовий, наступний крок — це налаштування середовища проекту для фронтенд і бекенд розробки. Це забезпечить наявність необхідної структури для обробки платежів.

**** Встановіть необхідні інструменти за допомогою вашого браузера.**

Node(LTS): https://nodejs.org/en
Composer: https://getcomposer.org/download/
XAMPP: https://www.apachefriends.org/download.html

1. Фронтенд: Створення React-застосунку

Щоб почати роботу з React:

Відкрийте термінал і виконайте наступну команду для створення нового додатка React:

npx create-react-app stripe-payment-app

Перейдіть до директорії проекту:

cd stripe-payment-app

Запустіть сервер розробки:

npm start

Ваш додаток відкриється в браузері за адресою http://localhost:3000/

2. Бекенд: Налаштування PHP сервера

Організуйте ваші файли бекенду в окремій директорії, наприклад stripe-backend (я рекомендую робити це в C:\xampp\htdocs) і встановіть бібліотеку Stripe для PHP.

composer require stripe/stripe-php

Додайте точку доступу на вашому сервері, яка створює Checkout Session. Checkout Session керує тим, що ваш клієнт бачить на сторінці оплати, такими як елементи замовлення, сума і валюта замовлення та доступні способи оплати.
Ми за замовчуванням активуємо карти та інші поширені методи оплати для вас, і ви можете вмикати або вимикати методи оплати безпосередньо в Панелі керування Stripe.

checkout->sessions->create([  
 'line_items' => [[  
 'price_data' => [  
 'currency' => 'usd',  
 'product_data' => [  
 'name' => 'Annexures',  
 'description' => $description,  
 ],  
 'unit_amount' => $amount,  
 ],  
 'quantity' => $data['quantity'],  
 ]],  
 'mode' => 'payment',  
 'success_url' => $YOUR_DOMAIN . '?success=true',  
 'cancel_url' => $YOUR_DOMAIN . '?success=false',  
]);  

$session_id = $checkout_session->id; // Session ID from the created session  
// Зберігайте Session в базі даних для подальших користувачів (рекомендується MySQL)  

header("HTTP/1.1 303 See Other");  
header("Location: " . $checkout_session->url);

3. Фронтенд: Оновлення App.tsx.

Створення інтуїтивно зрозумілого та безпечного інтерфейсу для обробки платежів (UI) є важливим для плавного користувацького досвіду. Цей крок допоможе вам налаштувати компоненти Stripe та обробляти логіку платіжної форми у вашій React-застосунку.

import React, { useState, useEffect } from "react";  
import "./App.css";  

const ProductDisplay = () => (  

Stubborn Attachments
$20.00
    Checkout            
   );      const Message = ({ message }) => (    
{message}
   );      export default function App() {    const [message, setMessage] = useState("");       useEffect(() => {    // Check to see if this is a redirect back from Checkout    const query = new URLSearchParams(window.location.search);       if (query.get("success")) {    setMessage("Замовлення розміщено! Ви отримаєте підтвердження по електронній пошті.");    }       if (query.get("canceled")) {    setMessage(    "Замовлення скасовано — продовжуйте покупки та здійсніть оплату, коли будете готові."    );    }    }, []);       return message ? (        ) : (        );   }

Створивши зручну форму оплати для користувачів і безпечно інтегруючи її з Stripe, ви забезпечите можливість здійснювати платежі без зайвих зусиль. Наступний крок буде спрямований на бекенд-логіку для обробки платіжних намірів та підтверджень.

Крок 4: Перевірка та підтвердження транзакції

Забезпечення правильної перевірки та підтвердження транзакцій є важливим для безпечної та надійної платіжної системи. Цей крок зосереджений на обробці відповідей транзакцій від Stripe та забезпеченні безпомилкової обробки.

Приклад PHP-коду для підтвердження платежу:

function getTransactionDetailesByIntent($conn,$data){       
 $session_id = // отримати session Id з вашої бази даних.    
 $stripe = new \Stripe\StripeClient($stripe_secret);    
 $session = $stripe->checkout->sessions->retrieve($session_id);    
 $payment_intent_id = $session->payment_intent; // Отримуємо Payment Intent ID    
 // нижче код для отримання деталей наміру    
 $paymentIntent = \Stripe\PaymentIntent::retrieve($data['intentId']);    
 echo $paymentIntent.status;    
 // після перевірки статусу видаліть session id з бази даних.   
}

Перевіряючи транзакції, ви забезпечуєте надійний платіжний досвід для ваших користувачів.

Перекладено з: Step-by-Step Guide to Implement Stripe Payments in React and PHP