שילוב Google Pay: API, טוקניזציה ועיבוד באתר שלך

שילוב Google Pay: API, טוקניזציה ועיבוד תשלומים באתר שלך

המרות נופלות בקופה? משתמשים נוטשים את העגלה כשהם נתקלים במספר כרטיס בן 16 ספרות, תאריך תפוגה ו-CVV. Google Pay פותר את זה: לחיצה אחת (או הקשה) והתשלום בוצע. אנחנו משלבים את Google Pay באתרים מאז שהטכנולוגיה הופיעה. במהלך הזמן הזה, סיפקנו יותר מ-50 פרויקטים לחנויות על WooCommerce, Laravel, React ו-Next.js. אינטגרציה מלאה אורכת מיומיים.

חיבור Google Pay מעלה את ההמרה ב-20–30% על ידי הפחתת חיכוך. משתמשים עם כרטיסים שמורים ב-Google Wallet משלמים מיידית. עבור בעלי חנויות מקוונות, זה מוריד את שיעור נטישת העגלה. היישום דורש הבנה של ה-API, טוקניזציה ותאימות לשער התשלום שלך. בואו נצלול לאיך עובד Google Pay API, אילו נתונים השרת מקבל, ואיך לעבד את הטוקן.

ה-תיעוד של Google Pay API כולל ספריית JavaScript שבונה את טוקן התשלום.

איך הזרימה עובדת

1. האתר קורא ל-Google Pay API → הדפדפן מציג חלון קופץ מקורי עם בחירת כרטיס מ-Google Wallet.
2. המשתמש מאשר את התשלום (ביומטריה / PIN).
3. Google Pay מחזיר טוקן מוצפן paymentData.
4. האתר שולח את paymentData לשרת שלו.
5. השרת מעביר את הטוקן לשער התשלום לצורך סילוק.

אינטגרציה בצד הלקוח

כלול את JavaScript API:

<script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script> 

יישום בסיסי:

const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
};

const allowedCardNetworks = ['MASTERCARD', 'VISA', 'MIR'];
const allowedCardAuthMethods = ['PAN_ONLY', 'CRYPTOGRAM_3DS'];

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks,
  },
};

// Токенизация через Stripe
const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'stripe',
    'stripe:version': '2023-10-16',
    'stripe:publishableKey': STRIPE_PUBLIC_KEY,
  },
};

const cardPaymentMethod = {
  ...baseCardPaymentMethod,
  tokenizationSpecification,
};

let paymentsClient;

function getGooglePaymentsClient() {
  if (!paymentsClient) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: 'PRODUCTION', // или 'TEST'
    });
  }
  return paymentsClient;
}

async function onGooglePayLoaded() {
  const client = getGooglePaymentsClient();
  const { result } = await client.isReadyToPay({
    ...baseRequest,
    allowedPaymentMethods: [baseCardPaymentMethod],
  });
  if (result) {
    renderGooglePayButton();
  }
}

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    onClick: onGooglePayButtonClicked,
    buttonType: 'buy',
    buttonColor: 'black',
    buttonSizeMode: 'fill',
  });
  document.getElementById('gpay-container').appendChild(button);
}

async function onGooglePayButtonClicked() {
  const paymentDataRequest = {
    ...baseRequest,
    allowedPaymentMethods: [cardPaymentMethod],
    transactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPrice: '14.99',
      currencyCode: 'USD',
      countryCode: 'US',
    },
    merchantInfo: {
      merchantId: 'BCR2DN4TXXXXXXXX', // из Google Pay Business Console
      merchantName: 'Мой магазин',
    },
  };
  try {
    const paymentData = await getGooglePaymentsClient().loadPaymentData(paymentDataRequest);
    await processPayment(paymentData);
  } catch (err) {
    if (err.statusCode !== 'CANCELED') {
      console.error('Google Pay error', err);
    }
  }
}

async function processPayment(paymentData) {
  const token = paymentData.paymentMethodData.tokenizationData.token;
  const response = await fetch('/api/payment/google-pay', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      token,
      orderId: currentOrderId
    }),
  });
  const result = await response.json();
  if (result.success) {
    window.location.href = '/payment/success';
  }
}

עיבוד טוקן בצד השרת באמצעות Stripe

