Set up Google Pay
Configure Google Pay on your VINR account and integrate the Google Pay API.
Google Pay requires two steps before you can accept payments: enabling it in the VINR Dashboard and registering as a merchant with Google.
Enable Google Pay in the DashboardAsk
- Go to Settings → Payment methods in the VINR Dashboard.
- Toggle Google Pay to enabled.
- Copy your VINR merchant ID — you'll need it when configuring the Google Pay API.
Once enabled, Google Pay appears automatically in the VINR hosted checkout for eligible browsers and devices. If you use the hosted checkout exclusively, no further integration is required.
Register with GoogleAsk
For production payments, Google requires merchants to register through the Google Pay Business Console:
- Sign in to the Google Pay & Wallet Console.
- Create a new integration and select Gateway as the integration type.
- Set the gateway to
vinrand enter your VINR merchant ID. - Submit for review — Google typically responds within 2 business days.
You do not need to complete registration to test in the TEST environment. See Test & go live.
Custom integrationAsk
If you render your own checkout UI (not the VINR hosted checkout), use the Google Pay JavaScript API to present the payment button and collect the token, then pass it to VINR.
Configure the payment request
const googlePayClient = new google.payments.api.PaymentsClient({
environment: 'PRODUCTION', // or 'TEST' in sandbox
});
const paymentDataRequest = {
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: [{
type: 'CARD',
parameters: {
allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
allowedCardNetworks: ['MASTERCARD', 'VISA'],
},
tokenizationSpecification: {
type: 'PAYMENT_GATEWAY',
parameters: {
gateway: 'vinr',
gatewayMerchantId: 'YOUR_VINR_MERCHANT_ID',
},
},
}],
merchantInfo: {
merchantId: 'YOUR_GOOGLE_MERCHANT_ID',
merchantName: 'Your Business Name',
},
transactionInfo: {
totalPriceStatus: 'FINAL',
totalPrice: '45.00',
currencyCode: 'EUR',
countryCode: 'BG',
},
};Check readiness and render the button
googlePayClient.isReadyToPay({
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: paymentDataRequest.allowedPaymentMethods,
}).then(response => {
if (response.result) {
const button = googlePayClient.createButton({
onClick: () => googlePayClient.loadPaymentData(paymentDataRequest)
.then(paymentData => submitToVinr(paymentData)),
});
document.getElementById('google-pay-button').appendChild(button);
}
});Submit the token to VINR
Pass the payment token from Google to your server, then create the payment with the token as the payment method:
// Server-side: create the payment with the Google Pay token
import { Vinr } from '@vinr/sdk';
const vinr = new Vinr({ secretKey: process.env.VINR_SECRET_KEY });
async function submitToVinr(
paymentData: google.payments.api.PaymentData,
amount: number,
currency: string,
) {
const token = paymentData.paymentMethodData.tokenizationData.token;
// TODO: confirm exact parameter names with engineering for Google Pay token submission
const payment = await vinr.payments.create({
amount,
currency,
paymentMethod: {
type: 'google_pay',
token,
},
});
return payment;
}Always confirm the final payment state from the payment.completed webhook on your server, not from the client-side response. The customer's browser may close before the redirect returns.
Google Pay button guidelinesAsk
Google enforces brand guidelines for the payment button. Use only the approved button styles and do not modify the Google Pay logo. The createButton API returns a pre-styled button that meets guidelines automatically.
See alsoAsk
Test & go live
Test your integration and submit for production approval.
Google Pay overview
How Google Pay works with VINR.
Last updated on
