# 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 Dashboard

1. Go to **Settings → Payment methods** in the VINR Dashboard.
2. Toggle **Google Pay** to enabled.
3. 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 Google

For production payments, Google requires merchants to register through the Google Pay Business Console:

1. Sign in to the [Google Pay & Wallet Console](https://pay.google.com/business/console).
2. Create a new integration and select **Gateway** as the integration type.
3. Set the gateway to `vinr` and enter your VINR merchant ID.
4. 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](/docs/payments/payment-methods/add-payment-methods/wallets/google-pay/test-and-go-live).

## Custom integration

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

```javascript
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

```javascript
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:

```typescript
// 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 guidelines

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 also

[Test & go live](/docs/payments/payment-methods/add-payment-methods/wallets/google-pay/test-and-go-live) — Test your integration and submit for production approval.

[Google Pay overview](/docs/payments/payment-methods/add-payment-methods/wallets/google-pay) — How Google Pay works with VINR.