public function processGooglePay(Request $request): JsonResponse {
    $token = $request->input('token');
    $orderId = $request->input('orderId');
    $order = Order::findOrFail($orderId);
    \Stripe\Stripe::setApiKey(config('services.stripe.secret'));
    try {
        $paymentIntent = \Stripe\PaymentIntent::create([
            'amount' => (int)($order->total * 100),
            'currency' => 'usd',
            'payment_method_data' => [
                'type' => 'card',
                'card' => ['token' => json_decode($token)->id],
            ],
            'confirm' => true,
            'return_url' => 'https://example.com/payment/complete',
            'metadata' => ['order_id' => $orderId],
        ]);
        if ($paymentIntent->status === 'succeeded') {
            $order->update(['status' => 'paid', 'transaction_id' => $paymentIntent->id]);
            return response()->json(['success' => true]);
        }
    } catch (\Stripe\Exception\CardException $e) {
        return response()->json(['success' => false, 'error' => $e->getMessage()]);
    }
    return response()->json(['success' => false]);
}

רכיב React עם Google Pay

import { useEffect, useRef } from 'react';
declare const google: any;

export function GooglePayButton({ amount, currency, onSuccess }: {
  amount: string;
  currency: string;
  onSuccess: () => void;
}) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://pay.google.com/gp/p/js/pay.js';
    script.async = true;
    script.onload = initGooglePay;
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, []);

  function initGooglePay() {
    const client = new google.payments.api.PaymentsClient({ environment: 'PRODUCTION' });
    const btn = client.createButton({
      onClick: () => handlePayment(client, amount, currency, onSuccess)
    });
    containerRef.current?.appendChild(btn);
  }

  return <div ref={containerRef} />;
}

רישום ב-Google Pay Business Console

לשימוש בייצור, יש צורך:

