Google Pay™ - Integration via payform options

With Google Pay integrated into your Payform via the Options configuration, your customers can choose to pay using Google Pay directly during the checkout process. This integration offers a smooth, secure, and simple payment option for users, especially those on mobile or Android devices, making it easier for them to complete their purchases quickly.

User Journey:

Customer selects Google Pay at checkout
Customer completes the payment using Google Pay and the transaction is processed seamlessly

Setup

The steps below will help you setup the Payform with Google Pay in your environment.

• Step 1: Import EveryPay script

checkout.html<body>
  ...
  <script src="https://sandbox-js.everypay.gr/v3"></script>
</body>

checkout.html<body>
  ...
  <script src="https://js.everypay.gr/v3"></script>
</body>

• Step 2: Define the payment element

Create a div element with id="pay-form". This element is where the form will be positioned within your page.

This element is required by Everypay.js

checkout.html

 <body>
    <div>
      <!-- My App -->
      ...
      <div class="custom-control custom-radio">
        <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" onclick="everypay.showForm()" required>
        <label class="custom-control-label" for="credit">Credit card</label>
        <div id="pay-form"></div>
      </div>
      ...
    </div>
  </body>

• Step 3: Mount the form

Let's create the previously declared function in our scripts section. Now lets call the everypay.payform() function. The everypay.payform() function expects a payload and a response handler.

Here you can read more about the Payload that is available.

checkout.html

...
<script>

var payload = {
  pk: 'your-public-key',
  amount: 1000,
  locale: 'el',
  data: {
      email: "my_customer@example.com"
  },
  otherPaymentMethods: {
      googlePay: {
          countryCode: "GR",
          merchantName: "MerchantName",
          merchantUrl: "https://www.merchant-url.com/",
          allowedCardNetworks: ["VISA", "MASTERCARD"],
          allowedAuthMethods: ["CRYPTOGRAM_3DS", "PAN_ONLY"],
      },
  },
}

function handleResponse(r) {
  if (r.response === 'success') {
      // You have the token! Submit it to your backend in order to charge the card
      axios.post("https://mybackend/endpoint", {
        token: r.token
      })
  }
  else {
      // Inform the user if there was an error
  }
}

everypay.payform(payload, handleResponse);

</script>

• Step 4: Charge the card

Now that you have the token in your backend you can use it to charge the card. To do that use the /payments endpoint in our api