#BlackStone Connect

1 messages · Page 1 of 1 (latest)

sullen siren
#

Hello! It looks like you're trying to use a publishable key from one Stripe account with a Payment Intent that exists on another Stripe account.

#

Or client secret.

#

Can you tell me more about which keys you're using on the frontend and backend, and exactly how the payment flow is supposed to work?

austere dome
#

Sorry this is the first time for me to use Stripe so I don't know about what's going on so much, but I was thinking about using our own publishable key in front end and secret key in backend, then getting client secret after that. So we don't use any client's key now. I will send you the keys in DM.

sullen siren
#

No, do not send anyone your keys, ever.

#

Also, I have DMs disabled, so you can't do that regardless. 🙂

austere dome
#

Oh, okay thanks

sullen siren
#

Okay, let's back up a bit. Can you tell me more about the payment flow you're trying to build?

#

You said you have an app, a Connect platform, and Standard connected accounts. How does the money flow through all of those?

austere dome
#

In my mind, at first user creates connected account via our app. Then, another user will pay money on our app using Stripe Connect and that money will be transferred to us and then to connected account

abstract egret
#

The way you want to accept payments is via Direct Charges: https://stripe.com/docs/connect/direct-charges
So you have a business that you accept payments on behalf of, you create a PaymentIntent in their account via the API as your platform. This is done by using the Stripe-Account header: https://stripe.com/docs/connect/authentication#authentication-via-the-stripe-account-header
You get a client_secret back in the API. Then client-side, you initialize Stripe.js/React properly with the connected account id in the stripeAccount option as documented here https://stripe.com/docs/connect/authentication#adding-the-connected-account-id-to-a-client-side-application (or equivalent via loadStripe with React)
and you're all set

austere dome
#

Thank you for your answer, I'm going to use Direct Charges and create a PaymentIntent in backend as well, but it doesn't work yet.

I wrote code to create payment intent as below, but am I wrong ? Also I have setup Elements component like I posted with referring this document https://stripe.com/docs/stripe-js/react#setup

app.post('/create-payment-intent', async (req, res) => {
  const data = req.body;
  const amount = calculateOrderAmount(data.items);
  // console.log('Started POST process at /create-payment-intent. The body of request is as below')
  // console.log(data);
  console.log(`Amount became ${amount}`);

  await stripe.paymentIntents.create({
    amount: amount,
    currency: data.currency,
    application_fee_amount: calculateApplicationFeeAmount(amount)
  }, {
    stripeAccount: data.account
  })
  .then(function(paymentIntent) {
    try {
      return res.send({
        // publishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
        clientSecret: paymentIntent.client_secret
      });
    } catch (err) {
      return res.status(500).send({
        error: err.message
      });
    }
  })
  .catch((err) => {
    console.log(`Failed to get a payment intent: ${err}`);
  })
})
abstract egret
#

as long as stripeAccount: data.account is set properly then that aprt of the call works

#

Do you have an example PaymentIntent id pi_123 I can look at to confirm?

austere dome
#

I have, can I post it here?

abstract egret
#

yeah it's fine it's all Test mode

austere dome
#

Okay, the Id I got is pi_3JrS1ER5ER5KLtvd1bcRK1hT_secret_ReipQumtAFRc8oQNoyVNrHOKr

abstract egret
#

that's a client_secret

#

it's fine but it's important to differentiate the two

#

So yes that PaymentIntent is properly created on one of your connected account!

#

So the problem now is how you initialize Stripe.js client-side

#

you likely just missed the stripeAccount option, everyone does

austere dome
#

Oh I see, sorry I misunderstood
You mean, should I add stripeAccount option inside object passed as props as below?

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

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

no, that goes where you defined stripePromise

austere dome
#

Oh I see, then I have to define it when using loadStripe, don't I?

abstract egret
#

yes

austere dome
#

Okay thank you so much for your help, I will try!

abstract egret
#

@austere dome did it work?

austere dome
#

It worked and I could render Stripe element without any errors! But I got another error as attached image. It seems error related with Payment Element, but do you know why? My code to render Payment Element is as below.

Sorry to keep bothering you.

const CheckoutForm = ({ error }) => {
  const stripe = useStripe();
  const elements = useElements();
  const return_url = window.location.origin;

  const onPay = async e => {
    if (!stripe || !elements ) {
      console.error("No Stripe object or elements");
      return;
    } 

    const result = await stripe.confirmPayment({
      elements,
      confirmParams: { return_url }
    });

    if (result.error) {
      console.error(result.error.message);
    } 
  }

  return (
    <div className="payment-form">
      { error ? (
        <div>{error}</div>
      ) : (
        <form>
          <div>
            <label>Enter your card details</label>
            <CardElement />
          </div>
          <div>
            <Button onClick={onPay} variant="contained" color="primary">
              Pay
            </Button>
          </div>
        </form>
      )}
    </div>
  )
}
Screen_Shot_2021-11-02_at_4.55.18_PM.png
abstract egret
austere dome
#

Thank you so much, it worked correctly!