sweetpotato8776 | Stripe Developers | Page 1

tepid auroraBOT Dec 18, 2023, 5:44 AM

#

Hello! We'll be with you shortly. Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

sweetpotato8776, 51 minutes ago, 34 messages

limpid forge Dec 18, 2023, 5:46 AM

#

Yes initialize stripe once, but the elements needs to be separated as I believe their options are different

drowsy canopy Dec 18, 2023, 5:48 AM

#

one stripe object and two elements object ( payment elements object, express checkout element objects) is it right??

limpid forge Dec 18, 2023, 5:48 AM

#

Yeah I think so but please try it

drowsy canopy Dec 18, 2023, 6:17 AM

#

I tried to it, what the error means : Uncaught (in promise) IntegrationError: Unexpected property: elements2. Put additional API properties in params. ?

limpid forge Dec 18, 2023, 6:21 AM

#

Sorry that lacks a lot of details. Can you share the whole code block where you initialized 2 elements?

drowsy canopy Dec 18, 2023, 6:26 AM

#

stripe = Stripe(Rdata.config("payment.stripe.api.key.public"));
const totalOrderAmt = Number(Rdata.get("totalOrderCentAmt"));

const options = {
    mode: 'payment',
    amount:  totalOrderAmt, 
    currency: 'usd',
    paymentMethodCreation: 'manual',
    appearance: {
        theme: 'stripe'
    }
};

elements = stripe.elements(options);

const paymentElement = elements.create("payment",
{
paymentMethodOrder: [ 'card','apple_pay', 'google_pay', 'klarna']
, layout: {
type: 'tabs',
}
,fields : { "billingDetails" : 'never'}
,wallets : {
applePay : 'auto'
,googlePay : 'never'
}
}

);

paymentElement.mount("#div-stripe");

//GOOGLE PAY
const googleElementOption = {
mode: 'payment',
amount: totalOrderAmt, //google/app pay 표시용
currency: 'usd',
};
elements2 = stripe.elements(googleElementOption);

const appearance2 = { /* appearance */ }
const options2 = {
    wallets : {
        applePay : 'never'
        ,googlePay : 'always'
    }
}

expreeCheckoutElements = stripe.elements({
    mode: 'payment',
    amount:  totalOrderAmt,
    currency: 'usd',
    appearance2,
})



expreeCheckoutElements = expreeCheckoutElements.create('expressCheckout', options2);
expreeCheckoutElements.mount('#express-checkout-element');

#

This is the part that mounts the button.

#

expreeCheckoutElements.on('confirm', async (event) => {

    const {error: submitError} = await elements2.submit();
    if (submitError) {
        handleError(submitError);
        return;
    }

    // Create the PaymentIntent and obtain clientSecret
    const {error, paymentMethod} = await stripe.createPaymentMethod({
        elements2,
        params: {
            billing_details: billingDetail
        }
    });


    billingInfo.paymentMethodId = paymentMethod.id;
    const stripeVO = {};
    stripeVO.customerId = Rdata.get("stripeCustId");
    billingInfo.stripeVO = stripeVO;

    // Create the PaymentIntent
    const response = await RestClient.post("/api/stripe/payment-intent")
        .data(billingInfo)
        .silence()
        .run()
        .then(response => {
            return response;
        })
        .catch(err => {
            location.href="/errors/orderError.html";
        });
    if (response) {
        if (response.error) {
            location.href="/errors/orderError.html";
        } else if (response.status === "requires_action") {
            // Use Stripe.js to handle the required next action
            const {error, paymentIntent} = await stripe.handleNextAction({
                clientSecret: response.clientSecret
            });

            if (error) {
                location.href="/errors/orderError.html";
            }
        } else {
            // No actions needed, show success message
            const ordNo = response.ordNo;
            if(ordNo){
                location.replace("/checkout/complete/" + ordNo + ".html");
            }else{
                location.href="/errors/orderError.html";
            }
        }
    }
});

#

oh ..

#

https://api.hcaptcha.com/authenticate 401 (Unauthorized)

Uncaught (in promise) IntegrationError: Unexpected property: elements2. Put additional API properties in params.

#

Is this an error related to Google Pay?

limpid forge Dec 18, 2023, 6:43 AM

#

Not sure. So that error is on the api.hcaptcha.com?

drowsy canopy Dec 18, 2023, 6:47 AM

#

not sure..

#

limpid forge Dec 18, 2023, 6:48 AM

#

They are 2 different errors

#

You would want to fix them one by one

#

elements2 where do you use this variable?

#

Seem you haven't mounted it

drowsy canopy Dec 18, 2023, 6:57 AM

#

expreeCheckoutElements = elements2.create('expressCheckout', options2);
Does this code mean mount?

limpid forge Dec 18, 2023, 7:04 AM

#

No. You have multiple other mount method

