Eli - Payment Element | Stripe Developers | Page 1

night flume Aug 19, 2022, 5:18 PM

#

Hi 👋
What seems to be the problem?

olive ice Aug 19, 2022, 5:19 PM

#

I’ll be honest. Idk if it’s possible to help as there are no error messages on my end. Just an empty object. And it is possible that the error is with the package I’m using [ https://github.com/ectoflow/vue-stripe-js ] but there doesn’t seem anyone else has this problem.

#

const s = await loadStripe(
useAppStateStore().clientSettings!.stripePublishableKey,
{
betas: ['process_order_beta_1'],
apiVersion: "2020-08-27; orders_beta=v4",
}
);

const pay = async () => {

const v = paymentElements.value!;
console.log(v);
try {
    const res = await s!.processOrder({
        elements: v.elements,
        confirmParams: {

            // Return URL where the customer should be redirected after the Order's payment is confirmed.
            return_url: 'http://localhost:3001/order/123/status',
        },
    })
    console.log('RESULT');
    console.log(res);
} catch (e) {
    console.log('ERROR');
    console.log(e);
}

#

This is throwing back
ERROR
{}

night flume Aug 19, 2022, 5:21 PM

#

Okay but are you using the Payment Element provider anywhere here?

olive ice Aug 19, 2022, 5:22 PM

#

#

const submit = async () => {
const res = await openOrderProvider.submit({ expectedTotal: openOrderProvider.data!.amountTotal, shippingSameAsBilling: true });
elementsOptions.clientSecret = res.ocs; //res.ocs;
submitted.value = true;
}

#

=======
I am calling submit on btn press which gets their order client secret and the payment element pops up fine. I filled in the fields and hit pay button which runs pay methods above and just throwing ERROR with empty object (my catch block)

night flume Aug 19, 2022, 5:24 PM

#

Okay that's a lot of code, which is hard to read if you don't use three ` to make a code block.

olive ice Aug 19, 2022, 5:25 PM

#

Srry

#


<StripeElements v-if="submitted" v-slot="{ elements, instance }" ref="paymentElements"
                :stripe-key="appStateStore.clientSettings!.stripePublishableKey" :instance-options="instanceOptions"
                :elements-options="elementsOptions">
                <StripeElement ref="payment" type="payment" :elements="elements" />
                <v-btn @click="pay(elements)">Pay</v-btn>
            </StripeElements>

#


const s = await loadStripe(
    useAppStateStore().clientSettings!.stripePublishableKey,
    {
        betas: ['process_order_beta_1'],
        apiVersion: "2020-08-27; orders_beta=v4",
    }
);

zenith sedge Aug 19, 2022, 5:26 PM

#

👋 stepping in as Snufkin needs to stepa away

olive ice Aug 19, 2022, 5:26 PM

#


const submit = async () => {
    const res = await openOrderProvider.submit({ expectedTotal: openOrderProvider.data!.amountTotal, shippingSameAsBilling: true });
    elementsOptions.clientSecret = res.ocs; //res.ocs;
    submitted.value = true;
}

zenith sedge Aug 19, 2022, 5:26 PM

#

Are you seeing Payment Element render?

olive ice Aug 19, 2022, 5:26 PM

#

Yes

#

But no error message. Just an empty object

zenith sedge Aug 19, 2022, 5:27 PM

#

Just an empty object where?

#

Ah also you should be aware of https://stripe.com/docs/orders

#

We are no longer accepting beta users so you may want to reconsider chasing this integration.

olive ice Aug 19, 2022, 5:28 PM

#


const pay = async (elements: any) => {

    const v = paymentElements.value!;
    console.log(v);
    try {
        const res = await s!.processOrder({
            elements: v.elements,
            confirmParams: {

                // Return URL where the customer should be redirected after the Order's payment is confirmed.
                return_url: 'http://localhost:3001/order/123/status',
            },
        })
        console.log('RESULT');
        console.log(res);
    } catch (e) {
        console.log('ERROR');
        console.log(e);
    }
}

#

This is showing:
ERROR
{}

#

What do u mean?

#

Ur dropping g the order API?

zenith sedge Aug 19, 2022, 5:29 PM

#

I'm not sure. Overall it looks like we aren't accepting more beta users at the moment. I'd recommend reaching out to our Support team (https://support.stripe.com/contact/login) to get full context as we aren't the most familiar with betas here.

Stripe: Help & Support

Find help and support for Stripe. Our support center provides answers on all types of situations, including account information, charges and refunds, and subscriptions information. Get your questions answered and find international support for Stripe.

olive ice Aug 19, 2022, 5:30 PM

#

I’m already part of the beta tho

zenith sedge Aug 19, 2022, 5:31 PM

#

Hmm okay

#

Can you see the Orders docs? Like are you following a specific guide?

olive ice Aug 19, 2022, 5:40 PM

#

https://stripe.com/docs/orders/create-and-process

Create and process orders

Create orders, submit orders, and collect payment

zenith sedge Aug 19, 2022, 5:44 PM

#

Hmm k. What does your console.log(res); show?

olive ice Aug 19, 2022, 5:52 PM

#

After looking through the all the xhr requests I can see that upon clicking pay I am sending a payload with an event_name of elements.fatal.uncaught_error to https://r.stripe.com/0 that also contains an event_id. Do you have the ability to look this up?

zenith sedge Aug 19, 2022, 5:52 PM

#

You can ignore that.

#

r.stripe.com is just our internal fraud prevention stuff

#

It has no affect on the integration

olive ice Aug 19, 2022, 5:52 PM

#

Ahh.. oh well

zenith sedge Aug 19, 2022, 5:53 PM

#

Sometimes you will see errors like that in your Console

olive ice Aug 19, 2022, 6:00 PM

#

Now I just confused. I realized I am sending a post request to:
https://api.stripe.com/v1/orders/order_1LYZGNK7BFZJZC63kAs3yfyK/submit
When I click pay. Shouldn’t processOrder be paying the order and not submitting it?

zenith sedge Aug 19, 2022, 6:01 PM

#

I believe the processOrder method does submit the Order

#

We call that out here: https://stripe.com/docs/orders/create-and-process#submit-and-confirm

Create and process orders

Create orders, submit orders, and collect payment

olive ice Aug 19, 2022, 6:04 PM

#

Then how do I pay the order

#

/**

Use stripe.processOrder to submit and confirm payment for an Order using data collected by the Payment Element.
When called, stripe.processOrder will attempt to complete any required actions, such as authenticating your user by displaying a 3DS dialog or redirecting them to a bank authorization page.
Your user will be redirected to the return_url you pass once the confirmation is complete.
By default, stripe.processOrder will always redirect to your return_url after a successful confirmation.
If you set redirect: "if_required", then stripe.processOrder will only redirect if your user chooses a redirect-based method.
Setting if_required requires that you handle successful confirmations for redirect-based and non-redirect based payment methods separately.
@docs https://stripe.com/docs/js/orders/process_order
*/

#

^ is in the processOrder source code

zenith sedge Aug 19, 2022, 6:07 PM

#

Yep so processOrder should complete the payment

#

Do you have an example Order ID I can look at that you are testing with?

olive ice Aug 19, 2022, 6:08 PM

#

But I’m getting a 200ok and the order is not getting paid

#

order_1LYZGNK7BFZJZC63kAs3yfyK

#

The status is still “requires_payment_method”

#

There is no logs being generated from me doing anything client side

zenith sedge Aug 19, 2022, 6:11 PM

#

What does your console.log(v); show?

#

Also what exactly is paymentElements.value?

#

Can you share your code for how you are creating and mounting Payment Element?

#

I think the issue is that you aren't properly passing elements to processOrder

olive ice Aug 19, 2022, 6:13 PM

#

But I am getting a 200OK from the api call…

#

Little complicated to show as it’s using bunch of vue related syntax and custom composables

olive ice Aug 19, 2022, 6:15 PM

#

olive ice ``` <StripeElements v-if="submitted" v-slot="{ elements, instance }" ref="payme...

This is current gist

#

paymentElements is a ref to the PaymentElements component

#

I am getting 200ok upon submission. Just no logs on the backend

zenith sedge Aug 19, 2022, 6:19 PM

#

Ah you are passing expected_total, no?

olive ice Aug 19, 2022, 6:19 PM

#

Yes

zenith sedge Aug 19, 2022, 6:20 PM

#

Okay okay I see what's happening I think

olive ice Aug 19, 2022, 6:20 PM

#

Wait.. not to processOrder.. I am passing it server side upon submitting it

zenith sedge Aug 19, 2022, 6:20 PM

#

Right

#

That's the issue!

#

So you are using the separate flow

#

Where you submit it client side

#

And then confirm it server-side

olive ice Aug 19, 2022, 6:20 PM

#

I am submitting server side and want to get payment client side

zenith sedge Aug 19, 2022, 6:21 PM

#

Yeah that's the issue

#

You can't submit server-side unless you want to confirm server-side as well

#

So you would already have the PaymentMethod in this case

#

If you want to collect card details on the client then you don't submit server-side

#

You just use processOrder client side

#

Which will both submit and confirm

olive ice Aug 19, 2022, 6:24 PM

#

Weird.. when I created an app using flutter_stripe I confirmed server side and submitted payment client side..

#

Let me check

#

Tried it your way. Same result. It is being submitted client side but Still still requires payment method. Doesn’t seem to be passing any payment

#

There’s no way to pas estimatedTotal in processOrder in client side

zenith sedge Aug 19, 2022, 6:33 PM

#

Can you provide the Order ID you just tested with?

olive ice Aug 19, 2022, 6:33 PM

#

"order_1LYZuKK7BFZJZC631VX7QXyC"

zenith sedge Aug 19, 2022, 6:42 PM

#

K instead of using res let's use const {error} = await stripe.processOrder({}) and then console.log(error) after that promise resolves

#

And let me know if it is still an empty object

olive ice Aug 19, 2022, 6:45 PM

#

Still empty object. It’s running the catch block [console.log(e)]. It never gets to console.log(res)

#

Which is weird bec the api call is returning 200ok.. so I have no idea what’s causing the exception.. and doubly weird is that returning 200ok and is not adding payment method

strong niche Aug 19, 2022, 6:50 PM

#

Hi there. Taking over for bismarck as they have to step out

#

This error just occurred on order_1LYZuKK7BFZJZC631VX7QXyC ?

#

Or is this another order? Can you share the request ID?

olive ice Aug 19, 2022, 6:51 PM

#

Yes

#

The issue is that processOrder just seems to submit the order and not actually add payment method and complete it

#

And the api call is returning 200ok but throwing an exception with an empty error message

strong niche Aug 19, 2022, 7:01 PM

#

Hm this is weird

#

Can you share your code?

#

Specifically the processOrder part

olive ice Aug 19, 2022, 7:02 PM

#

const pay = async () => {

    const v = paymentElements.value!;
    console.log(v);
    try {
        const res = await s!.processOrder({
            elements: v.elements,
            confirmParams: {

                // Return URL where the customer should be redirected after the Order's payment is confirmed.
                return_url: 'http://localhost:3001/order/123/status',
            },
        })
        console.log('RESULT');
        console.log(res);
    } catch (e) {
        console.log('ERROR');
        console.log(e);
    }
}

#

It’s running the catch block and printing
ERROR
{}

#

But the actual api call to /submit is returning 200ok

strong niche Aug 19, 2022, 7:10 PM

#

Gotcha. Can you also share your code where you initialize elements. Want to see paymentElements here

olive ice Aug 19, 2022, 7:22 PM

#

<StripeElements v-slot="{ elements, instance }" ref="paymentElements"
                :stripe-key="appStateStore.clientSettings!.stripePublishableKey" :instance-options="instanceOptions"
                :elements-options="elementsOptions">
                <StripeElement ref="payment" type="payment" :elements="elements" />
                <v-btn @click="pay()">Pay</v-btn>
            </StripeElements>

strong niche Aug 19, 2022, 7:32 PM

#

Got it thanks

#

Ok I'm going to create a ticket internally to track this bug

#

Can you write in to support: https://support.stripe.com/contact/email about this issue and provide my discord handle: codename_duchess?

Contact Us | Stripe: Help & Support

Find help and support for Stripe. Our support center provides answers on all types of situations, including account information, charges and refunds, and subscriptions information. Get your questions answered and find international support for Stripe.

#

Let me know when you've written in

#

This is so we can track the issue and provide you with updates

olive ice Aug 19, 2022, 7:46 PM

#

After digging through I seemed to find the error message

arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:3:28)]

#

Does this mean anything to u?

strong niche Aug 19, 2022, 7:55 PM

#

Do you have 'use strict' anywhere in your code?

olive ice Aug 19, 2022, 7:59 PM

#

I sent in a support ticket

strong niche Aug 19, 2022, 8:02 PM

#

Ok thanks. The team will investigate this

#Eli - Payment Element