Integrate with Google Pay
Paysafe.js v2 enables seamless integration of mobile-based payment methods, such as Google Pay, on your website. This integration leverages the Paysafe Payments API to process card payments, ensuring a fast, secure, and user-friendly checkout experience.
Google Pay offers customers a seamless and secure payment experience, allowing them to pay with their preferred payment method. By integrating Google Pay through the Paysafe Payments API, you can offer a fast, secure, and easy payment option to your customers.
Customers add payment cards to a Google Pay wallet, and the wallet securely stores the card information. When making a purchase, the customer selects Google Pay as their payment method and pays using a saved card, removing the need to repeatedly enter card details for each transaction.
Why Use Google Pay with Paysafe.js?
-
Seamless Experience: Let customers pay with their saved cards in Google Pay — no need to re-enter card details
-
Secure Transactions: Utilizes tokenization to protect sensitive data during the payment flow
-
3D Secure Support: Automatically handles scenarios requiring 3D Secure authentication
-
Broad Currency Support: Google Pay is supported in many regions and currencies.
Supported Regions and Currencies
| Regions | Supported Currencies |
|---|---|
| North America | SRD, MXN, NIO, BZD, CAD, USD |
| Europe | CHF, SEK, NOK, RSD, RUB, RON, PLN, GBP, EUR, NOK, BGN, HRK, CZK, DKK |
| Africa | YER, MAD, VUV, UZS, UYU, TZS, TND, SOS, SCR, SAR, RWF, NGN, NAD, MWK, MZN, MNT, LRD, AFN, DZD, BWP, XOF, BIF, CVE, KHR, XAF, CLP, XOF, GMD, GHS, GNF, XOF, GYD, HTG, HNL |
| Asia | VND, UZS, AED, UAH, TRY, THB, TJS, TWD, KZT, KRW, KWD, BHD, ILS, INR, JPY, HKD, HUF, INR |
| Oceania | AUD, NZD |
| South America | BRL, BND, ARS, PYG, PAB |
| Central America | CRC, GTQ, HNL |
Key Benefits
-
PCI SAQ-A compliance.
-
Quick and simple integration.
-
Support for payments and refunds.
-
Compatible across modern devices and browsers.
Supported Transaction Types
- Payments
- Refunds
Device Compatibility
Integration Overview
To integrate with Paysafe JS, follow these steps:
-
Obtain API Credentials - Log in to your Merchant Portal to retrieve your public (single-use token) and private (server-side) API keys.
-
Include the Paysafe.js SDK.
<head>
<!-- PROD URL -->
<script src="https://hosted.paysafe.com/js/v1/latest/paysafe.min.js"></script>
<!-- TEST URL
<script src="https://hosted.test.paysafe.com/js/v1/latest/paysafe.min.js"></script>
-->
</head> -
Create HTML Elements for Payment Fields - Add a <div> for the Google Pay button in your HTML form.
<body>
<div id="google-pay"></div>
</body> -
Initialize Paysafe.js - Call the paysafe.fields.setup() function with your API key and configuration options.
await paysafe.fields.setup(API_KEY, options); -
Render the Google Pay Button - Use the instance.show() method to display available payment methods.
await instance.show(); -
Tokenize the Payment - Attach the button's onclick event to the Google Pay container div (3) and call instance.tokenize() to generate a single-use payment token.
-
This generates a single-use payment handle token (the token representing the payment data entered by the user is stored in the Payment API). Single-use tokens are valid for only fifteen minutes.
document.getElementById('google-pay').addEventListener('click', async () => {
await instance.tokenize(options)
});
-
-
Complete the Transaction - Send the token to your backend server to initiate a payment using the Paysafe Payments API using the payment endpoint.
Sample Google Pay Integration
The setup and show functions create and initialize the Paysafe.js payment methods inside the selected HTML element containers (typically div elements) on your payment page.
To initialize Paysafe JS with Google Pay, add the googlePay field to the options.fields section.
The following are simple Paysafe.js code samples that create a payment form with a Google Pay button. The payment button triggers tokenization of the user-entered data and (if tokenization was successful) displays the token in the browser console.
-
merchantId is the numeric merchant domain identifier which is registered with Google Pay and must be obtained from the Google portal. This is a required string with length 12-40 characters.
-
label is the legal, trade or brand name of the merchant which will be displayed to the cardholder in the Google Pay payment sheet. It is a required string.
-
buttonWidth is a string that sets the Google Pay button width. Valid CSS values can be ‘100%’, ‘250px’, ‘3vw’, ‘6rem’ as an example.
-
buttonHeight is a string that sets the Google Pay button height. Valid CSS values can be ‘40px', ‘1vh’, '3rem’ as an example. It's suggested not to use %.
<!-- Basic Promises Paysafe.js example -->
<html>
<head>
<!-- include the Paysafe.js SDK -->
<script src="https://hosted.paysafe.com/js/v1/latest/paysafe.min.js"></script>
</head>
<body>
<!-- Create divs for the payment fields -->
<div id="google-pay"></div>
<p></p>
<script type="text/javascript">
// Base64-encoded version the Single-Use Token API key.
// Create the key below by concatenating the API username and password
// separated by a colon and Base 64 encoding the result
var API_KEY = 'Your Base64-encoded Single-use-Token Api Key';
var options = {
// You must provide currencyCode to the Paysafe JS SDK to enable the Payment API integration
currencyCode: 'USD',
// select the Paysafe test / sandbox environment
environment: 'TEST',
accounts: {
default: 0000000000,
// Provide an Google pay merchant account if you have more than one configured for that same API key
// googlePay: 1111111111
},
// set the CSS selectors to identify the payment field divs above
// set the placeholder text to display in these fields
fields: {
googlePay: {
selector: '#google-pay',
type: 'buy',
color: 'black'
buttonWidth: '100%',
buttonHeight: '40px',
}
}
},
};
// initalize the hosted iframes using the SDK setup function
var demoInstance;
paysafe.fields
.setup(API_KEY, options)
.then(instance => {
console.log('Setup instance completed.');
demoInstance = instance;
return instance.show();
})
.then(paymentMethods => {
if (paymentMethods.googlePay && !paymentMethods.googlePay.error) {
document.getElementById('google-pay').addEventListener(
'click',
function (event) {
demoInstance
.tokenize({
amount: 1000,
transactionType: 'PAYMENT',
paymentType: 'GOOGLEPAY',
googlePay: {
country: 'CA',
requiredBillingContactFields: ['email'],
requiredShippingContactFields: ['name'],
merchantId: '012345678912345678',
label: 'My Company'
},
customerDetails: {
billingDetails: {
country: 'US',
zip: '90210',
street: 'Oak Fields 6',
city: 'ca',
state: 'CA',
},
},
merchantRefNum: 'merchant-ref-num-' + new Date().getTime(),
})
.then(result => {
// write the Payment token value to the browser console
console.log(result.token);
})
.catch(error => {
// display the tokenization error in dialog window
alert(JSON.stringify(error));
});
},
false,
);
}
})
.catch(error => {
// display any setup errors
alert(JSON.stringify(error));
});
</script>
</body>
</html>
<!-- Basic Async/Await Paysafe.js example -->
<!DOCTYPE html>
<html>
<head>
<script src="https://hosted.paysafe.com/js/v1/latest/paysafe.min.js"></script>
</head>
<body>
<div id="google-pay"></div>
<script>
const API_KEY = 'YOUR_BASE64_ENCODED_API_KEY';
const options = {
// You must provide currencyCode to the Paysafe JS SDK to enable the Payment API integration
currencyCode: 'USD',
// select the Paysafe test / sandbox environment
environment: 'TEST',
accounts: {
default: 0000000000,
// Provide an Google pay merchant account if you have more than one configured for that same API key
// googlePay: 1111111111
},
// set the CSS selectors to identify the payment field divs above
// set the placeholder text to display in these fields
fields: {
googlePay: {
selector: '#google-pay',
type: 'buy',
color: 'black',
buttonWidth: '100%',
buttonHeight: '40px',
merchantId: '012345678912345678',
label: 'My Company'
}
},
};
async function initializeGooglePay() {
try {
const instance = await paysafe.fields.setup(API_KEY, options);
const methods = await instance.show();
if (methods.googlePay && !methods.googlePay.error) {
document.getElementById('google-pay').addEventListener('click', async () => {
try {
const result = await instance.tokenize({
amount: 1000,
transactionType: 'PAYMENT',
paymentType: 'GOOGLEPAY',
googlePay: {
country: 'CA',
requiredBillingContactFields: ['email'],
requiredShippingContactFields: ['name'],
},
customerDetails: {
billingDetails: {
country: 'US',
zip: '90210',
street: 'Oak Fields 6',
city: 'ca',
state: 'CA',
},
},
merchantRefNum: 'merchant-ref-num-' + new Date().getTime(),
});
console.log('Token:', result.token);
instance.complete('success');
} catch (error) {
console.error(error);
instance.complete('fail');
}
});
}
} catch (error) {
console.error('Initialization error:', error);
}
}
initializeGooglePay();
</script>
</body>
</html>
For more information on how to tokenize a Google Pay payment, please refer to Tokenize Example with Google Pay.
Testing Google Pay
To test in Sandbox, you need Google Pay enabled for your test account and added to your Checkout SDK set-up.
In Sandbox you can use a dummy merchantId with 12-40 numeric characters, e.g., 012345678987654321.
Support
For business portal access or integration questions:
-
North America: customersupport@paysafe.com
-
UK/Europe: uk.customerservice@paysafe.com