Integrate with Paze
Paze is a secure online checkout solution offered by participating banks and credit unions in the United States. It enables consumers to complete purchases online without manually entering their card details, providing a faster and more convenient checkout experience.
When a consumer uses Paze, their eligible debit and credit cards are made available through a single digital wallet. During checkout, Paze securely provides the payment credentials required to complete the transaction while helping protect sensitive card information through network tokenization. Actual card numbers are not shared with merchants.
Why use Paze with Paysafe JS?
- Faster checkout: Consumers can complete purchases without manually entering payment card details.
- Enhanced security: Payment credentials are tokenized, reducing the exposure of sensitive card information.
- Simplified online payments: Multiple eligible payment cards can be managed through a single wallet experience.
Availability and limitations
Paze is intended for eligible consumers in the United States. Availability depends on end consumer eligibility, supported card networks, and merchant configuration.
Note: If you are interested in Paze, please contact your Paysafe representative to learn more.
Key Benefits
- PCI SAQ A compliance
- Quick and simple integration
- Support for payments and refunds
- Compatible with modern devices and browsers
Supported Transaction Types
- Payments
- Refunds
Supported Browsers
- Google Chrome
- Safari
- Microsoft Edge
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 - add the Paysafe JS SDK to your page.
<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 Paze button in your HTML form.
<body>
<div id="paze"></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 Paze button - use the instance.show() method to display the available payment methods.
await instance.show(); -
-
Tokenize the payment - attach the button's onclick event to the Paze container div and call instance.tokenize() to generate a single-use payment token.
-
This generates a single-use payment handle token that represents the payment data entered by the consumer and stored in the Payments API. Single-use tokens are valid for fifteen minutes.
document.getElementById('paze').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 payment endpoint.
Paze Integration Example
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 Paze, add the paze field to the options.fields section.
The code examples shown below create a payment form with a Paze button. The button triggers tokenization of the payment data and (if tokenization is successful) displays the token in the browser console.
Supported setup options
| Setup function (fields object) | Description | Usage | Available options | Default |
|---|---|---|---|---|
| The consumer email address used to identify the consumer for the Paze experience. | Optional | |||
| phone | A US phone number that can be used for consumer identification when supported by the integration. | Optional | ||
| label | Merchant name visualized in the Paze payment sheet. | Optional | ||
| shape | The shape of the button. | Optional | 'default', 'rectangle', 'pill' | 'default' |
| type | The text displayed with the Paze logo. | Optional | 'checkout' 'check out with' 'Donate with' | 'check out with' |
| color | The background color of the button. | Optional | 'white' 'whitewithoutline' 'midnightblack' 'pazeblue' | 'pazeblue' |
| Tokenize function | Description | Usage | Available options | Default |
|---|---|---|---|---|
| requiredBillingContactFields | The verbosity of billing address required by the merchant. | Optional | ALL, NONE | ALL |
| requiredShippingContactFields | Determines whether the merchant wants to collect the shipping address. | Optional | ALL, NONE | ALL |
| accountId | Merchant Account ID with Paysafe. | Optional |
Note: When paymentType = PAZE is specified during tokenization, the #paze selector must be included in the setup configuration.
<!-- 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="paze"></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 a Paze merchant account if you have more than one configured for that same API key
// paze: 1111111111
},
// set the CSS selectors to identify the payment field divs above
// set the placeholder text to display in these fields
fields: {
paze: {
selector: '#paze',
email: "test2@paysafe.com",
phone: "(416) 000-0030",
label: "My Company",
type: "Donate with",
shape: "pill",
color: "midnightblack",
}
},
};
// 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.paze && !paymentMethods.paze.error) {
document.getElementById('paze').addEventListener(
'click',
function (event) {
demoInstance
.tokenize({
amount: 1000,
transactionType: 'PAYMENT',
paymentType: 'PAZE',
paze: {
requiredBillingContactFields: ['ALL'],
requiredShippingContactFields: ['NONE'],
},
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="paze"></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 a Paze merchant account if you have more than one configured for that same API key
// paze: 1111111111
},
// set the CSS selectors to identify the payment field divs above
// set the placeholder text to display in these fields
fields: {
paze: {
selector: '#paze',
email: "test2@paysafe.com",
phone: "(416) 000-0030",
label: "My Company",
type: "Donate with",
shape: "pill",
color: "midnightblack",
}
},
};
async function initializePaze() {
try {
const instance = await paysafe.fields.setup(API_KEY, options);
const methods = await instance.show();
if (methods.paze && !methods.paze.error) {
document.getElementById('paze').addEventListener('click', async () => {
try {
const result = await instance.tokenize({
amount: 1000,
transactionType: 'PAYMENT',
paymentType: 'PAZE',
paze: {
requiredBillingContactFields: ['ALL'],
requiredShippingContactFields: ['ALL'],
},
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);
}
}
initializePaze();
</script>
</body>
</html>
Testing Paze
For sandbox testing, use the following credentials:
- Email: test2@paysafe.com
- One-time password (OTP): 758595
- CVV: 022
Support
For business portal access or integration questions:
- North America: customersupport@paysafe.com