#qzai.
sly path
teal veldt
you probably need to increase the number of rows defined here : https://stripe.com/docs/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout-maxRows
silver raptor
how can i display "view More"
no hide it
maxRows Default is 0, meaning unlimited.
I haven't done any settings
teal veldt
to clarify, do you want to display view more or hide it?
teal veldt
can you share an accessible url for us to take a closer look?
silver raptor
sorry I can't share it
I just want the user to be able to see all by default
can you help me ?
safair
Please open it with safair on your computer
teal veldt
can you share another url? it looks like the previous URL session expired or something
silver raptor
ok
try it
We currently have a problem with our backend
It seems an error was reported
teal veldt
gray cipher
Hi @silver raptor This is Jack, I'm also an engineer from Stripe. Do you have a test account that I can use to log into your website?
silver raptor
I have not set any
gray cipher
Can you share with me the code you wrote to create the express checkout element?
gray cipher
Can you copy and paste the full code here?
silver raptor
<template>
<section >
<van-skeleton row-width="100%" :row="2" v-if="!showStripePayBtn" />
<div id="express-checkout-element">
<!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message" v-if="errorMsg">
{{ errorMsg }}
</div>
</section>
</template>
<script>
import { loadStripe } from "@stripe/stripe-js";
import NP from 'number-precision'
export default{
name:'StripCommon',
props:{
payParams:{
type:Object,
default:()=>{}
},
},
data(){
return {
showStripePayBtn:false,
elements:null,
strip:null,
errorMsg:false
}
},
mounted(){
this.initGooglePay()
},
methods:{
async initGooglePay(){
let publishableKey = process.env.NODE_ENV === "production"
? 'pk_live_51KeENBAcC6VsSIHxVWgJo5GGVAmbEx6kV20QLDLrsVYQ5kgfwWzI8GcoXWVlzJxXHI261EveoyeyPeXPKNchUrsg00AXq9Bpok'
: 'pk_test_51KeENBAcC6VsSIHxWZFNnJjEmwn2q7zfZqO4mVJaiP8ck8ngYNVx8GbmZyNPaoBQsiTzukEYcdARculKIGMdHZdS00EmcRiQhq'
this.stripe = await loadStripe(publishableKey);
const appearance = { /* appearance */ }
const options = {
paymentMethodOrder:['apple_pay','google_pay'],
wallets:{
applePay:'always',
googlePay:'always'
}
}
this.elements = this.stripe.elements({
mode: 'payment',
amount: NP.times(this.payParams.price,100),
currency: 'usd',
appearance,
})
const expressCheckoutElement = this.elements.create('expressCheckout', options)
expressCheckoutElement.mount('#express-checkout-element')
//监听按钮
expressCheckoutElement.on('ready', ({availablePaymentMethods}) => {
if (!availablePaymentMethods) {
// No buttons will show
} else {
this.showStripePayBtn = true
}
});
//监听付款
expressCheckoutElement.on('confirm',this.handleSubmit)
},
async handleSubmit() {
const {error: submitError} = await this.elements.submit();
if (submitError) {
this.errorMsg = submitError.message;
return;
}
const { error } = await this.stripe.confirmPayment({
elements:this.elements,
clientSecret:this.payParams.client_secret,
confirmParams: {
return_url: `${process.env.url}/pay?orderId=${this.payParams.orderId}&intentId=${this.payParams.intent_id}`,
},
});
if (error) {
this.errorMsg = error.message;
} else {
console.log('success')
}
}
}
}
</script>
<style lang="scss" scoped>
.p-btn {
width: 100%;
height: 50px;
margin-top: 20px;
background: #9a8cff;
border-radius: 8px 8px 8px 8px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 16px;
cursor: pointer;
}
</style>
gray cipher
OK, try setting overflow to never https://stripe.com/docs/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout-overflow
gray cipher
I don't see an option to do that. But I'd pass along your feedback to the relevant team.