1. לרשום את האתר שלך ב-Google Pay Business Console.
2. לעבור את רשימת הבדיקות לאינטגרציה.
3. לקבל <script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script> (בפורמט const baseRequest = { apiVersion: 2, apiVersionMinor: 0, }; const allowedCardNetworks = ['MASTERCARD', 'VISA', 'MIR']; const allowedCardAuthMethods = ['PAN_ONLY', 'CRYPTOGRAM_3DS']; const baseCardPaymentMethod = { type: 'CARD', parameters: { allowedAuthMethods: allowedCardAuthMethods, allowedCardNetworks, }, }; // Токенизация через Stripe const tokenizationSpecification = { type: 'PAYMENT_GATEWAY', parameters: { gateway: 'stripe', 'stripe:version': '2023-10-16', 'stripe:publishableKey': STRIPE_PUBLIC_KEY, }, }; const cardPaymentMethod = { ...baseCardPaymentMethod, tokenizationSpecification, }; let paymentsClient; function getGooglePaymentsClient() { if (!paymentsClient) { paymentsClient = new google.payments.api.PaymentsClient({ environment: 'PRODUCTION', // или 'TEST' }); } return paymentsClient; } async function onGooglePayLoaded() { const client = getGooglePaymentsClient(); const { result } = await client.isReadyToPay({ ...baseRequest, allowedPaymentMethods: [baseCardPaymentMethod], }); if (result) { renderGooglePayButton(); } } function renderGooglePayButton() { const button = getGooglePaymentsClient().createButton({ onClick: onGooglePayButtonClicked, buttonType: 'buy', buttonColor: 'black', buttonSizeMode: 'fill', }); document.getElementById('gpay-container').appendChild(button); } async function onGooglePayButtonClicked() { const paymentDataRequest = { ...baseRequest, allowedPaymentMethods: [cardPaymentMethod], transactionInfo: { totalPriceStatus: 'FINAL', totalPrice: '14.99', currencyCode: 'USD', countryCode: 'US', }, merchantInfo: { merchantId: 'BCR2DN4TXXXXXXXX', // из Google Pay Business Console merchantName: 'Мой магазин', }, }; try { const paymentData = await getGooglePaymentsClient().loadPaymentData(paymentDataRequest); await processPayment(paymentData); } catch (err) { if (err.statusCode !== 'CANCELED') { console.error('Google Pay error', err); } } } async function processPayment(paymentData) { const token = paymentData.paymentMethodData.tokenizationData.token; const response = await fetch('/api/payment/google-pay', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token, orderId: currentOrderId }), }); const result = await response.json(); if (result.success) { window.location.href = '/payment/success'; } } ).

במצב בדיקה (public function processGooglePay(Request $request): JsonResponse { $token = $request->input('token'); $orderId = $request->input('orderId'); $order = Order::findOrFail($orderId); \Stripe\Stripe::setApiKey(config('services.stripe.secret')); try { $paymentIntent = \Stripe\PaymentIntent::create([ 'amount' => (int)($order->total * 100), 'currency' => 'usd', 'payment_method_data' => [ 'type' => 'card', 'card' => ['token' => json_decode($token)->id], ], 'confirm' => true, 'return_url' => 'https://example.com/payment/complete', 'metadata' => ['order_id' => $orderId], ]); if ($paymentIntent->status === 'succeeded') { $order->update(['status' => 'paid', 'transaction_id' => $paymentIntent->id]); return response()->json(['success' => true]); } } catch (\Stripe\Exception\CardException $e) { return response()->json(['success' => false, 'error' => $e->getMessage()]); } return response()->json(['success' => false]); } ), אין צורך ב-import { useEffect, useRef } from 'react'; declare const google: any; export function GooglePayButton({ amount, currency, onSuccess }: { amount: string; currency: string; onSuccess: () => void; }) { const containerRef = useRef<HTMLDivElement>(null); useEffect(() => { const script = document.createElement('script'); script.src = 'https://pay.google.com/gp/p/js/pay.js'; script.async = true; script.onload = initGooglePay; document.head.appendChild(script); return () => { document.head.removeChild(script); }; }, []); function initGooglePay() { const client = new google.payments.api.PaymentsClient({ environment: 'PRODUCTION' }); const btn = client.createButton({ onClick: () => handlePayment(client, amount, currency, onSuccess) }); containerRef.current?.appendChild(btn); } return <div ref={containerRef} />; } ולא מתבצעים חיובים אמיתיים. ניתן להוסיף כרטיסי בדיקה ל-Google Pay Sandbox. תהליך הבדיקה עם Google אורך 1–3 ימי עסקים.

למה לשלב את Google Pay?

Google Pay אינו דורש אימות דומיין, עובד על Android ו-Windows. עבור חנויות עם נתח גבוה של תנועה ניידת, זה קריטי. הטוקן אינו מכיל את מספר הכרטיס — האבטחה גבוהה יותר מאחסון קודי BIN. זמן התשלום הממוצע יורד מ-30 ל-5 שניות. השוואה: טופס הזנת כרטיס אורך לפחות 30 שניות, בעוד Google Pay אורך פחות מ-10. זה מעלה את ההמרה ב-20–30%.

איך להבטיח אבטחת תשלומים?

Google Pay מחזיר טוקן מוצפן שרק שער התשלום שלך יכול לפענח. אין צורך לאחסן נתוני כרטיס בצד השרת. האינטגרציה תואמת PCI DSS כאשר משתמשים בשער מוסמך.

Google Pay לעומת Apple Pay באינטרנט

Google Pay חלש יותר ב-iOS אבל מכסה קהל גדול יותר בזכות Android.

רשימת בדיקות לאינטגרציה

מה כוללת העבודה

• בדיקה טכנית של העגלה ומערכת התשלומים שלך
• הגדרת Google Pay Business Console וקבלת merchantId
• פיתוח הצד של הלקוח (כפתור, קריאת API, טיפול בתגובה)
• אינטגרציה עם שער התשלום שלך
• עיבוד טוקן בצד השרת ועדכון סטטוס ההזמנה
• בדיקות ב-Sandbox ובייצור
• תיעוד והוראות למפתח שלך
• אחריות תמיכה ל-30 יום לאחר ההשקה

לוחות זמנים ועלות

אינטגרציה בסיסית אורכת 2–5 ימי עסקים. העלות מחושבת באופן אישי — צור קשר ואנחנו נעריך את הפרויקט שלך תוך יום.

למה לבחור בנו

אנחנו משלבים מערכות תשלום כבר למעלה מ-5 שנים, השלמנו יותר מ-50 פרויקטים, ועובדים עם Stripe, Adyen, Checkout.com. אנחנו מספקים אחריות על כל העבודה. המהנדסים שלנו מחזיקים בהסמכות Google Pay.

קבל ייעוץ — פנה אלינו דרך Telegram או דוא"ל.