Tag Archives: google pay api

Future-Proofing Payments in an Uncertain World | Virtual Fireside Chat with Checkout.com CTO Riaz Bordie

Posted by Jose Ugia and Checkout.com

We sat down with Riaz Bordie, the CTO of Checkout.com, a leading international provider of online payment solutions, to get his advice to merchants and the developer community on how to think about future-proofing payments in the uncertain world we live in today.

Jose Ugia: What advice do you have for merchants and developers as it relates to payments in these difficult times?

Riaz: Merchants are seeing a polarizing impact of COVID-19 on their businesses. For those who have an online presence, you’re either seeing a lull in traffic or a spike.

If you’re a merchant who’s seeing traffic dwindle, it’s more important than ever to make sure every transaction counts. If you used to see 50 transactions a day and now you see 10, you want to make sure all 10 deliver. Work with your Payment Service Provider (PSP) to make sure your approval ratios are as optimal as possible -- a legitimate customer who gets declined incorrectly may not return to purchase as they have in the past. If your PSP supports alternative payment methods like Google Pay that decrease friction at checkout and local payment methods if you’re selling internationally, that’s ideal. Keep an eye on your PSP’s stacks and uptimes to make sure you’re not missing out on sales due to outages or technical issues.

If you’re a merchant seeing a spike in traffic, that’s great news! But it’s important to note that a sudden traffic increase without proper operational and infrastructure planning can lead to fraud spikes, decreases in approval ratios, and downtime. With higher sales velocity, risk related issues will multiply. You’ll see more attempted fraud as fraudsters take advantage of unsuspecting consumers, higher payment declines resulting from outdated issuer risk modeling and excessive chargeback levels, subscription cancellations, buyer’s remorse, among others. How are your payments infrastructure and operations equipped to handle all of this?

Make sure your infrastructure is capable of scaling up. If you don’t have autoscaling, you’ll need a team and processes in place to scale infrastructure for traffic spikes, and keep in mind this may get harder with people working remotely. Work your PSP and other providers to optimize your payments, risk models and chargeback handling during this challenging time.

For both types of merchants, it’s important to pay closer attention to performance of your payments system. This includes both ensuring that processes are working in an optimal way - especially given remote working situations and also ensuring that you are seeing efficiencies at scale.

Jose Ugia: How did you think about building a payments infrastructure that was scalable and future-proof at Checkout.com?

We knew in the beginning we wanted a unified API, which through a single integration gives a merchant access to any market via a range of payment methods and other facilities. We’ve worked hard to get acquiring licenses in as many markets as possible so we can bring acquiring in-house, which in turn gives us greater visibility on the entire payment flow. We have also invested in a gateway that can be consistently deployed in local geographies so that whether the merchant is in Dubai or Singapore, they are getting the most optimal traffic flow.

Any engineer knows that tech breaks. Those who win have a better plan for dealing with breakage efficiently, to consistently maintain high levels of service. We spend a lot of time and resources on making sure our stack is resilient and we have the right operational processes in place to both proactively monitor for potential issues and respond correctly when they come up.

Jose Ugia: Speaking of where things are headed, where do you see the future of payments going from a payment service provider perspective?

A few key trends I see:

Risk & Fraud Detection. AI/ML is improving every aspect of tech. Fraudsters will get smarter but so will fraud prevention - it’s a cat and mouse game. In payments, sophisticated risk engines offering ML-based transaction scoring and highly customizable rules builders, among other features, will get better at detecting fraud without compromising sales.

Global acceptance will continue to be complex but paramount. Offering a variety of payment methods is table stakes these days. More and more, we’ll see that local payment methods aren’t the alternative but instead the primary way consumers pay. For example, you need to have Giropay if you’re selling in Germany and Alipay if you’re selling in China if you want a high conversion rate. Ensure that you and your local entities have an optimized setup with your acquirer (ideally domestic where possible) focused on achieving the lowest costs and highest approval rates.

Embedded infrastructure. Merchants - especially enterprise players - will want increased visibility and more control on optimizing their payment systems. We offer this level of insight and flexibility to our merchants today via our APIs around risk, reconciliation, disputes, etc. But we’re headed toward a world where dedicated infrastructure will become part of the package and allow for complete data separation and zero contention.

Jose Ugia: How do you think these changes of payments infrastructure will impact consumers downstream?

