.png)
PayFrame - Digital Wallet Payments
With the PayFrame platform-hosted payment form option, Merchants can seamlessly accept Apple Pay and Google Pay payments from cardholders' digital wallets and mobile payment devices. This integration enhances the user experience by offering more ways for customers to pay and ensures a smooth and secure payment process that takes seconds.
Setting Up Apple Pay & Google Pay with PayFrame
To enable Apple Pay and Google Pay on your platform using PayFrame, follow these setup steps as outlined in the current PayFrame guide:
Register with Apple Pay: Begin by registering your Merchants with Apple Pay to gain access to the payment service.
Note: Google Pay integration with PayFields does not require Merchant registration.
Integrate PayFrame to the Payment Webpage: Incorporate the PayFrame into your application or website to enable the acceptance of Apple Pay and Google Pay payments.
Configure Digital Wallet Payment Options: Configure the PayFrame payment options to include Apple Pay and Google Pay as accepted methods.
Setup Requirements
Each digital wallet payment provider, like Apple Pay and Google Pay, has unique configuration steps. Users must follow each provider's specific guidelines for proper setup, ensuring seamless transactions and convenient payment management. Additionally, Payrix has requirements for integrating PayFrame to securely host digital wallet options.
PayFrame Requirements
To begin, ensure that you have configured the basic PayFrame library for seamless integration into your payment or checkout webpage if you haven't done so already.
Apple Pay Requirements - Merchant Domain Registration
To enable Apple Pay as a payment option, merchants must first register their domains with Apple and complete the domain validation process. Only after this validation can they successfully process payments.
Our portal provides a smooth and efficient Apple Pay registration experience, offering both single and multi-Merchant registration options.
Google Pay Requirements
To enable Google Pay as a payment option using PayFrame, simply follow the steps outlined below to enable Payrix’s integration with Google Pay.
Configure Digital Wallet Payment Options
PayFrame requires minimal integration effort. However, it is essential to set up PayFrame independently for both Apple Pay and Google Pay.
By following these detailed steps, Merchants can successfully configure Apple Pay and Google Pay within the PayFrame platform's hosted payment form option. This enhances the user experience and broadens the payment options available to Merchants' customers.
Enable Apple Pay on PayFrame
When enabling Apple Pay, the button will automatically display within the PayFrame without requiring additional integration work as the Apple Pay library is already integrated into the platform.
Note: The standalone Apple Pay button option is only available through PayFields integrations.
Enable Google Pay on PayFrame
To enable Google Pay and display the Google Pay payment option for Merchant’s customers, follow the steps below.
Note: The standalone Google Pay button option is only available through Google Pay for Web integrations.
Add the Google Pay JavaScript within the
<head>tag.:
<script src="https://pay.google.com/gp/p/js/pay.js"></script>Add the following Google Pay button
<div>inside the<body>tag.
<div id="googlePayButton"></div>Add the required PayFrame configurations to initialize PayFrame and display Google Pay as a payment method:
<script>
PayFrame.config.apiKey = '<APIKEY>';; // Required
PayFrame.config.merchant = '<Merchant ID>'; // Required
PayFrame.config.amount = 500; // Required
PayFrame.config.txnType = 'sale'; // Required.
PayFrame.config.googlePay.enabled = true;
</script>(Optional) Set the Google Pay test environment:
PayFrame.config.googlePay.environment = 'TEST',(Optional) Add custom stylization to the Google Pay button look & feel (example):
<script>
const googlePayButton = document.getElementById('container');
const button = googlePayClient.createButton({
buttonColor: 'default',
buttonType: 'plain',
onClick: () => { },
allowedPaymentMethods: [
container.appendChild(button)
]
</script>
Simulate Payments with Test Card Info
For test cards, simulators, and other sandbox testing options, visit Getting Started with Sandbox Testing.
Google Pay Testing
PayFrame requires test card information provided by the Google Test Card Suite.
To join Google’s test card suite group and receive access to the test cards required to test Google Pay you’ll need to provide your email address in the Google Pay & Wallet Console. Adding your email to this group will allow you to test transactions using Google's provided test cards on the Google Pay service.
Go Live
When you’re ready to deploy your payment page to a production environment follow the steps below:
Update the PayFrame Domain from sandbox to production (remove
test-from the URL subdomain):
<script type="text/javascript" src="https://api.payrix.com/PayFrameScript"></script>Update the Google Pay environment to
PRODUCTIONor delete from the site file:
PayFrame.config.googlePay.environment = 'TEST',Conclusion
By using the PayFrame production library and removing the Google Pay Sandbox environment safeguard, the payment webpage is now configured for the production environment to accept real payments from cardholders.