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

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

Імплементація кнопки Apple Pay у вашому React додатку вимагає налаштування компоненту на фронтенді та бекенду для обробки валідації мерчанта і процесу оплати. Ось як це зробити крок за кроком.

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

Налаштування запиту на оплату

Перший крок — це налаштування запиту на оплату через Apple Pay. Це включає в себе деталі, такі як країна, валюта, підтримувані мережі та загальна сума.

const paymentRequest = {  
 countryCode: "US",  
 currencyCode: "USD",  
 supportedNetworks: ["visa", "masterCard", "amex", "discover"],  
 merchantCapabilities: ["supports3DS"],  
 total: {  
 label: "Your Store",  
 amount: "10.00",  
 },  
};  

Обробка валідації мерчанта

Apple Pay вимагає валідації мерчанта перед початком сесії оплати. Ось як обробляється подія onvalidatemerchant.

const handleMerchantValidation = async (event, session, onValidationFailed) => {  
 try {  
 const response = await fetch("/validate-apple-pay", {  
 method: "POST",  
 headers: {  
 "Content-Type": "application/json",  
 },  
 body: JSON.stringify({ validationURL: event.validationURL }),  
 });  
 const merchantSession = await response.json();  
 session.completeMerchantValidation(merchantSession);  
 } catch (error) {  
 console.error("Валідація мерчанта не вдалася:", error);  
 onValidationFailed();  
 }  
};  

Обробка авторизації оплати

Якщо оплата авторизована, відправте токен оплати на ваш бекенд для обробки.

Використовуйте подію onpaymentauthorized, щоб обробити цей крок.

const handlePaymentAuthorization = async (event, session, onPaymentAuthorized) => {  
 try {  
 const response = await fetch("/process-apple-pay", {  
 method: "POST",  
 headers: {  
 "Content-Type": "application/json",  
 },  
 body: JSON.stringify({  
 token: event.payment.token,  
 amount: 1000, // Сума в центах  
 currency: "USD",  
 }),  
 });  
 const result = await response.json();  

 if (result.success) {  
 session.completePayment(ApplePaySession.STATUS_SUCCESS);  
 onPaymentAuthorized();  
 } else {  
 session.completePayment(ApplePaySession.STATUS_FAILURE);  
 }  
 } catch (error) {  
 console.error("Авторизація платежу не вдалася:", error);  
 session.completePayment(ApplePaySession.STATUS_FAILURE);  
 }  
};

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

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

const ApplePayButton = ({ onPaymentAuthorized, onValidationFailed }) => {  
 const handleClick = () => {  
 const session = new ApplePaySession(3, paymentRequest);  

 session.onvalidatemerchant = (event) =>  
 handleMerchantValidation(event, session, onValidationFailed);  

 session.onpaymentauthorized = (event) =>  
 handlePaymentAuthorization(event, session, onPaymentAuthorized);  

 session.begin();  
 };  

 return (  

 Оплатити за допомогою  


 );  
};  

export default ApplePayButton;

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

Ось CSS для стилізації кнопки Apple Pay:

@supports (-webkit-appearance: -apple-pay-button) {  
 .apple-pay-button-with-text {  
 width: 100%;  
 height: 53px;  
 border-radius: 8px;  
 display: inline-block;  
 -webkit-appearance: -apple-pay-button;  
 -apple-pay-button-type: buy;  
 }  
 .apple-pay-button-with-text > * {  
 display: none;  
 }  
 .apple-pay-button-black-with-text {  
 -apple-pay-button-style: black;  
 }  
}  

@supports not (-webkit-appearance: -apple-pay-button) {  
 .apple-pay-button-with-text {  
 display: inline-flex;  
 justify-content: center;  
 font-size: 12px;  
 border-radius: 8px;  
 padding: 0px;  
 box-sizing: border-box;  
 min-width: 200px;  
 min-height: 32px;  
 max-height: 64px;  
 }  
 .apple-pay-button-black-with-text {  
 background-color: black;  
 color: white;  
 }  
 .apple-pay-button-with-text > .text {  
 font-family: -apple-system;  
 font-size: 1em;  
 font-weight: 300;  
 margin-right: 5px;  
 }  
 .apple-pay-button-with-text > .logo {  
 width: 35px;  
 height: 100%;  
 background-size: 100% 60%;  
 background-repeat: no-repeat;  
 background-position: center;  
 }  
}

Крок 3: Налаштування бекенду для валідації мерчанта

Apple Pay вимагає наявність бекенду для валідації мерчанта та авторизації платежів.

Ось як ви можете це реалізувати.

Точка доступу для валідації мерчанта

import https from 'https';  
import fs from 'fs';  
import path from 'path';  

const MERCHANT_ID_CERT = fs.readFileSync(path.resolve(__dirname, './merchant_id.cert.pem'));  
const MERCHANT_ID_KEY = fs.readFileSync(path.resolve(__dirname, './merchant_id.key.pem'));  

export const validateApplePay = (req, res) => {  
 const { validationURL } = req.body;  

 const options = {  
 hostname: new URL(validationURL).hostname,  
 port: 443,  
 path: new URL(validationURL).pathname,  
 method: 'POST',  
 key: MERCHANT_ID_KEY,  
 cert: MERCHANT_ID_CERT,  
 };  

 const appleReq = https.request(options, (appleRes) => {  
 let data = '';  
 appleRes.on('data', (chunk) => (data += chunk));  
 appleRes.on('end', () => res.json(JSON.parse(data)));  
 });  

 appleReq.on('error', (err) => res.status(500).json({ error: err.message }));  
 appleReq.end();  
};

Точка доступу для обробки платежів

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

export const processApplePay = async (req, res) => {  
 const { token, amount, currency } = req.body;  
 try {  
 const paymentIntent = await stripe.paymentIntents.create({  
 amount,  
 currency,  
 payment_method_data: {  
 type: 'card',  
 card: { token },  
 },  
 confirm: true,  
 });  
 res.json(paymentIntent);  
 } catch (err) {  
 res.status(500).json({ error: err.message });  
 }  
};

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

• Додайте компонент ApplePayButton до вашого додатку.
• Переконайтесь, що ваші точки доступу на бекенді (/validate-apple-pay та /process-apple-pay) працюють.
• Тестуйте інтеграцію на пристрої, що підтримує Apple Pay.

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