Convenience is king among consumers. I believe that COVID-19 will accelerate the move toward a contactless payments society, with consumers relying more on digital wallets and opportunities to pay through their devices. I personally no longer take my wallet out with me when I leave the house. A couple of years ago that felt like a conscious decision - now it’s just part of everyday life to rely solely on my smartphone to pay.

In some regions like MENA, which has typically been a cash-on-delivery society, we’re seeing more merchants close off cash and impose digital payments, opening up more adoption of upfront e-commerce payments. As mandated payment methods begin to change consumer behavior (studies say it takes 2 months to change a habit), new ways of paying will be here to stay, even beyond COVID-19.



- - - - - - - - - - -


Interested in learning more about Checkout.com’s services or speaking to a payments expert on how to optimize your payments stack? Contact us here. For Google Pay related requests and questions or to start your Google Pay integration, visit the Google Pay Business Console.

Simpler Google Pay integration for React and web developers

Posted by Soc Sieng, Developer Advocate

The Google Pay API enables fast, simple checkout for your website.

The Google Pay JavaScript library does not depend on external libraries or frameworks and will work regardless of which framework your website uses (if it uses any at all). While this ensures wide compatibility, we know that it doesn’t necessarily make it easier to integrate when your website uses a framework. We’re doing something about it.

Introducing the Google Pay button for React

React is one of the most widely-used tools for building web UI's, so we are launching the Google Pay Button for React to provide a streamlined integration experience. This component will make it easier to incorporate Google Pay into your React website whether you are new to React or a seasoned pro, and similarly, if this is your first Google Pay integration or if you’ve done this before.

We’re making this component available as an open source project on GitHub and publishing it to npm. We’ve authored the React component with TypeScript to bring code completion to supported editors, and if your website is built with TypeScript you can also take advantage of type validation to identify common issues as you type.

Get real time code completion and validation as you integrate with supported editors.

Getting started

The first step is to install the Google Pay button module from npm:

npm install @google-pay/button-react

Adding and configuring the button

The Google Pay button can be added to your React component by first importing it:

import GooglePayButton from '@google-pay/button-react';

And then rendering it with the necessary configuration values:

<GooglePayButton
  environment="TEST"
  paymentRequest={{ ... }}
  onLoadPaymentData={() => {}}
  />

Try it out for yourself on JSFiddle.

Refer to component documentation for a full list of supported configuration properties.

Note that you will need to provide a Merchant ID in paymentRequest.merchantInfo to complete the integration. Your Merchant ID can be obtained from the Google Pay Business Console.

Your Merchant ID can be found in the Google Pay Business Console.

Support for other frameworks

We also want to provide an improved developer experience for our developers using other frameworks, or no framework at all. That’s why we are also releasing the Google Pay button Custom Element.

Custom elements are great because:

Like the React component, the Google Pay button custom element is hosted on GitHub and published to npm. In fact, the React component and the custom element share the same repository and large portion of code. This ensures that both versions maintain feature parity and receive the same level of care and attention.

Try it out on JSFiddle.

Google Pay JavaScript library

There's no change to the existing Google Pay JavaScript library, and if you prefer, you can continue to use this directly instead of the React component or custom element. Both of these components provide a convenience layer over the Google Pay JavaScript library and make use of it internally.

Your feedback

This is the first time that we (the Google Pay team) have released a framework specific library. We would love to hear your feedback.

Aside from React, most frameworks can use the Web Component version of the Google Pay Button. We may consider adding support for other frameworks based on interest and demand.

If you encounter any problems with the React component or custom element, please raise a GitHub issue. Alternatively, if you know what the problem is and have a solution in mind, feel free to raise a pull request. For other Google Pay related requests and questions, use the Contact Support option in the Google Pay Business Console.

What do you think?

Do you have any questions? Let us know in the comments below or tweet using #AskGooglePayDev.

Simpler Google Pay integration for React and web developers

Posted by Soc Sieng, Developer Advocate

The Google Pay API enables fast, simple checkout for your website.

The Google Pay JavaScript library does not depend on external libraries or frameworks and will work regardless of which framework your website uses (if it uses any at all). While this ensures wide compatibility, we know that it doesn’t necessarily make it easier to integrate when your website uses a framework. We’re doing something about it.

Introducing the Google Pay button for React

React is one of the most widely-used tools for building web UI's, so we are launching the Google Pay Button for React to provide a streamlined integration experience. This component will make it easier to incorporate Google Pay into your React website whether you are new to React or a seasoned pro, and similarly, if this is your first Google Pay integration or if you’ve done this before.

