OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Why are Stripe Checkout sample amounts hardcoded? (How do we get basket specific unit price, quantity and currency?)

  • Thread starter Thread starter stacking
  • Start date Start date
S

stacking

Guest
I don't understand the Stripe express checkout sample code: https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.

Amounts and currency are hardcoded. What if someone buys more than one product - or is paying in another currency?

Client-side

Code:
expressCheckoutElement.on('confirm', async (event) => {
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch('/create-intent', {
    method: 'POST',
  });
  const {client_secret: clientSecret} = await res.json();

  const {error} = await stripe.confirmPayment({
    // `elements` instance used to create the Express Checkout Element
    elements,
    // `clientSecret` from the created PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // The payment UI automatically closes with a success animation.
    // Your customer is redirected to your `return_url`.
  }
});

Server-side

Code:
const stripe = require("stripe")("my precious");
const express = require('express');
const app = express();

app.use(express.static("."));

app.post('/create-intent', async (req, res) => {
  const intent = await stripe.paymentIntents.create({
    amount: 1099,
    currency: 'usd',
    // In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
  });
  res.json({client_secret: intent.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

Please help a newb.

I've seen some suggestion of passing this information in the body of the post request:

client-side

Code:
  const res = await fetch('/create-intent', {
    method: 'POST',
    body: JSON.stringify({
         amount: myamount,
         currency: mycurrency
    )}
  });

server-side:

Code:
  const intent = await stripe.paymentIntents.create({
    amount: req.body.amount,
    currency: req.body.currency,
    // In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
  });

But it's unclear how:

  1. expressCheckoutElement.on('confirm', async (event) => {}) gets these variables - are they just globals set outside its scope? (eg those with which we mounted the express checkout element)
  2. the server-side code validates the client-side order details if we're just passing the former to the latter

please - help a newb.

<p>I don't understand the Stripe express checkout sample code: <a href="https://docs.stripe.com/elements/express-checkout-element/accept-a-payment" rel="nofollow noreferrer">https://docs.stripe.com/elements/express-checkout-element/accept-a-payment</a>.</p>
<p>Amounts and currency are hardcoded. What if someone buys more than one product - or is paying in another currency?</p>
<p>Client-side</p>
<pre><code>expressCheckoutElement.on('confirm', async (event) => {
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}

// Create the PaymentIntent and obtain clientSecret
const res = await fetch('/create-intent', {
method: 'POST',
});
const {client_secret: clientSecret} = await res.json();

const {error} = await stripe.confirmPayment({
// `elements` instance used to create the Express Checkout Element
elements,
// `clientSecret` from the created PaymentIntent
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});

if (error) {
// This point is only reached if there's an immediate error when
// confirming the payment. Show the error to your customer (for example, payment details incomplete)
handleError(error);
} else {
// The payment UI automatically closes with a success animation.
// Your customer is redirected to your `return_url`.
}
});
</code></pre>
<p>Server-side</p>
<pre><code>const stripe = require("stripe")("my precious");
const express = require('express');
const app = express();

app.use(express.static("."));

app.post('/create-intent', async (req, res) => {
const intent = await stripe.paymentIntents.create({
amount: 1099,
currency: 'usd',
// In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
automatic_payment_methods: {enabled: true},
});
res.json({client_secret: intent.client_secret});
});

app.listen(3000, () => {
console.log('Running on port 3000');
});
</code></pre>
<p>Please help a newb.</p>
<p>I've seen some suggestion of passing this information in the body of the post request:</p>
<p>client-side</p>
<pre><code> const res = await fetch('/create-intent', {
method: 'POST',
body: JSON.stringify({
amount: myamount,
currency: mycurrency
)}
});
</code></pre>
<p>server-side:</p>
<pre><code> const intent = await stripe.paymentIntents.create({
amount: req.body.amount,
currency: req.body.currency,
// In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
automatic_payment_methods: {enabled: true},
});
</code></pre>
<p>But it's unclear how:</p>
<ol>
<li>expressCheckoutElement.on('confirm', async (event) => {}) gets these variables - are they just globals set outside its scope? (eg those with which we mounted the express checkout element)</li>
<li>the server-side code validates the client-side order details if we're just passing the former to the latter</li>
</ol>
<p>please - help a newb.</p>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top