To start processing Google Pay payments via the Solidgate payment form, you must perform a few steps.
Firstly, you need to verify your domain on the Google Site. You must be logged in as a Google developer to do this. Otherwise, you will be redirected to Google Pay’s support page.
Secondly, you must receive the Merchant ID
parameter from Google Console. This parameter ensures that customers can make payments on your site through Google Pay.
After Google completes these two steps, you can proceed with integrating the Solidgate payment form.
To display the Google Pay button on the Solidgate payment form, you must add the following parameters to the paymentIntent
object. Google Pay can be accessed and utilized on the platforms listed here.
Parameter | Type | Mandatory | Description |
---|---|---|---|
google_pay_merchant_id |
string | Yes, for displaying the Google Pay button | The Merchant ID parameter you receive on Google’s side. Example: 10911390523550288022 |
google_pay_merchant_name |
string | No | The merchant name, which can be displayed to the customers when paying by Google. It would be better to pass this parameter so that Google does not substitute it on its own. Example: Solidgate |
Subscribe to the Google Pay mounted event to check when the button is mounted and rendered. When the event is emitted for the googlebtn
entity, this means the Google Pay button is fully displayed.
Using the payment form, you can build your user actions tracking by the events that the Solidgate payment form returns. payment form’s events .
Customization
In addition to displaying the button on the form, you can also control the button’s position, color, and size. Use the
googlePayButtonParams
object for changes as you would for all other customization in the Solidgate
Create a seamless experience for customers by styling your payment form.
payment form
.
|
|
|
|
|
|
|
|
Button position
To position the Google Pay button on your own, you need to create and specify the div
. Then, pass the value of the created container to the containerId
parameter in the googlePayButtonParams
object.
|
|
|
|
|
|
|
|
In this example, the div with the id yourCustomContainerId
is created in the HTML, and its id
value is passed to the containerId
parameter in the googlePayButtonParams
object. This specifies that the Google Pay button should be rendered inside the specified container.
If you haven’t specified the containerId
, we display it by default - above all fields of the Solidgate payment form.
Please note that if you specify a non-existing container, we will not display the Google Pay button. In this case, we will return the following error to the console.
id =‘specified-container’
does not exist.
Button styling
On the Solidgate payment form side, some options allow you to style the Google Pay button to fit your site’s style as much as possible.
We allow changing two parameters of the button in the
googlePayButtonParams
object:
default
- may change the color over time (light/night mode)black
- a black button suitable for use on a white or light backgroundwhite
- a white button suitable for use on colourful background
Supported types:
buy
- a ‘Buy with Google Pay’ button (default)plain
- button without additional textcheckout
order
pay
subscribe
Not supported types:
donate
book
Button hiding
You could always hide the button for the user by passing
false
to the enabled
parameter. You do not need to specify
true
to display the button on the form; this is the default value. When you pass the
false
value, the form with the passed parameters of containerId
, color
, and type
is collected but not displayed on the Solidgate
Create a seamless experience for customers by styling your payment form.
payment form
.
Related articles FAQ