We’re making this component available as an open source project on GitHub and publishing it to npm. We’ve authored the React component with TypeScript to bring code completion to supported editors, and if your website is built with TypeScript you can also take advantage of type validation to identify common issues as you type.

Get real time code completion and validation as you integrate with supported editors.

Getting started

The first step is to install the Google Pay button module from npm:

npm install @google-pay/button-react

Adding and configuring the button

The Google Pay button can be added to your React component by first importing it:

import GooglePayButton from '@google-pay/button-react';

And then rendering it with the necessary configuration values:

<GooglePayButton
  environment="TEST"
  paymentRequest={{ ... }}
  onLoadPaymentData={() => {}}
  />

Try it out for yourself on JSFiddle.

Refer to component documentation for a full list of supported configuration properties.

Note that you will need to provide a Merchant ID in paymentRequest.merchantInfo to complete the integration. Your Merchant ID can be obtained from the Google Pay Business Console.

Your Merchant ID can be found in the Google Pay Business Console.

Support for other frameworks

We also want to provide an improved developer experience for our developers using other frameworks, or no framework at all. That’s why we are also releasing the Google Pay button Custom Element.

Custom elements are great because:

Like the React component, the Google Pay button custom element is hosted on GitHub and published to npm. In fact, the React component and the custom element share the same repository and large portion of code. This ensures that both versions maintain feature parity and receive the same level of care and attention.

Try it out on JSFiddle.

Google Pay JavaScript library

There's no change to the existing Google Pay JavaScript library, and if you prefer, you can continue to use this directly instead of the React component or custom element. Both of these components provide a convenience layer over the Google Pay JavaScript library and make use of it internally.

Your feedback

This is the first time that we (the Google Pay team) have released a framework specific library. We would love to hear your feedback.

Aside from React, most frameworks can use the Web Component version of the Google Pay Button. We may consider adding support for other frameworks based on interest and demand.

If you encounter any problems with the React component or custom element, please raise a GitHub issue. Alternatively, if you know what the problem is and have a solution in mind, feel free to raise a pull request. For other Google Pay related requests and questions, use the Contact Support option in the Google Pay Business Console.

What do you think?

Do you have any questions? Let us know in the comments below or tweet using #AskGooglePayDev.

Google Pay and PayPal expand their integration to give merchants more ways to accept payments online

Posted by Jose Ugia, Google Developers Engineer

We’re thrilled to announce we’ve expanded our collaboration with PayPal to make payments easy and seamless no matter how or where your customers like to shop. Now, you’ll be able to accept PayPal with Google Pay on your app or website in all 24 countries where your customers can link their PayPal account to Google Pay.

Here are 5 ways this integration can add value to your business:

1. Reach more customers already set up to pay

Hundreds of millions of users already have their payment methods saved to their Google Account. And as of 2018, customers who use their PayPal account to make a purchase on a Google app or service like Google Play and YouTube can automatically choose that PayPal account when they pay with Google Pay—no new setup required. When you enable PayPal as a payment method on your Google Pay integration, all of these customers will be able to seamlessly check out on your website or app.

Users will be able to choose PayPal—or any other payment method—right from the Google Pay payment sheet.

2. Deliver a faster checkout experience with more customer benefits

Once users link their PayPal account, they won’t need to sign in to PayPal when they use it with Google Pay. This means they’ll enjoy fewer steps at checkout, which often leads to higher conversion rates. In addition, your customers will get all the advantages that come with their PayPal account—like Purchase Protection and Return Shipping—along with Google Pay’s fast, simple checkout experience and increased security.

3. Give customers more choices at checkout

Google Pay lets customers keep all of their payment methods in one place. They’ll easily be able to switch between debit cards, credit cards, their PayPal account, and more just by choosing Google Pay at checkout.

4. Keep the benefits

PayPal merchants who enable the acceptance of PayPal through Google Pay can continue to get the PayPal benefits they already enjoy. This includes the ability to receive payments directly to their PayPal Business Account within minutes, no minimum processing requirements, and seller protection on eligible transactions.

5. Integrate with ease

If you’ve already implemented Google Pay, enabling PayPal is as easy as adding it to your list of allowed payment methods in the body of your requests: 


