---
title: "Google Pay and Apple Pay buttons"
slug: "google-pay-and-apple-pay-buttons"
updated: 2025-05-22T12:25:31Z
published: 2025-05-22T12:25:31Z
canonical: "api-docs.blinkpayment.co.uk/google-pay-and-apple-pay-buttons"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://api-docs.blinkpayment.co.uk/llms.txt
> Use this file to discover all available pages before exploring further.

# Google Pay and Apple Pay buttons

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](https://secure.blinkpayment.co.uk/.well-known/apple-developer-merchantid-domain-association)) 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](https://blink.document360.io/apidocs/applepaydomains) to register your domain. If the DVF is not in the correct location, it will not register.

> [!WARNING]
> 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**

```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](/apidocs/applepay) or [googlepay](/apidocs/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](/apidocs/create-intents).

## Code Example without card fields

```php
<!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>
 </body>
</html>
```