Skip to main content
Skip table of contents

PayFields - Digital Wallet Payments

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:

HTML 
<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:

HTML 
<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:

HTML 
<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:

HTML 
<script src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"></script>
<apple-pay-button buttonstyle="black" type="plain" locale="en"></apple-pay-button>

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:

JS 
<script src="https://pay.google.com/gp/p/js/pay.js"></script>

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

HTML 
<div id="googlePayButton"></div>

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

HTML 
<script>
  const initPayFields = () => {
    if (PayFields) {
      PayFields.config.apiKey = '<APIKEY>';
      PayFields.config.merchant = '<Merchant ID>';
      PayFields.config.amount = 1;
      PayFields.config.txnType = 'sale';
      PayFields.config.googlePay.enabled = true;
</script>

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

JS 
PayFields.config.googlePay.environment = 'TEST';

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

HTML 
<script>
  const googlePayButton = document.getElementById('container');
  const button = googlePayClient.createButton({
    buttonColor: 'default',
    buttonType: 'plain',
    onClick: () => { },
    allowedPaymentMethods: [
      container.appendChild(button)
    ]
</script>

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

Tip: Use Customize your button from Google to auto-generate the required JavaScript.

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.

Tip: You can copy and paste this example and replace the Merchant identifiers with your own for quick integration.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- PayFields Domain -->
    <script type="text/javascript" src="https://test-api.payrix.com/payFieldsScript"></script>
    <!-- Include the Google Pay Script -->
    <script src="https://pay.google.com/gp/p/js/pay.js"></script>
    <!-- Include the Apple Pay Script -->
    <script src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"></script>
    <!-- jQuery for added PayField functionality -->
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"
        integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
    <title>PayFields Checkout Page</title>
</head>
<body>
    <!-- Apple Pay Button with Basic Styling -->
    <apple-pay-button buttonstyle="black" type="plain" locale="en"></apple-pay-button>
    <!-- Google Pay Button -->
    <div id="googlePayButton"></div>
    <!-- Payment Fields -->
    <hr>
    <div id="name"></div>
    <div id="address"></div>
    <div id="ccnumber"></div>
    <div id="ccexp"></div>
    <div id="cvv"></div>
    <div id="submit"></div>
    <script>
        const initPayFields = () => {
            if (PayFields) {
                PayFields.config.apiKey = 'ab123c4def5g6hijkl7890m12345no6p'; // Required.
                PayFields.config.merchant = 't1_mer_123ab4c567defg8h90123i45'; // Required.
                PayFields.config.amount = 500; // Required.
                PayFields.config.txnType = 'sale'; // Required.
                PayFields.config.googlePay.enabled = true; // Required
                PayFields.config.googlePay.environment = 'TEST', // Sandbox Access. Update to `PRODUCTION` or comment out.

                // Google Pay Configuration
                const googlePayButton = document.getElementById('container');

                // Google Pay Button Styling 
                const button = googlePayClient.createButton({
                    buttonColor: 'default',
                    buttonType: 'plain',
                    onClick: () => { },
                    allowedPaymentMethods: [
                        container.appendChild(button)
                    ]
                })
                
                // PayFields Input Fields Configuration
                    PayFields.fields = [
                        { type: 'number', element: '#ccnumber' },
                        { type: 'cvv', element: '#cvv' },
                        { type: 'expiration', element: '#ccexp' },
                        { type: 'name', element: '#name', values: { name: 'John Wayne' } },
                        { type: 'address', element: '#address', values: { email: 'one@two.com', city: 'New York' } }
                    ];
                // PayFields Styling & Placeholders
                PayFields.customizations = {
                    style: {
                        ".input": {
                            color: "#555",
                            font: "14px Arial, Helvetica, sans-serif",
                            background: "white"
                        }
                    },
                    placeholders: {
                        '#expiration': '00/00',
                        '#payment_cvv': '000',
                        '#payment_number': '0000 0000 0000 0000'
                    }
                };
                // PayFields Actions & Responses
                PayFields.button = { element: "#submit", value: "Pay" };
                PayFields.onValidationFailure = () => { };
                PayFields.onFailure = (response) => { };
                PayFields.onSuccess = (response) => {
                    console.log(response);
                };
            } else {
                throw Error('There is no PayFields property in the window object.');
            }
        }
        // Initialize PayFields
        initPayFields();
    </script>
</body>
<style>
    /* Additional Apple Pay Button Styling */
    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>
</html>

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):

CODE 
<script type="text/javascript" src="https://api.payrix.com/payFieldsScript"></script>

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

CODE 
PayFields.config.googlePay.environment = 'TEST',

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

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close