#vickyh_docs
cunning sealBOT
đ Welcome to your new thread!
â˛ď¸ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
âąď¸ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
đ This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1267391681695846451
đ Have more to share? Add more details, code, screenshots, videos, etc. below.
sullen quartzBOT
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.
- vickyh_docs, 4 days ago, 32 messages
- vickyh_docs, 5 days ago, 27 messages
lunar vault
"message": "Payment details were collected through Stripe Elements using automatic payment methods and cannot be confirmed with a Payment Intent configured with payment_method_types.",
curl 'https://api.stripe.com/v1/payment_intents/pi_3PhoVkKPLd55usy70EkTSp0b/confirm'
-H 'accept: application/json'
-H 'accept-language: en-US,en;q=0.9'
-H 'content-type: application/x-www-form-urlencoded'
-H 'origin: https://js.stripe.com'
-H 'priority: u=1, i'
-H 'referer: https://js.stripe.com/'
-H 'sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"'
-H 'sec-ch-ua-mobile: ?1'
-H 'sec-ch-ua-platform: "Android"'
-H 'sec-fetch-dest: empty'
-H 'sec-fetch-mode: cors'
-H 'sec-fetch-site: same-site'
-H 'user-agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36'
--data-raw 'return_url=https%3A%2F%2Fganknow.com%2Fmanage%2Fpayment-detail%2FDN-240729-BTUBWDOWC&payment_method_data[type]=card&payment_method_data[card][token]=tok_1PhoVjKPLd55usy7RVLwK4TZ&payment_method_data[billing_details][name]=Vicky+Hermawan&payment_method_data[billing_details][address][line1]=tokyo+riverside&payment_method_data[billing_details][address][city]=&payment_method_data[billing_details][address][state]=Banten&payment_method_data[billing_details][address][postal_code]=15510&payment_method_data[billing_details][address][country]=ID&payment_method_data[billing_details][email]=vickyhrmawan%40gmail.com&payment_method_data[payment_user_agent]=stripe.js%2F5b578795ab%3B+stripe-js-v3%2F5b578795ab%3B+express-checkout-element%3B+deferred-intent%3B+autopm&payment_method_data[referrer]=https%3A%2F%2F70edfeb196a6.ngrok.app&payment_method_data[time_on_page]=196279&payment_method_data[client_attribution_metadata][client_session_id]=22a7760c-d1d5-4e3c-a4f8-6eb1ca49b4c4&payment_method_data[client_attribution_metadata][merchant_integration_source]=elements&payment_method_data[client_attribution_metadata][merchant_integration_subtype]=express-checkout-element&payment_method_data[client_attribution_metadata][merchant_integration_version]=2021&payment_method_data[client_attribution_metadata][payment_intent_creation_flow]=deferred&payment_method_data[client_attribution_metadata][payment_method_selection_flow]=automatic&payment_method_data[guid]=1eb75774-50ea-4017-b59c-64841eafd4c31d5f4d&payment_method_data[muid]=7b385759-6aaf-4bca-9f68-13b0d359a2923db7d9&payment_method_data[sid]=c7e90241-4096-42d1-9909-c3651d70816ba3a095&expected_payment_method_type=card&client_context[currency]=idr&client_context[mode]=payment&radar_options[hcaptcha_token]=20000000-aaaa-bbbb-cccc-000000000002&use_stripe_sdk=true&key=pk_test_51HYmjwKPLd55usy7Pdr1VfC5ShdwX16IQC0GwmijfpNtyuctzQRGj6j83KZAugL9cZzVeKBTSIwRuijpZU4FLZGn00bSn4BR6o&client_secret=pi_3PhoVkKPLd55usy70EkTSp0b_secret_RkG84KMpCqqU9vtpu4wkJFLzt'
drifting crypt
hi! what does the frontend code where you initialise stripe.js and mount the ExpressCheckoutElement, and confirm the PaymentIntent, look like?
lunar vault
this.setLoading(true)
await this.getCheckoutSummary()
// Create payment request to proceed
let totalPrice
// Ensure number in boost page is not changed
if (this.boostPage) {
// Use Math.round because of some calculation resulting incorrect rounding
totalPrice = Math.round(this.totalAmount * 100)
} else {
totalPrice = parseInt(this.totalAmount * 100, 10)
}
console.log(totalPrice)
const initialOptions = {
mode: 'payment',
amount: totalPrice,
currency: this.userCurrency.toLowerCase(),
}
const options = {
// Customizable by using the Appearance API.
paymentMethods: {
amazonPay: 'never',
link: 'never',
paypal: 'never',
applePay: 'never',
googlePay: 'always',
},
buttonTheme: {
applePay: 'white',
googlePay: 'white',
},
}
const elements = this.stripe.elements(initialOptions)
this.stripeElement = elements.create('expressCheckout', options)
this.stripeElement.mount('#express-checkout-element')
document.getElementById('payment-button').style.display = 'none'
document.getElementById('express-checkout-element').style.display = 'block'
this.stripeElement.on('click', event => {
const paymentOptions = {
emailRequired: true,
}
event.resolve(paymentOptions)
})
this.stripeElement.on('confirm', async e => {
console.log(e)
const payload = {
usecase_data: {
payment_dest_data: null,
payment_src: this.paymentType ? this.paymentType.toUpperCase() : null,
payment_src_data: null,
price_unit_currency: 'USD',
currency_as_charged: this.userCurrency.toUpperCase(),
},
}
this.setLoading(true)
this.$emit('pay', {
payload,
callback: data => this.confirmStripeElement(elements, data),
})
})
this.setLoading(false)
},``` const { error } = await this.stripe.confirmPayment({
// `Elements` instance that's used to create the Express Checkout Element.
elements,
// `clientSecret` from the created PaymentIntent
clientSecret,
confirmParams: {
return_url: `https://example.com/id}`,
},
// Uncomment below if you only want redirect for redirect-based payments.
redirect: 'if_required',
})
if (error) {
// This point is reached only if there's an immediate error when confirming the payment. Show the error to your customer (for example, payment details incomplete).
} else {
// Your customer will be redirected to your `return_url`.
}
},```I'm migrating from payment request button to express checkout element
drifting crypt
ok. Well because you're using the deferred PI flow, you should either
- change your backend code to pass
automatic_payment_methods[enabled]=truehttps://docs.stripe.com/api/payment_intents/create#create_payment_intent-automatic_payment_methods - or, change your frontend code to pass
paymentMethodTypes=['card']https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodTypes
lunar vault
if backend use this code, that means all other card transaction will be affected?
drifting crypt
depends what you mean by "affected"; it enables automatic pyment methods, the other impact of that really depends on how the rest of your integration works so it's hard for me to give you any answer other than "probably not but you should test all your code and flows"
drifting crypt
the amount is set by what you set on the PaymentIntent on the backend when you create it.
lunar vault
shouldnt it be from this option?
mode: 'payment',
amount: totalPrice,
currency: this.userCurrency.toLowerCase(),
}
const options = {
// Customizable by using the Appearance API.
paymentMethods: {
amazonPay: 'never',
link: 'never',
paypal: 'never',
applePay: 'never',
googlePay: 'always',
},
buttonTheme: {
applePay: 'white',
googlePay: 'white',
},
}
const elements = this.stripe.elements(initialOptions)```because we need to pass the element for confirming transaction
drifting crypt
no, that's just for the frontend display. You don't want the frontend to control the actual amount because then a customer can just edit the JS locally and charge themselves any thing they want.
usually the concept would be that you submit something like your current cart to the backend, the backend looks up prices in its database, and creates + return a PaymentIntent for the final amount
lunar vault
got it, may I know how long this thread active? I need to discuss with my teammates
drifting crypt
about 40 minutes probably
drifting crypt
great!
lunar vault
btw for apple pay
is there any way if user hasnt set up any card, they were able to do it from the elements?
google has this feature
drifting crypt
AFAIK I don't think we've implemented it this way, we use the function in Apple's SDK that also checks if there is a valid card in the wallet.
lunar vault
ah got it, really thanks for the fast response! you guys did a brilliant job setting this discord for us devs.
cunning sealBOT