Google Pay

The Google Pay component (fs-google-pay) renders a branded Google Pay button inside a secure iframe served from FastSpring's domain. Clicking it opens a FastSpring-hosted popup where the buyer completes the Google Pay flow.

This page is the full reference for when the button appears, how to mount it, its options, and how to style it. For setup context, see the Vanilla JS Integration Guide.

When the button appears

Google Pay is available in the buyer's browser

The button appears only when Google Pay can run in the buyer's current browser.

Google Pay is available for the session

The payment method must be available for the current session. If it isn't, the component renders nothing and the rest of your checkout continues normally, so you can mount it on every checkout.

Mount

Add a target element to your page:

<div id="google-pay-element"></div>

Then create the component from your sdk instance and mount it:

const googlePayComponent sdk.components.create('fs-google-pay', {
    // options + style go here
})

googlePayComponent.mount('#google-pay-element');

Component options

Pass these options next to style.

Option	Type	Default	Description
`variant`	`'black'` \| `'white'`	`'black'`	The Google Pay button color. Use `'white'` on dark checkouts.
`frame`	`{ width, maxWidth }`	see `frame`	The component's own size. It sits beside `style`, not inside it.

`frame`: the component's size

Property	Type	Default	Description
`width`	`string`	`100%`	The component width. The default fills the container you mount it into.
`maxWidth`	`string`	`680px`	The widest the component grows on large screens. Every component uses the same default. Set `'none'` to remove the cap.

What happens during payment

Payment completes in a FastSpring popup

Clicking the button opens a FastSpring-hosted popup where the buyer completes the Google Pay flow.

Same callbacks as card payments

A successful payment triggers onOrderCompleted and a failed one triggers onPaymentFailed, both passed to FastSpring.init().

Styling

You can set the component's size through frame and the button's height and corner radius through style.state.default.button. Use variant to choose the black or white button.

const googlePayComponent = sdk.components.create('fs-google-pay', {
  variant: 'black',   // 'black' | 'white' — default 'black'
  frame: { width: '100%', maxWidth: '680px' },   // maxWidth: 'none' removes the cap
  style: {
    state: {
      default: {
        button: {
          height: '48px',
          borderRadius: '8px'
        }
      }
    }
  }
});

googlePayComponent.mount('#google-pay-element');

Only the default state

Google controls the button's colors and its hover and press feedback, so only the default state is applied. Overrides under any other state are ignored.

`button`: the Google Pay button

Width comes from frame, and the button always fills it.

Property	Type	Default	Description
`height`	`string`	`48px`	The button height.
`borderRadius`	`string`	`8px`	The button corner radius.

Full example

sdk.components.create('fs-google-pay', {
  variant: 'white',
  frame: { width: '100%', maxWidth: '520px' },
  style: {
    state: {
      default: {
        button: { height: '52px', borderRadius: '8px' },
      },
    },
  },
}).mount('#google-pay-element');