sarita_21302 | Stripe Developers | Page 1

lapis swiftBOT Oct 12, 2023, 1:37 PM

#

thin atlas Oct 12, 2023, 1:37 PM

#

Hello

#

You would use price_data here to create the Price inline

#

https://stripe.com/docs/api/checkout/sessions/create?lang=python#create_checkout_session-line_items-price_data

lapis swiftBOT Oct 12, 2023, 2:00 PM

#

round tide Oct 12, 2023, 2:05 PM

#

Is it possible to display only payment screen and not the product screen on the left?

Screenshot_2023-10-13_at_12.33.38_am.png

thin atlas Oct 12, 2023, 2:05 PM

#

No that's not possible

round tide Oct 12, 2023, 2:11 PM

#

ok. I want to display above 'card information' style card fields on the form created using payment-elements. How can I acheive it? Can I hide the labels, if not, is there any other ways to customize it?

Screenshot_2023-10-13_at_12.39.09_am.png

thin atlas Oct 12, 2023, 2:13 PM

#

You can't customize the text within Payment Element. The customization that you can do is what you see with the Appearance API: https://stripe.com/docs/elements/appearance-api?platform=web

lapis swiftBOT Oct 12, 2023, 2:16 PM

#

round tide Oct 12, 2023, 2:22 PM

#

I changed the labels to b floating but it doesn't seem to be working

const paymentElementOptions = {
layout: "tabs",
labels: "floating",
};

const paymentElement = elements.create("payment", paymentElementOptions);
paymentElement.mount("#payment-element");

thin atlas Oct 12, 2023, 2:24 PM

#

What does "it doesn't seem to be working" mean?

round tide Oct 12, 2023, 2:25 PM

#

The labels are not floating, it's always there. is there a sample page that I can refer to see how it looks

thin atlas Oct 12, 2023, 2:25 PM

#

You need to pass an appearance object to paymentElementOptions

round tide Oct 12, 2023, 2:26 PM

#

ok

#

const appearance = {
rules: {
'.Tab': {
border: '1px solid #E0E6EB',
boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)',
},

  '.Tab:hover': {
    color: 'var(--colorText)',
  },

  '.Tab--selected': {
    borderColor: '#E0E6EB',
    boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)',
  },

  '.Input--invalid': {
    boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)',
  },

  // See all supported class names and selector syntax below
}

};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

#sarita_21302