cogniDNA-elements-styling | Stripe Developers | Page 1

worthy spear May 25, 2022, 12:55 AM

#

Hello! So it looks like you're trying to add styling to the card element? Is that correct?

#

What are you trying to get it to look like (if you have a link to the doc you're referencing that'd be great)

warm oasis May 25, 2022, 12:59 AM

#

Yes. We want payment section to be more beautiful and professional looking. I took that screenshot from Stripe website

#

Many people visit our payment page after seeing price but few pay. We think a better looking payment page will increase trust so they give credit card info

worthy spear May 25, 2022, 1:01 AM

#

I need to head out, but @pale valve can keep helping you. The big thing here is that the latest screenshot you've shared is a completely different element (the Payment Element), while your first screenshot uses the card element

#

You'll need to change your migration if you want to have it look like that

warm oasis May 25, 2022, 1:02 AM

#

Yes. We would like to have our credit card payment section beautiful like that

pale valve May 25, 2022, 1:03 AM

#

Hi @warm oasis, I'm taking over from @worthy spear

#

Sounds like Payment Element is something you're looking for. You can start with Payment Element doc here: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements

#

You can style Payment Element with appearance API: https://stripe.com/docs/stripe-js/appearance-api

warm oasis May 25, 2022, 1:06 AM

#

We tried but somehow could not make it work. What is the best way to get feedback from you to find out what we are doing wrong. Screenshot of code, error, summary of what we did, something else?

pale valve May 25, 2022, 1:07 AM

#

Could you share the issue that you're facing? Code and error will help

warm oasis May 25, 2022, 1:09 AM

#

OK. I will meet my cofounder in couple hours and we will look into it and share then. Thank you very much 🙂

pale valve May 25, 2022, 1:15 AM

#

No problem! Let me know if you need more help

quasi vapor May 25, 2022, 3:58 AM

#

hi river, thanks for being so responsive; I have a few more details:
we started with the card element, and I thought we could style it, but changing the styling doesn't seem to take effect.
I've started trying to use the Payment Request Element, but so far I can't get the button to appear.

warm oasis May 25, 2022, 4:00 AM

#

@pale valve I think we are ready with our more specific questions now 🙂

quasi vapor May 25, 2022, 4:04 AM

#

it looks like the element is mounting correctly, but it's invisible

pale valve May 25, 2022, 4:08 AM

#

could you share your test site or code for me to take a look?

quasi vapor May 25, 2022, 4:14 AM

#

should I just paste here? I'm actually worried that it's not working on my test site because r.stripe.com is failing HSTS security checks from my browser

#

so far I have:

   var paymentRequest = stripe.paymentRequest({
          country: 'US',
          currency: 'usd',
          total: {
              label: 'total',
              amount: 1000,
          },  
          requestPayerName: false,
          requestPayerEmail: true,
      }); 
  
      var prButton = elements.create('paymentRequestButton', {
          paymentRequest: paymentRequest,
      }); 
     prButton.mount("#payment-request-button");

pale valve May 25, 2022, 4:16 AM

#

What is the exact error that you're seeing when you mentioned "r.stripe.com is failing HSTS security checks from my browser"?

quasi vapor May 25, 2022, 4:18 AM

#

here's the last few errors from my console

#

showing the #payment-request-button element on the page looks like:

#

oh, it didn't capture, but that blank space ebtween "order total" and "payment details" does contain the element

warm oasis May 25, 2022, 4:21 AM

#

quasi vapor May 25, 2022, 4:22 AM

#

pale valve May 25, 2022, 4:22 AM

#

I'm confused here! Payment request is for wallet payment such as Apple Pay and Google Pay, which is totally different from Payment Element

quasi vapor May 25, 2022, 4:22 AM

#

that's what we're trying to achieve: wallet payment

#

I guess there's two things: wallet payment and styling; I'm more concerned about getting wallet payment to work though

pale valve May 25, 2022, 4:24 AM

#

Ah I see

#

I'm a bit confused how's the styling related to wallet payment

quasi vapor May 25, 2022, 4:24 AM

#

it's not

pale valve May 25, 2022, 4:25 AM

#

Currently, it looks like you use separate elements for different payment methods, i.e. card element and payment request

quasi vapor May 25, 2022, 4:26 AM

#

I thought the PaymentRequest element would also handle cards? I might be mistaken, but it's no trouble to keep the card element separately

pale valve May 25, 2022, 4:27 AM

#

Nope. Payment request is only for wallet payment only. The one with both cards and wallet is Payment Element

quasi vapor May 25, 2022, 4:27 AM

#

or I guess you've said that the Payment element can replace the Card element for card payments? is that right?

#

oh

#

that's useful information, thanks!

pale valve May 25, 2022, 4:27 AM

#

This is the doc for Payment Element: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements

quasi vapor May 25, 2022, 4:27 AM

#

so really I should be focusing on Payment rather than PaymentRequest

pale valve May 25, 2022, 4:28 AM

#

Yes, you're right

quasi vapor May 25, 2022, 4:30 AM

#

that should be pretty quick to change...

#

just a minute

#

omg, looks like it actually worked:

pale valve May 25, 2022, 4:41 AM

#

That's great! In order to have wallet payment such as Apple Pay, you will still need to complete the pre-requisites here: https://stripe.com/docs/stripe-js/elements/payment-request-button#html-js-prerequisites

#

Also ensure that your browser has met the requirements to have it display: https://stripe.com/docs/stripe-js/elements/payment-request-button?html-or-react=html#html-js-testing

#

Please ignore the integration part in this doc which it's specific for wallet payment, but you will still need those pre-requisites and requirements for wallet to appear in Payment Element

quasi vapor May 25, 2022, 5:13 AM

#

do you know what the "Not a valid URL" error means from the payment_intents confirm api?

opal torrent May 25, 2022, 5:13 AM

#

👋 stepping in for river

#

"Not a valid URL" sounds like a parameter error. I can take a closer look if you share the request id (req_xxx) for that confirmation call

quasi vapor May 25, 2022, 5:15 AM

#

does the return_url parameter to confirmPayment need to be absolute?

opal torrent May 25, 2022, 5:18 AM

#

yes, as a normal URL

warm oasis May 25, 2022, 5:33 AM

#

opal torrent "Not a valid URL" sounds like a parameter error. I can take a closer look if you...

request-id: req_FTwantkl3ttAqP

#

Sorry for late response. We have been trying to make URL valid in django template

opal torrent May 25, 2022, 5:36 AM

#

Yeah the value passed in is not a valid URL /stripe_fulfill/

#

You would need to build a full URL using django before passing in this parameter

warm oasis May 25, 2022, 6:31 AM

#

opal torrent Yeah the value passed in is not a valid URL `/stripe_fulfill/`

Thx so much. @quasi vapor just completed building it. We appreciate your guidance a lot. You folks at Stripe are awesome!

#

We will back next week for Apple pay help 😆

#cogniDNA-elements-styling