Google Pay™ - Integration using payform

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