const payPalPaymentMethod = {
  type: "PAYPAL",
  parameters: {
    purchase_context: {
      purchase_units: [{
        payee: {
          merchant_id: "<YOUR_PAYPAL_ACCOUNT_ID>"
        }
      }]
    }
  },
  tokenizationSpecification: {
    type: "DIRECT"
  }
};

paymentRequest.allowedPaymentMethods = [payPalPaymentMethod, cardPaymentMethod];

Once you’ve done that, you’ll receive a token you can send to your servers as soon as your customers confirm their transaction. You’ll use this token to issue a call against PayPal’s payment service—see PayPal’s documentation for more details and best practices.

If you haven’t implemented Google Pay yet, check out our online API introduction video or our step-by-step guided codelabs for Android and Web to learn more about it. If you prefer to explore on your own, read our documentation.

We’re excited to offer developers the best of both worlds with Google Pay and PayPal, all while making payments simpler for customers and businesses around the world. Stay tuned for more updates.

Google Pay launches new, dynamic features for Online Payments and Passes APIs

Posted by Stephen McDonald, Google Developers Engineer and Jose Ugia, Google Developers Engineer

At Google I/O 2019, we shared some of the new features we’re adding to Google Pay and discussed how you can use them to add value to your customers—whether you accept payments on your app or website or engage with customers beyond payments through loyalty cards, offers, event tickets, and boarding passes.

Read on for a summary of what we covered during the event. If you want to hear the full story, check out the recordings of our sessions: Building Powerful Checkout Experiences with Google Pay and Engaging Customers Beyond Payments: Tickets, Transit, and Boarding Passes.

Making online payments even more seamless

Better checkout experiences are more likely to increase your conversions. Here’s a look at some of the ways Google Pay can help you improve your checkout process from start to finish.

Dynamic updates for faster checkout

In an effort to bring customers more detail and transparency, we’ve made some changes to the Google Pay API. Going forward, the Google Pay payment sheet will display pricing information, so customers can double-check their order before they confirm their purchase. We’re also adding modifiers based on transaction conditions (like shipping options), so customers can see all relevant purchase details quickly, without going back to the merchant site, leading to a faster checkout experience.

Users paying online can see the price of the order dynamically before they initiate the transaction.

More payment button options

Along with these improvements to the payment sheet, we’re offering creative new button and onboarding options to encourage customers to choose Google Pay for faster checkout. To start, we launched the createButton API for web developers. This enables a dynamic purchase button that uses the right styling and colors and is localized to your user’s device or browser settings. We’ve also been experimenting with personalized buttons that display important information before users enter the checkout flow. For instance, we can show customers exactly what card they’ll be paying with or let them know if they need to sign in or set up Google Pay – and this information is displayed right on the button. As the button is hosted and rendered by Google Pay, all of this happens without you having to make any changes.

createButton API allows to display card information directly on the checkout button

Delivering extra value with Google Pay Passes

The Google Pay API for Passes lets you connect your business to millions of Android users by linking your loyalty programs, gift cards, offers, boarding passes, and event tickets to their Google Accounts. This year, we’re launching new capabilities and integrations that will help you engage customers at more times and places.

High priority notifications for boarding passes

Your passengers can add their boarding pass to Google Pay for a seamless check-in experience. Google Pay sends the passengers a high priority notification with their boarding pass just a few hours before their flight so they can easily access it when needed. They’ll also receive notifications with important dynamic information like gate changes or flight delays. These notifications are high priority and will stay prominent on passengers’ phones until they dismiss it or their flight takes off.

Integration with the Google Assistant

Google’s ecosystem can help create complete user journeys across multiple touchpoints. Earlier this year, we announced the ability to check-in to flights directly from the Google Assistant. Once a flight is ready for check-in, your passenger will receive a notification that takes them directly to the Assistant to complete the process. At the end of this flow, the user is issued a boarding pass that can be accessed from the Assistant or from Google Pay. This is built on top of the Passes API, which means that as an airline, if you already added support for boarding passes, you can just add the check-in with the Assistant integration on top of it.

From left to right: new high priority notifications, integration of Myki card inside of Google Maps, new transit tickets and automatic Gmail import.

An open API for transit, with support for dynamic barcodes

We’re excited to announce we’re making transit an open API. This means if you’re a transit provider and currently offer barcode tickets for your transportation services, you can now utilize the Passes API to get your tickets digitized in Google Pay. We’ll also be enhancing this API to support dynamic barcodes. The barcodes on customers’ transit tickets or passes will update every few seconds – even if their device is offline. This allows you to increase security -- since your QR codes are changing all the time, it makes it harder to duplicate the ticket.

