How to connect Payment Request Button to a form

[Cory]

Hi there,

In the last example on this page https://stripe.github.io/elements-examples/

There is a Payment Request Button. I have a similar form to this, where I need the user to fill out basic info such as an email and password when signing up. But if I attach a Payment Request Button for Apple Pay, for example, the form is completely bypassed, just like in that example. This is problematic as the Payment Request Button does not collect information like email or passwords. Is there a workaround I am missing here? I have tried selecting the button and adding an event listener but it does not work, probably because it is dynamically created.

This is what I am talking about:

[Michael Law]

Hi,

I was under the impression that with Apple Pay you just send the amount as the payment is triggered by the fingerprint and all the information you need is sent back when payment is made. The customer will have filled in and verified all their Apple information so there is no need to pass it anything other than the payment amount.

 

I could be wrong, currently in a training session so have no access to my code 😉

 

 

Thanks,

Michael Law

Web Developer

website | facebook | twitter | linkedin | email policy

T: +44 (0)1302 369121
F: +44 (0)1302 349477




Is a proud supporter of Weston Park Cancer Charity

powered by

--
You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.
To post to this group, send email to api-d...@lists.stripe.com.
Visit this group at https://groups.google.com/a/lists.stripe.com/group/api-discuss/.

[Michael Law]

Had a chance to look at this is what my Vue JS component is this so it looks like you pass it a few attributes as well. I think it is explained here: https://stripe.com/docs/elements/payment-request-button

<template>

    <div id="apple-pay">

        <button v-if="available" @click="onClick" id="apple-pay-button"></button>

        <p class="error" v-text="error" v-if="error"></p>

    </div>

</template>

 

<script>

 

    export default {

        data() {

            return {

                order,

                available: false,

                error: false

            }

        },

 

        created() {

            Stripe.setPublishableKey(window.key);

            Stripe.applePay.checkAvailability(available => this.available = available);

        },

 

        methods: {

            onClick() {

                const paymentRequest = {

                    requiredBillingContactFields: ['postalAddress'],

                    countryCode: 'GB',

                    currencyCode: 'GBP',

                    total: {

                        label: 'Some text in here',

                        amount: order.total.toString()

                    }

                };

 

                const session = Stripe.applePay.buildSession(paymentRequest, this.onComplete, this.onError);

 

                session.oncancel = this.onCancel;

 

                session.begin();

            },

 

            onComplete(result, completion) {

               $.ajax({

                    method: 'POST',

                    url: 'your api url',

                    headers: {

                        'X-CSRF-TOKEN': csrf_token

                    },

                    data: {

                        source: result.token.id

                    }

                }).done(() => {

                    completion(ApplePaySession.STATUS_SUCCESS);

                    window.location.pathname = '/checkout/complete';

                }).fail(() => {

                    completion(ApplePaySession.STATUS_FAILURE);

                });

 

            },

 

            onError(error) {

                this.error = error.message;

            },

 

            onCancel() {

                this.error = 'Payment cancelled';

            }

        }

    }

</script>

 

 

Thanks,

Michael Law

Web Developer

website | facebook | twitter | linkedin | email policy

T: +44 (0)1302 369121
F: +44 (0)1302 349477




Is a proud supporter of Weston Park Cancer Charity

powered by