Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Master feature] AMP Google Pay #15201

Open
choumx opened this Issue May 10, 2018 · 9 comments

Comments

@choumx
Copy link
Collaborator

choumx commented May 10, 2018

Adds support for integrating Google Pay experiences into AMP pages.

Motivation

We want to make payments in AMP pages easy and fast by using Google Pay. We plan to add two new AMP components: amp-payment-google-inline and amp-payment-google-button.

The goal is to eventually make these extensions work on both Google and non-Google surfaces.

Requirements

  • Support Google Pay with two UI options: an inline widget and a button that displays a popover.

Proposed design

  • amp-payment-google-inline: Renders an inline widget that preselects one of the user's payment methods.
  • amp-payment-google-button: Renders a button that triggers a popover to slide in where the user can select their desired payment method and (optional) shipping address.

amp-payment-google-inline

To use the amp-payment-google-inline component, the AMP developer adds a <amp-payment-google-inline> tag with a child <script> element that contains a PaymentDataRequest JSON object.

This tag should also have a data-payment-data-input-id attribute which references the id of a hidden input field in a form on the page that will be filled with the PaymentData JSON object when the user submits the form.

The amp-payment-google-inline tag also fires a paymentsReadyStatusChanged event, so you can know when the user has a payment ready and the form can be submitted.

<amp-payment-google-inline
    data-payment-data-input-id="payment-data"
    on="paymentReadyStatusChanged: AMP.setState({isPaymentReady: event})">
    <script type="application/json">
        {
            "merchantId": "your merchant ID",
            ...
        }
    </script>
</amp-payment-google-inline>
<input type="hidden" id="payment-data" name="payment-data">

amp-payment-google-button

Similarly, to use the amp-payment-google-button component, the AMP developer adds a <amp-payment-google-button> tag with a child <script> element that contains a PaymentDataRequest JSON object.

Rather than filling a hidden input field, this tag will simply fire a paymentReadyStatusChanged event when the user has clicked the button and chosen a payment method. The payload of this event will be a PaymentData JSON object.

<amp-payment-google-button
    data-payment-data-input-id="payment-data"
    on="loadPaymentData: AMP.setState({googlePaymentData: event})">
    <script type="application/json">
        {
            "merchantId": "your merchant ID",
            ...
        }
    </script>
</amp-payment-google-button>

@ampprojectbot ampprojectbot added this to the Pending Triage milestone Jun 5, 2018

@rudygalfi rudygalfi changed the title AMP Google Pay [Master feature] AMP Google Pay Jul 13, 2018

@rudygalfi rudygalfi added this to Next Up in AMP HTML Project Roadmap via automation Jul 13, 2018

@ampprojectbot

This comment has been minimized.

Copy link
Collaborator

ampprojectbot commented Oct 16, 2018

This issue seems to be in Pending Triage for awhile. Please triage this to an appropriate milestone.

@cvializ

This comment has been minimized.

Copy link
Collaborator

cvializ commented Oct 31, 2018

amp-form is capable of automatically interacting and extracting values from other amp-elements using the new form submit service. So it might not be necessary for document authors to create their own hidden inputs or specify a data-payment-data-input-id.

@torch2424

This comment has been minimized.

Copy link
Member

torch2424 commented Oct 31, 2018

Mentioned during the design review, for amp-payment-google-inline, we already faced the same issue, and made an agreed upon design here: #2273 (comment)

Currently have a branch that I am working on for AMP form to implement AMP.AsyncInput to be used with AMP form.

Feel free to reach out to me, and we can work together on using AMP.AsyncInput with Google Pay 😄

@ampprojectbot

This comment has been minimized.

Copy link
Collaborator

ampprojectbot commented Nov 8, 2018

This issue doesn't have a category which makes it harder for us to keep track of it. Please add an appropriate category.

@morsssss

This comment has been minimized.

Copy link

morsssss commented Nov 27, 2018

I was just curious, as we're working on a sample e-comm demo that will eventually have a payment step... has this task been prioritized? Do we expect anyone to pick it up within the next few months?

Thanks!

@torch2424

This comment has been minimized.

Copy link
Member

torch2424 commented Nov 28, 2018

@morsssss We had this brought up during our design review: #18658

Seems like the Google Pay team is working on this, and planning on contributing it, so you may want to reach out to them? Also, their work is dependent on some of my work with Async Input, which is in it's final PR now before being code complete 😄

@ampprojectbot

This comment has been minimized.

Copy link
Collaborator

ampprojectbot commented Nov 28, 2018

This issue doesn't have a category which makes it harder for us to keep track of it. Please add an appropriate category.

@KungFuCookie

This comment has been minimized.

Copy link

KungFuCookie commented Dec 7, 2018

Is there an indication when this will be available?

@torch2424

This comment has been minimized.

Copy link
Member

torch2424 commented Dec 10, 2018

@KungFuCookie As of right now from what I know, we don't have a set timeline for when this will be released. But it is definitely something we are working on.

I'll go ahead and reach out to the Google Pay team to see how are things on their end to see if I can get an answer for you 😄

Edit: Got a response back, it was put on the sidelines for a little bit, partly because we were finalizing Asynchronous Input within AMP Form. But we plan to pick this back up soon, probably sometime after the holidays in Q1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.