drowsy canopy Dec 18, 2023, 7:22 AM

#

expreeCheckoutElements.mount('#express-checkout-element');

#

is this??

#

I guess the button is exposed because there is no problem with the mount?

#

I think that error occurs in the confirm method.

limpid forge Dec 18, 2023, 7:29 AM

#

This mounts the expressCheckoutElements, not elements2

#

Looks like you created multiple Elements but lost track of them

drowsy canopy Dec 18, 2023, 7:35 AM

#

https://stripe.com/docs/elements/express-checkout-element/accept-a-payment?client=html

Express Checkout Element

Learn how to accept payments with the Express Checkout Element.

#

In this document, elements are not mounted.

#

you mean elements2.mount( options )

#

is this code?

limpid forge Dec 18, 2023, 7:47 AM

#

expressCheckoutElement.mount('#express-checkout-element');

This, for each of expressCheckoutElement. I can see you have both elements2 and another expreeCheckoutElements from 2 separated line

elements2 = stripe.elements(googleElementOption);
expreeCheckoutElements = stripe.elements({....

So you probably want to mount them to 2 separated divs? For example #element2 and #express-checkout-element?

drowsy canopy Dec 18, 2023, 8:01 AM

#

no

#

elements2 is Stripe object

#

#

you mean
expreeCheckoutElements = expreeCheckoutElements.create('expressCheckout', options2);
expreeCheckoutElements.mount('#express-checkout-element');

#

this code?

limpid forge Dec 18, 2023, 8:04 AM

#

Yep

#

to be fair this code is also confusing since you are using the same name for 2 objects

drowsy canopy Dec 18, 2023, 8:05 AM

#

#

checkout.jsx:601 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'create')

limpid forge Dec 18, 2023, 8:06 AM

#

it should be something like expreeCheckoutElements = {{some_different_name}}.create('expressCheckout', options2);

drowsy canopy Dec 18, 2023, 8:06 AM

#

I didn't understand what you said.

limpid forge Dec 18, 2023, 8:07 AM

#

I think you want to reorganize your code a little

drowsy canopy Dec 18, 2023, 8:07 AM

#

Is there a reason why element2 object should have a different name?

limpid forge Dec 18, 2023, 8:10 AM

#

No I didn't say that, I meant expreeCheckoutElements should have a different name with the Elements created it

#

but that's a different issue with your elements2

drowsy canopy Dec 18, 2023, 8:10 AM

#

ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

#

What should I do?

limpid forge Dec 18, 2023, 8:18 AM

#

I would recommend write into Support and we can spend more time to help. Also attach your full code and a public accessible URL

drowsy canopy Dec 18, 2023, 8:19 AM

#

Since the site has not been opened yet, it seems impossible to provide the URL...

limpid forge Dec 18, 2023, 8:19 AM

#

Your code has multiple elements and they are a bit messy. You would want to have only one Payment Element page, working first, then add the additional Element Checkout Element, working

#

I see you have at least 3 stripe.elements(....

#

That's 3 different Elements

drowsy canopy Dec 18, 2023, 8:20 AM

#

I think there is a problem with createPaymentMethod.

#

But you told me to create the payment element and express checkout element separately, right?

#

element, paymentElement : payment element
element2 , expreeCheckoutElements : express checkout element

#

#

This is what drawing on the screen looks like.

#

What part do you find strange?

limpid forge Dec 18, 2023, 8:26 AM

#

From

expreeCheckoutElements = expreeCheckoutElements.create('expressCheckout', options2);

change to

expreeCheckoutElements = elements2.create('expressCheckout', options2);

drowsy canopy Dec 18, 2023, 8:28 AM

#

I tried that too and it's the same

#

Uncaught (in promise) IntegrationError: Unexpected property: elements2. Put additional API properties in params.

#

this error occured..

#

#

#

i think submit is not working.

#

When submitting, the payment method ID should come as a response, but it doesn't seem to be the case.

limpid forge Dec 18, 2023, 8:39 AM

#

Why calling createPaymentMethod there? I don't see that step in https://stripe.com/docs/elements/express-checkout-element/accept-a-payment

Express Checkout Element

Learn how to accept payments with the Express Checkout Element.

drowsy canopy Dec 18, 2023, 8:40 AM

#

#

You can see the steps here.

#

I followed the instructions here, but why doesn't it work?

limpid forge Dec 18, 2023, 8:52 AM

#

I see. Where did the error come from? I see you put there 3 breakpoints

drowsy canopy Dec 18, 2023, 8:56 AM

#

where?

tepid auroraBOT Dec 18, 2023, 9:00 AM

#

limpid forge Dec 18, 2023, 9:03 AM

#

drowsy canopy

Here

#

The error comes from the createPaymentMethod line, correct?

#

At this state I would recommend making it publicly accessible, and then we can open and help you debug from our side

#sweetpotato8776