The Google Pay button

The Google Pay API enables fast, simple checkout on your website. This provides convenient access to hundreds of millions of cards that are saved to Google Accounts worldwide.

See Google Pay in action:

This repository contains Google Pay button implementations for compatible with popular website frameworks even easier.

Web

This is a bare bones, plain vanilla JavaScript implementation of the Google Pay button. These examples are designed to launch into a Project IDX Workspace, ready to run.

• Example code basic
  <source media="(prefers-color-scheme: dark)" srcset="https://cdn.idx.dev/btn/open_dark_32.svg"> <source media="(prefers-color-scheme: light)" srcset="https://cdn.idx.dev/btn/open_light_32.svg"> <img height="32" alt="Open in IDX" src="https://cdn.idx.dev/btn/open_purple_32.svg">

• Example code advanced
  <source media="(prefers-color-scheme: dark)" srcset="https://cdn.idx.dev/btn/open_dark_32.svg"> <source media="(prefers-color-scheme: light)" srcset="https://cdn.idx.dev/btn/open_light_32.svg"> <img height="32" alt="Open in IDX" src="https://cdn.idx.dev/btn/open_purple_32.svg">

Web component

The Google Pay web component button makes it easy to integrate Google Pay into your website using standards based custom elements. Web components can be used directly in a standard HTML web application as is, and is also compatible with many popular web frameworks.

• Example Vue Google Pay button
• Example Svelte Google Pay button

npm install @google-pay/button-element

Find out more about the Google Pay web component button.

React

Web components are more difficult to consume in a React application due to the extra work involved in binding to web component properties with React.

A separate Google Pay React button has been created to make it easy to integrate Google Pay into your React website.

npm install @google-pay/button-react

Find out more about the Google Pay React button.

Angular

An Angular version of the Google Pay button has been created to make it easier to integrate Google Pay into your Angular website. The advantage of using the Angular version of the Google Pay button over the web component is that it eliminates the need to register CUSTOM_ELEMENTS_SCHEMA.

npm install @google-pay/button-angular

Find out more about the Google Pay Angular button.

Other frameworks

The intention is for the web component to support other web frameworks. Support for additional framework specific libraries will be considered based on demand.

Have any questions?

Ask it on the discussions section of the Google Pay button project.