Google Pay ™

Integrating Google Pay for the web using Payload is as simple as a line or two of JavaScript with a Payload.js secure inputs payment form.

Follow this guide to learn how to integrate Google Pay for your Payload account. For a live preview, see the demo below:

View a Demo

Integrate

curl -X POST "https://api.payload.co/access_tokens" \
  -u secret_key_3bW9JMZtPVDOfFNzwRdfE: \
  -H 'Content-Type: application/json'
  -d '{
    "intent": {
      "payment_form": {
        "payemnt": {
          "amount": 100,
          "description": "Test Payment"
        }
      }
    }
  }'

import payload
pl = payload.Session('secret_key_3bW9JMZtPVDOfFNzwRdfE')

@app.route('/form-token', method='post')
def checkout_redirect():

  client_token = pl.ClientToken.create(
    intent=dict(
      payment_form=dict(
        payment=dict(
          amount=100,
          description='Test Payment'
        )
      )
    )
  )

  return jsonify({'client_token': client_token['id']})

require 'payload'
pl = Payload::Session.new('secret_key_3bW9JMZtPVDOfFNzwRdfE')

get '/form-token/' do

  client_token = Payload::ClientToken.create(
    intent: {
      payment_form: {
        payment: {
          amount: 100,
          description: 'Test Payment'
        }
      }
    }
  )

  json({ client_token: client_token['id'] })
end

<?php

$pl_transaction_id = $_GET['pl_transaction_id'];


$clientToken = Payload\ClientToken::create([
  "intent"=>[
    "payment_form"=>[
      "payment": [
        "amount"=>100,
        "description"=>"Test Payment"
      ]
    ]
  ]
]);

header('Content-Type: application/json; charset=utf-8');
echo json_encode(["client_token": $clientToken->id]);
?>

import payload from 'payload-api'
const pl = payload.Session('secret_key_3bW9JMZtPVDOfFNzwRdfE');

app.get('/form-token', (req, res) => {
  const clientToken = pl.ClientToken.create({
    intent: {
      payment_form: {
        payment: {
          amount: 100,
          description: 'Test Payment'
        }
      }
    }
  });

  res.json({ client_token: clientToken.id });
})

using Payload;

[Route("form-token")]
public IHttpActionResult CheckoutRedirect() {
  var pl = new Payload.Session("secret_key_3bW9JMZtPVDOfFNzwRdfE");

  var client_token = await new pl.ClientToken.create(new {
    intent=new {
      payment_form=new {
        payment=new {
          new {
            amount=100,
            description="Test Payment"
          }
        }
      }
    }
  });

  return Json(new { client_token = client_token.id });
}

Step 1) Create an Intent

To use Google Pay in a form you need to generate payment_form or payment_method_form intent object. To create an intent, create a ClientToken with a nested payment_form or payment_method_form intent. For more information, see the Authentication section for a full list of available parameters.

Once the client token is generated, return the id value to the client and pass that to the Payload function. Now you can initialize the form as shown in Step 2.

Step 2) Create a Checkout Form

<!-- Simple example of enabling Google Pay -->
<script src="https://payload.co/Payload.js"></script>

<script>
Payload('generated_client_token')

const checkout = new Payload.Form({
        form: document.getElementById('checkout-form')
    })
    .googlepay(document.getElementById('google-pay-btn'))
    .on('processed', function(evt) {
        console.log(evt.transaction_id)
    })
</script>

To begin using Google Pay on the web, first you'll need to create a checkout form using Payload.js. For a full guide on creating a Payload enabled checkout form, see the full section on Secure Inputs.

Below is a simple example of how you can initiate a Payload enabled checkout form:

<script>
const checkout = new Payload.Form({
        form: document.getElementById('checkout-form')
    })
    .on('success', function(evt) {
        console.log(evt.transaction_id)
    })
</script>

Step 3) Google Pay Button

Once you have a Payload enabled checkout form, the next step is to add a Google Pay button to your checkout. The best way to do this is to use Google's javascript library, see the example below:

<script src="https://pay.google.com/gp/p/js/pay.js"></script>
<script>
    const btn = new google.payments.api
        .PaymentsClient({environment: 'PRODUCTION'})
        .createButton()
    document.getElementById('container').appendChild(btn);
</script>

For more information, see the Styling Buttons section for guidelines on how to style and incorporate the buttons appropriately.

Step 4) Activate Trigger

On the Payload.Form there is a googlepay function. Use this to activate the buttons. Both functions also accept a callback function to determine if Google Pay is active and supported by the device.

<script>
const btn = document.getElementById('google-pay')
checkout.googlepay(btn, function(active) {
    if ( !active ) {
        // you could display a message or hide the button
    }
})
</script>

It's a good idea to use the callback to update the UI if Google Pay cannot be activated on the device.

Alternate Trigger

If you want to control the trigger in a different way, instead of passing a button element into the googlepay() function, you can just pass in the activation callback and setup a separate trigger using the "open" command.

<script>
checkout.googlepay(function(active) {
    if ( active )
        btn.addEventListener('click', function() {
            checkout.googlepay('open')
        })
})
</script>

Styling and Displaying Buttons

It's important to follow the guidelines outlined by Google on how to display their buttons. Below is a link to their guidelines:

Google Pay branding guidelines