Przejdź do głównej zawartości

Google Pay

Integracja Google Pay umożliwia klientom płatność za pomoca kart zapisanych na ich koncie Google. Płatność odbywa się natywnie w przeglądarce lub aplikacji, bez konieczności wpisywania danych karty.

Schemat działania​

Krok 1: Rejestracja płatności​

Zarejestruj transakcję standardowo:

curl -X POST https://api-payments.dpay.pl/api/v1_0/payments/register \
  -H "Content-Type: application/json" \
  -d '{
    "transactionType": "transfers",
    "service": "abc123",
    "value": "49.99",
    "url_success": "https://mojsklep.pl/sukces",
    "url_fail": "https://mojsklep.pl/błąd",
    "url_ipn": "https://mojsklep.pl/api/ipn",
    "checksum": "..."
  }'

Zapisz transactionId z odpowiedzi.

Krok 2: Konfiguracja przycisku Google Pay​

Dodaj skrypt Google Pay API i skonfiguruj przycisk na swójej stronie:

<script src="https://pay.google.com/gp/p/js/pay.js"></script>
<div id="google-pay-button"></div>

Konfiguracja JavaScript​

// Konfiguracja Google Pay
const googlePayConfig = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
        allowedCardNetworks: ['VISA', 'MASTERCARD'],
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'aciworldwide',
          gatewayMerchantId: 'YOUR_MERCHANT_ID', // ID wskazane przez BOK dpay
        },
      },
    },
  ],
};

// Konfiguracja zapytania o płatność
const paymentDataRequest = {
  ...googlePayConfig,
  transactionInfo: {
    totalPriceStatus: 'FINAL',
    totalPrice: '49.99',
    currencyCode: 'PLN',
    countryCode: 'PL',
  },
  merchantInfo: {
    merchantName: 'Moj Sklep',
    merchantId: 'BCR2DN4T...', // Twoje Google Merchant ID
  },
};

Inicjalizacja i wyświetlenie przycisku​

let paymentsClient;

async function initGooglePay() {
  paymentsClient = new google.payments.api.PaymentsClient({
    environment: 'PRODUCTION', // lub 'TEST' dla testow
  });

  // Sprawdz, czy Google Pay jest dostępny
  const isReadyToPay = await paymentsClient.isReadyToPay(googlePayConfig);

  if (isReadyToPay.result) {
    const button = paymentsClient.createButton({
      onClick: onGooglePayClicked,
      buttonColor: 'black',
      buttonType: 'pay',
      buttonLocale: 'pl',
    });
    document.getElementById('google-pay-button').appendChild(button);
  }
}

async function onGooglePayClicked() {
  try {
    const paymentData = await paymentsClient.loadPaymentData(paymentDataRequest);
    await processGooglePayPayment(paymentData);
  } catch (error) {
    console.error('Google Pay error:', error);
  }
}

// Inicjalizuj po zaladowaniu strony
google.payments.api.PaymentsClient && initGooglePay();

Krok 3: Wysłanie tokenu do dpay.pl​

Po zatwierdzeniu płatności przez klienta w Google Pay, wyślij otrzymany token do dpay.pl:

POST https://api-payments.dpay.pl/api/v1_0/cards/payment/{transactionId}/pay/google-pay
Content-Type: application/json

Parametry zapytania​

{
  "xPayType": "GOOGLE_PAY",
  "paymentData": {
    "apiVersion": 2,
    "apiVersionMinor": 0,
    "paymentMethodData": {
      "type": "CARD",
      "tokenizationData": {
        "type": "PAYMENT_GATEWAY",
        "token": "... token z Google Pay ..."
      }
    }
  },
  "deviceInfo": {
    "browserJavaEnabled": false,
    "browserLanguage": "pl-PL",
    "browserColorDepth": "24",
    "browserScreenHeight": "1080",
    "browserScreenWidth": "1920",
    "browserTZ": "-60",
    "browserUserAgent": "Mozilla/5.0 ...",
    "browserAcceptHeader": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
    "browserJavascriptEnabled": true
  }
}

JavaScript - przetwarzanie płatności​

async function processGooglePayPayment(paymentData) {
  const transactionId = '...'; // Z Kroku 1

  const deviceInfo = {
    browserJavaEnabled: navigator.javaEnabled ? navigator.javaEnabled() : false,
    browserLanguage: navigator.language || 'pl-PL',
    browserColorDepth: String(screen.colorDepth),
    browserScreenHeight: String(screen.height),
    browserScreenWidth: String(screen.width),
    browserTZ: String(new Date().getTimezoneOffset()),
    browserUserAgent: navigator.userAgent,
    browserAcceptHeader: 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
    browserJavascriptEnabled: true,
  };

  const response = await fetch(`/api/pay/google-pay`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      transactionId,
      paymentData,
      deviceInfo,
    }),
  });

  const result = await response.json();

  if (result.error) {
    alert('Błąd płatności: ' + result.msg);
  } else if (result.redirectType === 'FORM') {
    // Obsługa 3D Secure
    handle3DSRedirect(result);
  } else {
    window.location.href = result.url_success || '/sukces';
  }
}

Serwer (Node.js) - proxy do dpay.pl​

app.post('/api/pay/google-pay', async (req, res) => {
  const { transactionId, paymentData, deviceInfo } = req.body;

  const response = await axios.post(
    `https://api-payments.dpay.pl/api/v1_0/cards/payment/${transactionId}/pay/google-pay`,
    {
      xPayType: 'GOOGLE_PAY',
      paymentData,
      deviceInfo,
    }
  );

  res.json(response.data);
});

Odpowiedz API​

Sukces​

{
  "error": false,
  "status": "paid",
  "transactionId": "abc-def-123-456"
}

3D Secure wymagane​

{
  "error": false,
  "status": "3DS_REQUIRED",
  "redirectType": "FORM",
  "redirectUrl": "https://acs-bank.example.com/3ds",
  "redirectParams": { ... }
}

Środowisko testowe​

Do testow użyj środowiska TEST w konfiguracji Google Pay:

const paymentsClient = new google.payments.api.PaymentsClient({
  environment: 'TEST',
});

W środowisku testowym Google Pay zwraca fikcyjne tokeny, które można wykorzystac do testowania integracji.

Wymagania
  • Twoja strona musi byc dostępna przez HTTPS
  • Musisz posiadać zweryfikowane Google Merchant ID (dla produkcji)
  • Domena musi byc zarejestrowana w Google Pay & Wallet Console