Додавання кнопки Google Pay до React з підтримкою з боку бекенду

згенероване зображення grok

Google Pay — потужний метод оплати для вашого додатку. У цьому посібнику ми розглянемо, як реалізувати кнопку Google Pay у вашому React-додатку, охоплюючи як фронтенд, так і бекенд етапи.

Крок 1: Фронтенд кнопка Google Pay

Конфігурація запиту на оплату Google Pay

Почнімо з створення запиту на оплату Google Pay. Цей запит визначає такі деталі, як дозволені методи оплати, деталі транзакції та інформація про продавця.

const googlePayClient = new google.payments.api.PaymentsClient({  
 environment: "TEST", // Змініть на 'PRODUCTION', коли будете готові  
});  

const paymentRequest = {  
 apiVersion: 2,  
 apiVersionMinor: 0,  
 allowedPaymentMethods: [  
 {  
 type: "CARD",  
 parameters: {  
 allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],  
 allowedCardNetworks: ["VISA", "MASTERCARD"],  
 },  
 tokenizationSpecification: {  
 type: "PAYMENT_GATEWAY",  
 parameters: {  
 gateway: "example", // Замініть на ваш платіжний шлюз  
 gatewayMerchantId: "exampleMerchantId", // Замініть на ваш ідентифікатор продавця  
 },  
 },  
 },  
 ],  
 transactionInfo: {  
 totalPriceStatus: "FINAL",  
 totalPrice: "10.00",  
 currencyCode: "USD",  
 },  
 merchantInfo: {  
 merchantId: "YOUR_MERCHANT_ID", // Замініть на ваш Google Pay ідентифікатор продавця  
 merchantName: "Your Store",  
 },  
};

Перевірка доступності Google Pay

Перед рендерингом кнопки перевірте, чи доступний Google Pay на пристрої користувача.

const checkGooglePayAvailability = async () => {  
 const isReadyToPay = await googlePayClient.isReadyToPay({  
 apiVersion: 2,  
 apiVersionMinor: 0,  
 allowedPaymentMethods: paymentRequest.allowedPaymentMethods,  
 });  
 return isReadyToPay.result;  
};

Обробка натискання кнопки

Обробляємо натискання кнопки для створення запиту на платіжні дані та обробки відповіді.

const handleGooglePayClick = async () => {  
 try {  
 const paymentData = await googlePayClient.loadPaymentData(paymentRequest);  

 // Надсилаємо платіжний токен на ваш бекенд для обробки  
 const response = await fetch("/process-google-pay", {  
 method: "POST",  
 headers: { "Content-Type": "application/json" },  
 body: JSON.stringify({ token: paymentData.paymentMethodData.tokenizationData.token }),  
 });  

 const result = await response.json();  

 if (result.success) {  
 alert("Оплата успішна!");  
 } else {  
 alert("Оплата не вдалася. Спробуйте ще раз.");  
 }  
 } catch (error) {  
 console.error("Помилка Google Pay:", error);  
 alert("Процес оплати не вдався.");  
 }  
};

Повний компонент кнопки Google Pay

Об’єднайте наведені вище фрагменти в повний компонент.

const GooglePayButton = () => {  
 const [isAvailable, setIsAvailable] = React.useState(false);  

 React.useEffect(() => {  
 checkGooglePayAvailability().then(setIsAvailable);  
 }, []);  

 if (!isAvailable) return null;  

 return (  
   <button className="google-pay-button" onClick={handleGooglePayClick}>  
     Оплатити через Google  
   </button>  
 );  
};  

export default GooglePayButton;

Крок 2: Стилізація кнопки Google Pay

Ось простий CSS для кнопки Google Pay:

.google-pay-button {  
 background-color: #4285f4;  
 color: white;  
 border: none;  
 padding: 10px 20px;  
 border-radius: 4px;  
 font-size: 16px;  
 cursor: pointer;  
 display: inline-flex;  
 align-items: center;  
 justify-content: center;  
}  
.google-pay-button:hover {  
 background-color: #357ae8;  
}  
.google-pay-button:active {  
 background-color: #2a65c8;  
}

Крок 3: Налаштування бекенду для обробки платежів

Google Pay вимагає бекенд для обробки платіжного токену.
Ось як це налаштувати.

Точка обробки платежів

Ось приклад обробки токену за допомогою Stripe.

import Stripe from "stripe";  
const stripe = new Stripe("your-stripe-secret-key");  

export const processGooglePay = async (req, res) => {  
 const { token } = req.body;  
 try {  
 const paymentIntent = await stripe.paymentIntents.create({  
 amount: 1000, // Сума в центах  
 currency: "USD",  
 payment_method_data: {  
 type: "card",  
 card: { token },  
 },  
 confirm: true,  
 });  
 res.json({ success: true, paymentIntent });  
 } catch (error) {  
 console.error("Помилка обробки платежу:", error);  
 res.status(500).json({ success: false, error: error.message });  
 }  
};

Крок 4: Тестування інтеграції

1. Додайте компонент GooglePayButton до вашого React додатку.
2. Переконайтеся, що ваш бекенд-ендпоінт (/process-google-pay) працює та доступний.
3. Протестуйте кнопку в браузері, який підтримує Google Pay, з тестовим платіжним профілем.

Перекладено з: Adding a Google Pay Button to React with Backend Support