PayFields - Digital Wallet Payments

Owned by Miles Graves
Last updated: Dec 18, 2024 by Ada Li
6 min read

With the PayFields embedded payment 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. It also ensures a smooth and secure payment process that takes seconds to complete.

Setting Up Apple Pay & Google Pay with PayFields

To enable Apple Pay and Google Pay on your platform using PayFields, follow these setup steps as outlined in the current PayFields guide:

  1. 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.

  1. Integrate PayFields to the payment webpage: Incorporate PayFields into your application or website to enable the acceptance of Apple Pay and Google Pay payments.

  2. Configure digital wallet payment options: Configure the PayFields 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 PayFields to securely host digital wallet options.

PayFields Requirements

To get started, you'll need to set up the foundational PayFields library for seamless integration into your payment or checkout webpage.

Visit the PayFields Developer Guide to learn how to set up a basic PayFields instance on your webpage.

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.

Visit Apple Pay Registration for details on the Merchant domain registration and validation process.

Google Pay Requirements

To enable Google Pay as a payment option using PayFields, follow the steps outlined below to enable Payrix’s integration with Google Pay.

Configure Digital Wallet Payment Options

Then, the Merchant needs to configure the digital wallet payment options within the PayFields HTML. This step involves setting up PayFields for Apple Pay and Google Pay separately.

By following these detailed steps, Merchants can effectively set up and configure Apple Pay and Google Pay within the PayFields embedded payment option, enhancing the user experience and expanding payment options for customers.

Setup PayFields for Apple Pay

To enable Apple Pay, the Merchant must follow these key steps:

  1. Add the Apple Pay JavaScript within the <head> tag:

<script src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"></script>

  1. Add the Apple Pay button within the <body> tag:

<apple-pay-button buttonstyle="black" type="plain" locale="en"></apple-pay-button>

  1. Style the button with the following CSS properties or adjust as desired:

<style>     apple-pay-button {       --apple-pay-button-width: 150px;       --apple-pay-button-height: 30px;       --apple-pay-button-border-radius: 3px;       --apple-pay-button-padding: 0px 0px;       --apple-pay-button-box-sizing: border-box;     } </style>

Test the button and confirm the transaction is successful in your Merchant’s portal or using the API. 

PayFields Standalone Apple Pay Button

To display only the Apply Pay button, add the following code to the top of your <body> tag:

Warning: The Apple Pay CDN <script> must be placed in the <body> tag and will not work if added within the <head> tag.

Finally, use the button styling CSS shown above to customize the look and feel of the Apple Pay button.

Setup PayFields for Google Pay

To enable Google Pay, the Merchant must follow these key steps:

  1. Add the Google Pay JavaScript within the <head> tag:

  1. Add the following Google Pay button <div> inside the <body> tag:

  1. Add the required PayFields configurations to initialize PayFields and display Google Pay as a payment method:

  1. (Optional) Set the Google Pay test environment:

  1. (Optional) Add custom stylization to the Google Pay button look and feel (example):

Note: Use Google’s brand guidelines for help styling the button within the specification.

Completed Integration Example

By following the steps outlined above, Merchants can easily support both Apple Pay and Google Pay on their webpages. After registering with Apple Pay, integrating PayFields, and configuring digital wallet payment options within the PayFields HTML, Merchants can seamlessly accept these payments, enhancing user experience and expanding payment options.

See the integration example below to view a full integration of both Apple Pay and Google Pay payment options into a single checkout page using PayFields.

Simulate Payments with Test Card Info

For test cards, simulators, and other sandbox testing options, visit Getting Started with Sandbox Testing.

Google Pay Testing

PayFields 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, 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 the production environment, follow the steps below:

  1. Update the PayFields Domain from sandbox to production (remove test- from the URL subdomain):

  1. Update the Google Pay environment to PRODUCTION or delete from the site file:

Conclusion

By using the PayFields 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.

References