Google Pay – MSolution Gateway ilə sürətli start
Google Pay ödənişlərini MSolution SDK-sı ilə birləşdirin: hazır <msolution-googlepay-button> elementi, session yaradılması, tokenin backend-ə ötürülməsi və event-lər bir səhifədə.
Sürətli start
- Google Pay JS və MSolution Google Pay SDK fayllarını səhifəyə əlavə edin.
- Ödəniş məbləği üçün session yaradıb sessionId, signature və publicKey qaytaran backend endpoint təmin edin.
- Çox sadə: <msolution-googlepay-button> elementini yerləşdirin, createSession funksiyasını setConfig ilə ötürün, event-lərə qulaq asın.
1) Skriptləri əlavə edin
<script async src="https://pay.google.com/gp/p/js/pay.js"></script>
<script async src="https://sdk.msolution.az/google/v1.0/msolution-google-pay-sdk.js"></script>2) Button və createSession nümunəsi
<msolution-googlepay-button
id="gpay-btn"
amount="12.50"
currency="AZN"
country="AZ"
label="Order #1024"
google-environment="TEST"
process-environment="TEST"
locale="az"
></msolution-googlepay-button>
<script>
const btn = document.getElementById("gpay-btn");
const SESSION_ENDPOINT = "/api/payments/google/session"; // YOUR SESSION API ENDPOINT (merchant backend)
btn.setConfig({
getAmount: () => 12.5, // or a dynamic total
currency: "AZN",
country: "AZ",
googleEnvironment: "TEST", // switch to PRODUCTION in live
processEnvironment: "TEST",
// Backend call that returns sessionId, signature, publicKey
async createSession({ amount, currency, country }) {
const res = await fetch(SESSION_ENDPOINT, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ amount, currency, country }),
});
if (!res.ok) throw new Error("Session alınmadı");
return res.json();
},
});
btn.addEventListener("payment-success", (e) => {
console.log("Payment success", e.detail);
});
btn.addEventListener("payment-error", (e) => {
console.error("Payment error", e.detail);
});
</script>Konfiqurasiya parametrləri
Vacib
amount/getAmount()— məbləğ (2 decimal).currency— standart AZN (AZN/944 dəstəklənir).country— standart AZ.googleEnvironment— TEST | PRODUCTION (Google Pay UI mühiti).processEnvironment— TEST | PRODUCTION (token MSolution backend endpoint-i).createSession()— sessionId, signature, publicKey qaytaran backend çağırışı.
Opsional
label,merchantName,transactionId.backendUrl— default MSolution endpoint; gateway URL-i veriləndə override edin.button-color,button-type,button-size-mode,localeatributları ilə UI.
Gateway inteqrasiyası (tövsiyə olunur)
Gateway axınında Google Pay UI üçün google-environment, MSolution prosesi üçün isə process-environment ayırmaq mümkündür. Session backend-də yaradılır və token MSolution gateway API-ə ötürülür.
- 1) Frontend: <msolution-googlepay-button> Google Pay token-i alır, sessionId/signature/publicKey backend-dən gəlir.
- 2) Backend: createSession endpoint-i order/məbləğ üzrə sessionId, signature, publicKey qaytarır.
- 3) Frontend: Google Pay token-i + sessionId + signature MSolution gateway API-ə POST edilir (SDK bunu avtomatik edir).
- 4) Gateway: tokeni dekript edib prosessinqə yönləndirir, nəticəni qaytarır.
- 5) Backend cavabı: success, message, transactionId, redirectLink/receiptUrl (əgər varsa).
- 6) Frontend: payment-success | payment-error event-lərinə uyğun UI davranışı göstərilir.
<script src="https://pay.google.com/gp/p/js/pay.js" async></script>
<script src="https://sdk.msolution.az/google/v1.0/msolution-google-pay-sdk.js" defer></script>
<msolution-googlepay-button
id="gpay-btn"
google-environment="PRODUCTION"
process-environment="PRODUCTION"
button-color="black"
button-type="pay"
button-size-mode="fill"
locale="az"
/>
<script>
const btn = document.getElementById("gpay-btn");
document.addEventListener("msolution-googlepay-ready", () => {
btn.setConfig({
getAmount: () => 19.99,
currency: "AZN",
country: "AZ",
label: "Order #1050",
merchantName: "Your Brand",
// Gateway: session is created on backend and response returned
async createSession({ amount, currency, country }) {
const res = await fetch("/api/payments/google/session", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ amount, currency, country }),
});
if (!res.ok) throw new Error("Session alınmadı");
return res.json(); // { sessionId, signature, publicKey, ... }
},
});
});
document.addEventListener("payment-success", (e) => console.log(e.detail));
document.addEventListener("payment-error", (e) => console.error(e.detail));
</script>Production gateway nümunəsi
<!-- Frontend (recommended gateway flow) -->
<script async src="https://pay.google.com/gp/p/js/pay.js"></script>
<script async src="https://sdk.msolution.az/google/v1.0/msolution-google-pay-sdk.js"></script>
<msolution-googlepay-button
id="gpay-prod"
google-environment="PRODUCTION"
process-environment="PRODUCTION"
button-color="black"
button-type="pay"
button-size-mode="fill"
locale="az"
></msolution-googlepay-button>
<script>
const btn = document.getElementById("gpay-prod");
document.addEventListener("msolution-googlepay-ready", () => {
btn.setConfig({
getAmount: () => window.checkoutTotal, // dynamic total
currency: window.checkoutCurrency || "AZN",
country: "AZ",
label: "Order #" + window.orderNumber,
merchantName: "Your Brand",
googleEnvironment: "PRODUCTION",
processEnvironment: "PRODUCTION",
async createSession({ amount, currency, country }) {
const res = await fetch("/api/payments/google/session", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ amount, currency, country }),
});
if (!res.ok) throw new Error("Session failed");
return res.json(); // { sessionId, signature, publicKey, ... }
},
});
});
document.addEventListener("payment-success", (e) => {
const { redirectLink, receiptUrl } = e.detail || {};
if (redirectLink) return (window.location = redirectLink);
if (receiptUrl) return window.open(receiptUrl, "_blank");
// fallback UI
alert("Payment successful");
});
document.addEventListener("payment-error", (e) => {
const { error, isUserAction } = e.detail || {};
if (isUserAction) return; // user cancelled
alert(error || "Payment error");
});
</script>Gateway API sorğusu
gateway endpoint: https://pay.msolution.az/eComIntegration/api/v1/google-pay/process-wallet-payment
method: POST
Content-Type: application/json
{
"sessionId": "<sessionId-from-createSession>",
"signature": "<signature-from-createSession>",
"data": { /* Google Pay token object (ECv2) */ }
}
// Nümunə cavab:
{
"success": true,
"message": "Payment processed",
"transactionId": "TX123456",
"redirectLink": "https://your-site.com/thank-you",
"receiptUrl": "https://pay.msolution.az/receipt/abc",
"amount": "19.99"
}Event-lər
msolution-googlepay-ready
SDK yükləndikdən sonra document üzərinə dispatch olunur.
payment-start
Düymə klikində config detalı ilə element üzərində fired.
payment-success
<detail> sahəsində backend cavabı, amount, currency, transactionId, receiptUrl (əgər varsa).
payment-error
<detail.error>, <code>code</code> və <code>isUserAction</code> flag-ləri ilə fired.
Backend session nümunəsi
// Express nümunəsi (server-side)
app.post("YOUR_SESSION_API_ENDPOINT", async (req, res) => {
const { amount, currency, country } = req.body;
// TODO: sifariş doğrulaması, məbləğ hesablama, loglama
const session = await createGatewaySession({
amount,
currency: currency || "AZN",
country: country || "AZ",
environment: "TEST", // PRODUCTION üçün dəyişin
});
// Backend cavabı mütləq bunları qaytarmalıdır:
// sessionId, signature, publicKey, amount (opsional transactionId, redirectLink)
return res.json(session);
});Əsas qeydlər
- Google Pay JS (pay.js) mütləq HTTPS üzərindən çağırılmalıdır.
- PRODUCTION mühitində real merchant id SDK daxilində avtomatik seçilir; createSession endpoint-i də prod üçün uyğunlaşdırın.
- Ödəniş uğursuz olduqda payment-error event-i gəlir; UI-də istifadəçiyə məlumat verin.
- Token backend-ə sessionId və signature ilə birlikdə POST edilir; backend cavabında redirectLink və ya receiptUrl göndərə bilərsiniz.
- SDK-nın yeni versiyası çıxdıqda script URL-i yenilənəcək; versiya 1.0 üçün cari linkdən istifadə edin.
