#Cocochief-Stripe-Elements

1 messages · Page 1 of 1 (latest)

naive quest
#

Looking in to these and will get back to you with what I can find.

solar stratus
#

thx. Someone else did the coding, and here is the code that I can see.

#

// Fetch public key and initialize Stripe Elements
// Elements examples: https://stripe.dev/elements-examples/
let stripe, cardElement;
stripe = Stripe(getPublishableKey());

const elements = stripe.elements();
// cardElement = elements.create('cardNumber');
var elementClasses = {
focus: 'focus',
empty: 'empty',
invalid: 'invalid',
};

var screesize;
if(window.innerWidth <= 440){
screesize = 'small';
}

var elementStyles = {
base: {
color: '#000',
fontSize: screesize === 'small' ? '12px' : '16px',

':focus': {
  color: '#000',
},

'::placeholder': {
  color: 'rgba(0, 0, 0, 0.5)',
  fontWeight:'500',
},

':focus::placeholder': {
  color: 'rgba(0, 0, 0, 0.5)',
},

},
invalid: {
color: 'red',
':focus': {
color: 'red',
},
},
};
var cardNumber = elements.create('cardNumber', {
style: elementStyles,
classes: elementClasses,
});

var cardExpiry = elements.create('cardExpiry', {
style: elementStyles,
classes: elementClasses,
});

var cardCvc = elements.create('cardCvc', {
style: elementStyles,
classes: elementClasses,
});

var zipcode = elements.create('postalCode', {
style: elementStyles,
classes: elementClasses,
});

cardNumber.mount('#card-number');
cardExpiry.mount('#card-expiry');
cardCvc.mount('#card-cvc');
zipcode.mount('#card-zipcode');

naive quest
#

Hey apologies for the delay, I am still looking in to this. Finding info on other Elements customizations but not these specific ones yet

solar stratus
solid herald
#

hello, taking over! that's a lot of questions at once with a lot of code

#

what is blocking you with your ask about placeholders?

solar stratus
#

For the placeholder for the zip code, we can't seem to change it.

solid herald
#

yeah, mostly this is not supported

#

it's been deprecated/undocumented for a long time now

#

don't use this element at all, build your own

solar stratus
#

Instead of 90210 (which seems to be the default), we would like to change it....

#

mmm.... I thought elements is the recommended way to do things?

solid herald
#

Elements is the way, you have to use it for card details (number, cvc, expiry). postal code is optional, we strongly recommend using our approach: single line input element where we can dynamically hide/show the postal code based on the card's country as you type it with right localization

#

you don't use that though, you seem to go down the "split fields" approach where you have an element for each. In that world, it's a bad idea to use the postal code element, just remove it entirely and use your own logic/form validation for it from scratch, like you would to collect the cardholder's name or email

solar stratus
solid herald
#

There are 2 separate version of Elements
1/ Single line input element, create a card element, we collect postal code when needed with localization
2/ Split fields element (what you use), where you create a separate element for each part. That one while we have a postal code element we strongly discourage anyone from using it.

#

since you're in case #2 and you're hitting some of the limitations I am just encouraging you to change your approach and build your own postal code element with your own placeholder logic

solar stratus
#

Oh... I see... In that case, we would need to pass the Postal code to you separately?

#

OK - let me discuss with our designer about potentially changing to #1.

#

How about my later question about the credit card scanning. Is that supported? Especially if I use #1 approach?

solid herald
#

In that case, we would need to pass the Postal code to you separately?
It's not really separate per se, it's part of the call you make in JS, it's just an extra option, similar to how you pass name/address if you were to collect it. It's not greatly documented but something like this const {paymentIntent, error} = await stripe.confirmCardPayment( PAYMENT_INTENT_SECRET, { payment_method: { card: cardElement, billing_details: { address: { postal_code: '90210', }, }, }, } );

solar stratus
#

I see.. thx. .

#

I guess I was not aware that there are 2 approaches even, and that one is discouraged. Are there other reasons we should switch. to #1?

#

In other words, given that we could get around the zipcode issue, are there more reasons we should switch?

solid herald
#

#1 and #2 are fine together. What is discouraged is #2 + the old postal code element, mostly because it doesn't work the way you would expect (it doesn't dynamically switch to placeholder based on the card number's BIN and country and such (only the single line input element does that today)

#

so #2 is fine if you prefer it but you should build your postal code input element

#

#1 is definitely preferred because it is way easier to implement

#

(asking about card scanning)

solar stratus
#

Got it. That's very helpful. I just spoke with our designer. We really like example 4 in https://stripe.dev/elements-examples/. I am assuming this works with Google & Apple Pay properly as well? Is there any caveat we should be aware of with this example?

#

One thing I do notice is that it doesn't collect the name field. I also noticed that the card scanning doesn't seem to pickup the name from the card?

#

In other words, is skipping the name field ok?

solid herald
#

Apple Pay and Google Pay are entirely separate (The button above) so completely separate integration

#

but yes that one is the "single line input", definitely the recommended path

solar stratus
#

Does the github example code for example 4 include those Apple Pay and Google Pay buttons then?

#

I am trying to figure out the most straightforward way to get to a "recommended" best practice, basically.

solid herald
#

those really are just examples

#

candidly: they were written 3 years ago and I don't know how maintained they are, I wouldn't really look at them beyond "ideas of how to style your payment form"

#

oh also sorry completely forgot to circle back: card scanning doesn't work on iOS in Elements today