#nafid_02514
thorny gazelleBOT
Hello! We'll be with you shortly. 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.
- nafid_02514, 8 minutes ago, 12 messages
- nafid_02514, 19 minutes ago, 8 messages
- nafid_02514, 3 hours ago, 7 messages
buoyant blaze
@ancient pond please stop keeping posting the same message multiple times
buoyant blaze
Can you share the doc link you are following ? and the stripe plugin url ?
buoyant blaze
and the link of the Stripe plugin you are using ?
According to the screenshot you are sharing you are not using Stripe Element.
The doc link you are sharing is for this integration:
https://stripe.com/docs/elements/appearance-api
ancient pond
we are using stripe element , wait i can show you
https://stripe.com/docs/js/elements_object/create_element?type=card
we are using elements.create using stripe js
buoyant blaze
Can you share your code please ?
Try testing this code:
var element = elements.create('card', {
style: {
base: {
iconColor: '#c4f0ff',
color: '#fff',
fontWeight: '500',
fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
fontSize: '16px',
fontSmoothing: 'antialiased',
':-webkit-autofill': {
color: '#fce883',
},
'::placeholder': {
color: '#87BBFD',
},
},
invalid: {
iconColor: '#FFC7EE',
color: '#FFC7EE',
},
},
});
we are not using inline card element,
we are using three different fields ,
stripe_card = elements.create( 'cardNumber', { placeholder: eh_stripe_val.card_elements_options.card_number_placeholder,style: elementStyles, classes: elementClasses } );
stripe_exp = elements.create( 'cardExpiry', { placeholder: eh_stripe_val.card_elements_options.card_expiry_placeholder, style: elementStyles, classes: elementClasses } );
stripe_cvc = elements.create( 'cardCvc', { placeholder: eh_stripe_val.card_elements_options.card_cvc_placeholder, style: elementStyles, classes: elementClasses } );
wispy sentinel
hi! I'm taking over this thread.
can you share the code for elementStyles and elementClasses?
and also share a screenshot of what you currently see?
and what exactly would you like to be different?
ancient pond
ok please wait
you can see that card number alignment is wrong
i want somthing like this , card image should be correctly placed
wraith tangle
you can just pass showIcon:true when creating the elements.create( 'cardNumber',) you don't need any of your own code for this(you can remove all this updateCardBrand stuff), it's built-in.
ancient pond
can you please specify the line
wraith tangle
could you review and let me know what line you think it is and I'll let you know if you're on the right track? You're the developer building this, we can not write the code for you and you need to understand what you're writing, we can give you advice though!
ancient pond
just how do i need to edit this,
var elementStyles = {
base: {
iconColor: '#666EE8',
color: '#31325F',
fontSize: '18px',
'::placeholder': {
color: '#CFD7E0',
},
'text-align': 'right',
}
};
there is no example how to add card number options
wraith tangle
it's not related to the styles
as I mentioned, it's an option for elements.create an option mentioned at https://stripe.com/docs/js/elements_object/create_element?type=cardNumber#elements_create-options-showIcon , as part of the same place where you use the option placeholder (https://stripe.com/docs/js/elements_object/create_element?type=cardNumber#elements_create-options-placeholder)
ancient pond
can i get an example code
wraith tangle
we'll close it after some period of inactivity
wraith tangle
you must be doing something wrong then, the option does work.
here's a working example you can compare against. https://jsfiddle.net/cdt43qL1/
wraith tangle
@ancient pond still there?
ancient pond
yes
stripe_card = elements.create( 'cardNumber', { placeholder: eh_stripe_val.card_elements_options.card_number_placeholder,style: elementStyles, classes: elementClasses,showIcon: false, } );
this should hide the icon right , but its not working
wraith tangle
can you elaborate on what "not working" means?
ancient pond
icon is not getting hidden
wraith tangle
this should hide the icon right
it will hide the icon that the Stripe Element itself provides. In your code though you have your own icon controlled by your own code.
wraith tangle
not sure what you mean, it's not the same code.
ancient pond
createElements: function() {
var elementStyles = {
base: {
iconColor: '#666EE8',
color: '#31325F',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
}
}
};
var elementClasses = {
focus: 'focused',
empty: 'empty',
invalid: 'invalid',
};
$( document.body ).trigger( 'wt_stripe_inline_cart_customize', elementStyles );
if ( 'yes' === eh_stripe_val.enabled_inline_form ) {
stripe_card = elements.create( 'card', { style: elementStyles, hidePostalCode: (eh_stripe_val.inline_postalcode ? true : false) } );
stripe_card.addEventListener( 'change', function( event ) {
eh_stripe_form.onCCFormChange();
if ( event.error ) {
$( document.body ).trigger( 'stripeError', event );
}
} );
} else {
stripe_card = elements.create( 'cardNumber', { placeholder: eh_stripe_val.card_elements_options.card_number_placeholder,style: elementStyles, classes: elementClasses,showIcon: false, } );
stripe_exp = elements.create( 'cardExpiry', { placeholder: eh_stripe_val.card_elements_options.card_expiry_placeholder, style: elementStyles, classes: elementClasses } );
stripe_cvc = elements.create( 'cardCvc', { placeholder: eh_stripe_val.card_elements_options.card_cvc_placeholder, style: elementStyles, classes: elementClasses } );
in your code which you are the developer of and wrote, you have a DOM element eh-stripe-card-brand and a JS function updateCardBrand that updates it. That's what this is in your screenshot and issues in your own code cause it to be misaligned.
It's unrelated to the showIcon parameter. What I told you was : remove all your own code for this 'card-brand' element and JS functions for enabling it, since you don't need it. Instead, you can pass showIcon:true and we will show an aligned icon in the CardNumberElement, it's built-in feature of the CardNumberElement that you can use instead of building your own solution.
ancient pond
let me check that
ok its working for me
but in client site its not working
can you please take a look into this
wraith tangle
what specific question are you asking relating to the code/development you're doing? we can't just check a client site for you, you need to investigate/debug and ask a detailed question.