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 and ensures a smooth and secure payment process that takes seconds.

Setting Up Apple Pay and 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:

Register with Apple Pay and Google Pay: Begin by registering your business with Apple Pay and Google Pay to gain access to their respective payment services.
Integrate PayFields to the Payment Webpage: Incorporate PayFields into your application or website to enable the acceptance of Apple Pay and Google Pay payments.
Configure Digital Wallet Payment Options: Configure the PayFields payment options to include Apple Pay and Google Pay as accepted methods.

Register with Apple Pay and Google Pay

To offer each respective Apple Pay and Google Pay payment option, the Merchant must be registered with each respective payment service provider (i.e. Apple and Google). Our Portal offers a convenient registration method for both services for single or multi-Merchant registration.

To see the steps to enable and register Apple Pay and Google Pay for Merchants, visit each guide below:

Integrate PayFields to the Payment Webpage

Next, if you haven’t already, you’ll need to configure the basic PayFields library to integrate it into your payment or checkout webpage.

To see the steps to set up a basic PayFields instance on your webpage, visit the PayFields Developer Guide.

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:

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

HTML

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

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

HTML

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

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/v1/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:

Add the Google Pay JavaScript within the <header> tag.:

JS

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

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

HTML

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

Add the following required PayFields JavaScript (and any additional customizations):

HTML

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

(Optional) Add the following PayFields JavaScript to the code above to enable sandbox testing:

JS

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

(Optional) Add custom stylization to the Google Pay button look & 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 web pages. After registering with Apple Pay and Google 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/v1/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.

                // 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.config.googlePay.environment = 'TEST', // Sandbox Access. Comment line out for Production.
                
                // 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>

Testing and Go Live

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

When you’re ready to deploy your payment page to a production environment follow the steps below:

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>

Comment out or delete the following line from the 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.