Google Pay and Apple Pay buttons

  • Updated on Oct 30, 2024
  • Published on Oct 1, 2024
  • 2 minute(s) read

How to render the Google and Apple pay buttons with the Blink API

Introduction

The Blink API offers Google Pay and Apple Pay for all accounts with cards enabled. Google Pay is enabled by default, Apple Pay will require an enrolment process.

Activating Apple Pay

For Apple Pay to work, Apple insist the domain is registered securely with Apple. With the Blink API, this can be done in a few steps.

  1. Upload the domain verification file (DVF) to your site server at this exact location: https://my-domain.com/.well-known/apple-developer-merchantid-domain-association.

  2. Use the Apple registration resource to register your domain. If the DVF is not in the correct location, it will not register.

    Apple Pay is only available on iOS devices.

    Rendering the elements

    On the response of the intent creation, you will receive html elements for all your available payment methods. To render the buttons with the card element:

  • For Apple Pay: Render ccElement and apElement in separate forms.

  • For Google Pay: Render ccElement and gpElement in separate forms.

    Code example with PHP

    <!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  <script src="https://gateway2.blinkpayment.co.uk/sdk/web/v1/js/hostedfields.min.js"></script>
  <script src="https://secure.blinkpayment.co.uk/assets/js/api/custom.js"></script>
   // recommended stylesheet 
  <link rel="stylesheet" href="https://secure.blinkpayment.co.uk/assets/css/api.css">
</head>

<body>
    <form method="POST" action="process" id="payment">
        <?php
        echo  $intentResponse["element"]["ccElement"];
         ?>
        <input type="hidden" id="merchant_data" name="merchant_data" value="{\"order_id\": \"12345\"}" />
        <button type="submit">Submit</button>
    </form>
// Add Apple Pay button
     <form method="POST" action="process" id="apPayment">
        <?php
        echo $intentResponse["element"]["apElement"];
         ?>
    </form>
// Add Google Pay button
     <form method="POST" action="process" id="gpPayment">
        <?php
        echo $intentResponse["element"]["gpElement"];
            ?>
    </form>
</body>
</html>

Once submitted to the server, the form values, including the payment token, payment intent and customer details, should be submitted to applepay or googlepay resource.

The buttons are designed to work in conjunction with the card fields, so any required field values (such as customer_name, customer_email …) entered in the card form will be automatically added to the google/apple pay forms. If you wish to only show the buttons without the card fields, then you will need to add code for the user to enter the details in the google or apple pay forms or have entered all the customer’s details in the intent.

Code Example without card fields

<!DOCTYPE html>
<html lang="en">
<head> 
   // recommended stylesheet 
  <link rel="stylesheet" href="https://secure.blinkpayment.co.uk/assets/css/api.css">
</head>
<body>

// Add Apple Pay button
     <form method="POST" action="process" id="apPayment">
         <?php
        echo $intentResponse["element"]["apElement"];
         ?>
    </form>

// Add Google Pay button
     <form method="POST" action="process" id="gpPayment">
          <?php
         echo $intentResponse["element"]["gpElement"];
            ?>
    </form>

  <script>
        function addPlaceHolder(inputId, placeHolderText) {
            const inputElement = document.getElementById(inputId);
            if (inputElement) {
                inputElement.type = "text";
                inputElement.placeholder = placeHolderText
            }
        }
        // Place holders for Apple Pay form
        addPlaceHolder('ap_customer_name', 'Customer Name');
        addPlaceHolder('ap_customer_email', 'Customer Email');
        addPlaceHolder('ap_customer_address', 'Address');
        addPlaceHolder('ap_customer_postcode', 'Post code');

       // Place holders for Google Pay form
        addPlaceHolder('gp_customer_name', 'Customer Name');
        addPlaceHolder('gp_customer_email', 'Customer Email');
        addPlaceHolder('gp_customer_address', 'Address');
        addPlaceHolder('gp_customer_postcode', 'Post code');
    </script>
 </body>
</html>