#mardo-create token
cloud barn
Hi there!
You also said I am getting the error Uncaught (in promise) {}
Just moving that into the thread
quaint birch
That is what is happening
cloud barn
What line is throwing that error?
quaint birch
stripe.createToken
cloud barn
So it isn't hitting the console.log(result)?
quaint birch
I tried wrapping it in a try/catch and the error is empty
Yeah nothing in result
it never makes it
cloud barn
How are you initializing Stripe?
quaint birch
var stripe = Stripe('pk_test_51L6IgUHCP53xGZa8ZvFgHCmwia7JBvLj9mspy8SaNeiJ3829hFGx46Ef5pcHxyGJXB6OWQfJsoxb7ugoDCMNB7vY00ek9giTGZ');
cloud barn
Hmm okay. Can you share more of your client-side code?
What you have right now looks fine
quaint birch
cloud barn
Ah okay you are creating a Payment Element but attempting to use a cardElement to create your token
If you want to use createToken then you would use create a card Element: https://stripe.com/docs/js/element/other_element
Are you following a certain guide?
Can I ask why you are creating a token as opposed to using Payment Element and confirmPayment?
quaint birch
I followed this exactly..
you can see card is set and on the create and then used in the create token
that is exactly what I am doing
cloud barn
Yeah that is our legacy integration on the Charges API. I would highly recommend you follow https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements or https://stripe.com/docs/payments/accept-card-payments instead.
But if you are going to follow the above, then you need to create a card element as I mentioned. You can see it in the guide you linked: var card = elements.create('card', {style: style});
In your code you are using ``` cardElement = elements.create('payment', {
style: {
base: {
iconColor: '#c4f0ff',
color: 'white',
fontWeight: '900',
fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
fontSize: '16px',
fontSmoothing: 'antialiased',
':-webkit-autofill': {
color: 'white',
},
'::placeholder': {
color: '#87BBFD',
},
},
invalid: {
iconColor: '#FFC7EE',
color: '#FFC7EE',
},
}});
cardElement.mount('#payment-element');
Which is mounting our Payment Element and is a different flow than you are following (it is the first guide I linked above -- https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements)
quaint birch
Which link should I follow?
I am confused
I would like to process the payment on the server with a token
is that no longer how its done?
cloud barn
Why do you want to do that?
quaint birch
I dont want to process the payment on the client
cloud barn
Why don't you want to confirm client-side?
quaint birch
I have to coordinate with other functions on the server and I would rather have that in one place
Doing a client transaction and then submitting that to the server would use http on the client and if that got interuppted I would loose my ability to process the server functions that I need to
..after a client transaction processed
Lots of reasons I wouldnt want to do that
cloud barn
Well you would use Webhooks to ensure you handled everything on the server. We really don't recommend it, but if you really want server-side confirmation then you should follow the flow here: https://stripe.com/docs/payments/accept-a-payment-synchronously
With your current flow, you won't be able to handle 3DS authentication.
quaint birch
Okay let me give this a shot
Thank you for the info, I will reach out if I have more problems
quaint birch
Thank you, appreciate it
Is this also depreciated?
const appearance = {
theme: 'night'
};
// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});
const options = {
clientSecret: '@Model.Value.Stripe_ClientSecret',
// Fully customizable with appearance API.
appearance: { theme : 'flat'},
};
// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
const elements = stripe.elements(options);
I think you are mixing them up 🙂
You can customize the Payment Element using the appearance API. You customize the Card Element when you create the Element based on the options. See: https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options for customizing your Card Element
cloud barn
We never recommend you use your own form fields as that means you have to handle sensitive data and it elevates your PCI burden. You should be using Elements to collect card data.
quaint birch
Okay
cloud barn
And yes, using style allows you to customize Card Element with CSS
quaint birch
One question, if I do it the server side way, does Apple Pay still work?
cloud barn
Yep you can still use Apple Pay with server-side confirmation.