Loyalty Integration with Gmail

Now you can also give customers the opportunity to import your loyalty cards to Google Pay right from Gmail—just by adding some markup to your emails. When customers open the Google Pay app, they’ll be shown any loyalty cards from Gmail they haven’t added to Google Pay. With just a tap, they can add them all automatically so they can access them at any time. This feature is currently only available with loyalty programs, but we’ll be expanding to other types of passes in the future.

What’s next

We’re working on making Passes available to your users on Google even if they haven’t installed the Google Pay app. We are starting with boarding passes and transit tickets, then plan to extend the same functionality to the other Passes. Stay tuned for more.

Resources

To learn more about Google Pay, visit our developer resources:

All you need to know about Google Pay if you’re a developer

Posted by Jose Ugia, Developer Programs Engineer

Google Pay is designed to make transactions simple from contactless payments to online purchases and even peer-to-peer payments. It also allows users to store tickets and passes, manage loyalty cards and keep track of transactions. With Google Pay, users can pay with all credit and debit cards saved to their Google Account, making hundreds of millions of cards enabled for faster checkout in your apps or websites. This includes payments for goods and services on e-commerce merchants, online marketplaces and Android apps.

When you integrate the Google Pay API into your app or site, your customers can then transact using any of those cards in as few as two clicks.

Ways to pay with Google Pay

When users use their NFC-enabled mobile device or smart watch to pay in places such as supermarkets, restaurants or shops, the card selected is emulated from the device using a secure number that changes on every transaction. Only the bank or card issuer can decrypt this number to process the transaction. The process of securing your card details is called tokenization. Only cards from supported banks can be tokenized, and this is a necessary step to pay contactless using Google Pay.

Users can pay in-stores using NFC-enabled devices with forms of payment that support tokenization.

In contrast, when users pay in your app or on your site through Google Pay, they can select any card saved to their Google Account, including tokenized cards. This enables users to pay on any device in your sites and apps globally.

Users paying online can use any card saved under their Google account(s).

All forms of payments are stored in the user's Google account and protected by multiple layers of security. This includes payment methods that users have already saved to pay for services like YouTube, Google Play or to speed up checkout forms using Chrome Autofill.

Why add Google Pay to your app or site?

You can integrate Google Pay's online APIs to increase conversions by providing a more convenient, more secure and faster way to pay to your users. Some of the benefits include:

  • Simplify the checkout experience so users don’t have to remember their payment details, making the checkout process faster and reducing the percentage of abandonments.
  • Increase security by encrypting users’ choice of payment before it is sent back to your app. You can also use it to charge orders directly from your servers or payment processor.
  • Enable payments on multiple surfaces to provide more flexibility to your users. This also allows you to easily enable payments on other Google surfaces like the Google Assistant.
  • Increase conversions for new users by reducing friction for those who do not have an account on your app or site. The APIs support returning information like billing and shipping addresses in addition to forms of payment if needed to process an order.

Integrating Google Pay

Adding Google Pay to your site or application is just a few lines of code away. There are tutorials on how to integrate Google Pay in your website or Android app and step-by-step guided codelabs for Web and Android. Here is a more visual tutorial:

To get started, use this integration checklist (Android | Web) to make sure you have everything you need to complete the integration. When you’re ready to go live with your integration, request production access and follow the final steps to deploy your app (Android | Web) in a production environment.

Google Pay and the Payment Request API

The Payment Request API is a Web Payments W3C standard that provides a native browser experience for collecting payment information from the user. You can accept Google Pay via PaymentRequest directly, however this may not be available across browsers.

To enable Google Pay for your users across all major browsers with a single implementation, we recommend using the Google Pay JavaScript library as described above. This enables a native Payment Request experience on Chrome, while giving you the flexibility of supporting Google users on other browsers.

The payments sheet is presented natively when triggered from a browser with support for Payment Handler API (on the right), while it falls back to showing a pop-up on browsers that don’t.

As users’ needs evolve, we continue to add features and forms of payment to the Google Pay API –like the recent addition of PayPal– so you can get access to these new payment methods in your app or site without any additional development work.

Tune in to Google Pay at Google I/O 2019

Don’t miss Google Pay sessions at Google I/O this year to learn about the latest features we are bringing to Google Pay. Bookmark our sessions and check back for livestream details–we look forward to seeing you this week.