The Payments Library supports Google Pay, Apple Pay, and PayPal. Each wallet has specific browser/device requirements and merchant account setup.
Availability Matrix
| Wallet | Browser/Device | Requirements |
|---|
| GooglePay | Chrome, Android | PSP with 3DS, Google merchant account |
| ApplePay | Safari, iOS, macOS | PSP with 3DS, Apple merchant account, domain verification |
| PayPal | All browsers | PayPal merchant credentials |
const available = await engine.checkAvailability();
// On Chrome: ["CardPay", "GooglePay", "PayPal"]
// On Safari: ["CardPay", "ApplePay", "PayPal"]
// On Firefox: ["CardPay", "PayPal"]
Google Pay
Setup Requirements
- PSP account with 3DS support configured in Orchestra
- Google Pay merchant account - Register with Google
- Merchant credentials stored in Orchestra Portal
See Google Pay Setup for detailed instructions.
<div id="gpay-button"></div>
engine.payBy(
[{ name: 'GooglePay', domEntitySelector: '#gpay-button' }],
handleResult,
undefined
);
Supported Operations
| Operation | Supported |
|---|
CHARGE | Yes |
TOKENIZE | Yes |
CHARGE_AND_TOKENIZE | Yes |
Results
Google Pay charges are processed through your PSP, so results appear in upgChargeResults:
const [data] = engine.parseResultToken(result.token);
if (data.upgChargeResults) {
console.log('Gateway:', data.upgChargeResults.gatewayName);
console.log('Reference:', data.upgChargeResults.gatewayReference);
}
Apple Pay
Setup Requirements
- PSP account with 3DS support configured in Orchestra
- Apple Pay merchant account - Register with Apple
- Domain verification with Apple
- Merchant credentials stored in Orchestra Portal
See Apple Pay Setup for detailed instructions.
<div id="applepay-button"></div>
engine.payBy(
[{ name: 'ApplePay', domEntitySelector: '#applepay-button' }],
handleResult,
undefined
);
Supported Operations
| Operation | Supported |
|---|
CHARGE | Yes |
TOKENIZE | Yes |
CHARGE_AND_TOKENIZE | Yes |
Results
Apple Pay charges are processed through your PSP, so results appear in upgChargeResults:
const [data] = engine.parseResultToken(result.token);
if (data.upgChargeResults) {
console.log('Gateway:', data.upgChargeResults.gatewayName);
console.log('Reference:', data.upgChargeResults.gatewayReference);
}
PayPal
Setup Requirements
- PayPal Business account
- PayPal credentials configured in Orchestra Portal under Resources > eWallet Accounts
See PayPal Setup for detailed instructions.
<div id="paypal-button"></div>
engine.payBy(
[{ name: 'PayPal', domEntitySelector: '#paypal-button' }],
handleResult,
undefined
);
Supported Operations
| Operation | Supported |
|---|
CHARGE | Yes |
TOKENIZE | No |
CHARGE_AND_TOKENIZE | No |
PayPal only supports charge operations. Tokenization is not available.
Results
PayPal payments are processed directly (not through a PSP), so results appear in directChargeResults:
const [data] = engine.parseResultToken(result.token);
if (data.directChargeResults) {
console.log('Success:', data.directChargeResults.success);
console.log('Message:', data.directChargeResults.message);
console.log('Data:', data.directChargeResults.data);
}
Address Collection
Google Pay, Apple Pay, and PayPal can provide billing and shipping addresses. Configure address requirements when initializing the engine:
const engine = new eWallet.Engine(sessionToken, {
billingInfo: {
phoneRequired: true,
emailAddressRequired: true,
details: 'FULL'
},
shippingInfo: {
phoneRequired: false,
emailAddressRequired: false
}
});
function handleResult(result) {
const billing = engine.getBillingInfo();
const shipping = engine.getShippingInfo();
if (billing) {
console.log('Billing:', billing.name, billing.emailAddress);
}
}
Displaying Multiple Wallets
Show all available wallets and let customers choose:
const available = await engine.checkAvailability();
const allButtons = [
{ name: 'GooglePay', domEntitySelector: '#gpay-button' },
{ name: 'ApplePay', domEntitySelector: '#applepay-button' },
{ name: 'PayPal', domEntitySelector: '#paypal-button' },
{ name: 'CardPay', domEntitySelector: '#card-button' }
];
const buttons = allButtons.filter(btn => available.includes(btn.name));
engine.payBy(buttons, handleResult, undefined);
Identifying the Provider
After payment, determine which wallet the customer used:
function handleResult(result) {
const provider = engine.getSelectedProviderName();
console.log('Customer paid with:', provider);
// "GooglePay", "ApplePay", or "PayPal"
}
