#ara-paymentelement-localhost

1 messages · Page 1 of 1 (latest)

orchid sonnetBOT
thorn swallow
#

Hey @summer bluff ! Can I have a bit more details? Unfortunately you said "checkout element" and that could mean 7 different things. What exact integration path are you using?

summer bluff
# 
<Elements key={clientSecret} options={options} stripe={stripePromise}>
     <CheckoutForm paymentIntentId={paymentIntentId} setAmountTotal=      {setAmountTotal} setTaxAmount={setTaxAmount} />
</Elements>
#

I am using the checkout form for react. It looks like the following:

thorn swallow
#

I'm sorry to be a pain I have no idea what this could be

#

do you have some kind of docs or more details?

summer bluff
#

It works fine on my dev and prod static sites but on my local host it looks like this because my local host isnt ssl certified

#

I was wondering if there is a way to bypass the ssl ceritification for debugging and testing purposes

thorn swallow
#

yeah I'm sorry it's hard you give just pictures and little info of real Stripe code

#

I assume you use PaymentElement? If so it works fine with SSL on localhost

summer bluff
#

Sorry for being so vague. let me try to explain better

# 
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('pk_test_51NW78rKdMBJgME4exXATy3PLVvzrXiDC3kt8vHx9v6OeRcONAyfgCzGwEMWRkMLHKQCsr0QFdNfQghfuB62l4yzY00sx9172AD');

export default function App() {
  const options = {
    // passing the client secret obtained from the server
    clientSecret: '{{CLIENT_SECRET}}',
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};
#

Just like this from the link I sent

#

But the checkout form element only shows the pay now button on my localhost

#

And i think it is to do with ssl certification, my localhost is on https but does not have a valid ssl certificate.

#

I used to self certify and then that would work fine but I am trying to keep my dev code as close as possible to my prod code so I dont want to add any certification mechanisms

thorn swallow
#

but ultimately localhost works totally fine with and without React so whatever error(s) you get it's not due to that

summer bluff
#

Gotcha okay

#

Thank you

thorn swallow
#

When you load the page, look at the JS console in your browser it will tell you the issue

#

ara-paymentelement-localhost

summer bluff
#

I still think the issue is the ssl certificate because there is nothing else different from my local host and my static served websites (besides the fact that they have ssl certification). If im wrong I apologize, but just to clarify you are saying that ssl certification is not required for the element to properly render?

thorn swallow
#

correct SSL is not needed, I use Elements in Test mode with HTTP and localhost all the time

summer bluff
#

Okay, got it. Thank you again

#

Sorry one more thing

#

I am trying to make it such that my users can edit their cart while in the checkout page. I create a new payment intent every time they edit their cart. This comes with a new client secret. Maybe this could be affecting it? Have you worked on a checkout page with dynamic payment intents?

thorn swallow
#

you should definitely not be creating a new PaymentIntent each time. You should re-use the one that exists, store it in a cookie or session or something. Otherwise use the Deferred integration path that might be a lot easier for you: https://stripe.com/docs/payments/accept-a-payment-deferred

summer bluff
#

Okay perfect. Appreciate your help