Rahul Maru

[raw gazelle]

By capturing, which api/method do you refer to exactly?

[silk wolf]

yes wait

first we are creating payment intent
app.get('/create-payment-intent', async (req, res) => {
// Create a PaymentIntent with the amount, currency, and a payment method type.
//
// See the documentation [0] for the full list of supported parameters.
//
// [0] https://stripe.com/docs/api/payment_intents/create
try {
const paymentIntent = await stripe.paymentIntents.create({
currency: 'USD',
amount: 1999,
metadata: {
order_id: 'MID-6735',
},
automatic_payment_methods: { enabled: true }
});

// Send publishable key and PaymentIntent details to client
res.send({
  clientSecret: paymentIntent.client_secret,
});

} catch (e) {
return res.status(400).send({
error: {
message: e.message,
},
});
}
});

then from react js
import React, {useState, useEffect} from 'react';
import {PaymentRequestButtonElement, useStripe} from '@stripe/react-stripe-js';

const PaymentButton = () => {
const stripe = useStripe();
const [paymentRequest, setPaymentRequest] = useState(null);

useEffect(() => {
if (stripe) {
const pr = stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Demo total',
amount: 1099,
},
requestPayerName: true,
requestPayerEmail: true,
});

  // Check the availability of the Payment Request API.
  pr.canMakePayment().then(result => {
    if (result) {
      setPaymentRequest(pr);
    }
  });
}

}, [stripe]);

if (paymentRequest) {
return <PaymentRequestButtonElement options={{paymentRequest}} />
}

// Use a traditional checkout form.
return 'Insert your form or button component here.';
}

export default PaymentButton;

[raw gazelle]

That's paymentRequest but where do you use the client secret?

[silk wolf]

import {useEffect, useState} from 'react';

import {Elements} from '@stripe/react-stripe-js';
import CheckoutForm from './CheckoutForm'
import AddressForm from './AdressForm';
import PaymentButton from './PaymentButton';

function Payment(props) {
const { stripePromise } = props;
const [ clientSecret, setClientSecret ] = useState('');

useEffect(() => {
// setClientSecret("rk_test_51NIGCxSEhVImopCpaatDwE1ah8J0gWQCWGaJbj7mGWPZxOKKwd81MVwnP55xvmX0EY8DLKhkUbNvf3tq9fhXgbcw00x505OxJ7")
// Create PaymentIntent as soon as the page loads
fetch("/create-payment-intent")
.then((res) => res.json())
.then(({clientSecret}) => setClientSecret(clientSecret));
}, []);

return (
<>
<h1>Payment</h1>
{clientSecret && stripePromise && (
<Elements stripe={stripePromise} options={{ clientSecret: clientSecret, }}>
<CheckoutForm />
{/* <PaymentButton /> /}
{/ <AddressForm /> */}
</Elements>
)}
</>
);
}

export default Payment;

on this file we have set clientSecret

[raw gazelle]

Ah okie I see

[silk wolf]

is there any way @raw gazelle

[raw gazelle]

Um where exactly in your code that you want to have the metadata?

[silk wolf]

what exactly we are doing we are creating payment intent then from front end we will doing payment request when it successfull we will get the webhook event in that we want to know ok this transaction is for this orderId so we need to know any way from there we can get metadata in webhook

[raw gazelle]

So you need to set the metadata somewhere to the PaymentIntent. The easier timing is when you create it, correct? Do you want to set it in a bit later?

[silk wolf]

are you there

yes @raw gazelle

[raw gazelle]

Yes

Where exactly in the code?

that later than PI creation

[silk wolf]

create payment intent @raw gazelle

??

[raw gazelle]

When creating PaymentIntent, you can pass in metadata, no?