#leslie89_react-payment-element

1 messages ¡ Page 1 of 1 (latest)

pure streamBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1240253898288267345

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

deft summit
#

so i don't understand if i can/should have a dedicated html file just for payment?
I mean that's an architectural decision for you to make. Depends what you're build I guess! In most scenarios people would have a checkout page which would include payment info

pure streamBOT
#

leslie89_react-payment-element

tranquil magnet
#

is it possible to create an html file in my react app with the following code provided on stripe repo in addition to my already existing index.html? My understanding is it necessary to redirect the routes in my backend (nodes.js /express) to this file <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Payment</title>

<link rel="stylesheet" href="/css/base.css" />
<script src="https://js.stripe.com/v3/"></script>

<script src="/utils.js" defer></script>
<script src="/index.js" defer></script>

</head>
<body>
<main>
<h1>Payment</h1>

  <p>Enable more payment method types <a
    href="https://dashboard.stripe.com/settings/payment_methods" target="_blank">in your
    dashboard</a>.</p>

  <form id="payment-form">
    <div id="link-authentication-element">
      <!-- Elements will create authentication element here -->
    </div>
    <div id="payment-element">
      <!-- Elements will create form elements here -->
    </div>
    <button id="submit">Pay now</button>
    <div id="error-message">
      <!-- Display error message to your customers here -->
    </div>
  </form>

  <div id="messages" role="alert" style="display: none;"></div>
</main>

</body>
</html>

Stripe Login | Sign in to the Stripe Dashboard

Sign in to the Stripe Dashboard to manage business payments and operations in your account. Manage payments and refunds, respond to disputes and more.

deft summit
#

My understanding of React is that you only have a single HTML file which is an entry point to mount the React application. Everything after that is rendered from components

tranquil magnet
#

could you recommend a ressource for how to implement PaymentElement using react ?

deft summit
tranquil magnet
#

ok thank you! i will read that carefully!