Connect Embedded Components - Add metadata columns to payout and payment list components

General
1

I mentioned this to a few stripe folks at the conference, but wanted to start a discussion here as well. The embedded connect components are great and provide a much quicker integration path, but the amount of customization is a limiting factor now.

My product’s payment history and payout reports depend on providing deep links to products in our system and additional information about each purchase, specific to our product. It would be great if stripe supported some extended functionality to insert my own custom columns into those list components.

A few different levels of features that would be helpful to us:

  • At a minimum, an attribute on the ConnectPayments and ConnectPayoutsList components to add a column based on metadata. Just display that i.e.
<ConnectPayments 
  metadataFields={[
    {
      field: 'contract_id', 
      title: 'Contract ID'
    }
  ]}
/>
  • Some way to render more robust data like a deep link to that object in my page:
< ConnectPayments 
  metadataFields={[
    {
      field: 'contract_id', 
      title: 'Contract Link', 
      body: (contract_id) => <a href={`/contracts/${contract_id}`}>View Contract</a> 
    }
  ]}
/>}

Is this something that would be useful to other teams as well?

2

Hey Mike, thanks for suggesting this idea and giving this feedback! I wonder if you’ve considered using the <PaymentDetails /> component: Payment details | Stripe Documentation. This enables you to display your own table/list (or any kind of UI) and invoke the payment details overlay, which has all of the Stripe logic for refunds, dispute management, displaying payment information, etc.

We don’t have one for payouts at the moment, but I’m wondering if this fits your scenario, or if you would still would prefer using the full table/list components with some customization.

1 Like
3

Yeah, I think ultimately what we have to do is build our own table view and drop the PaymentDetails component into a separate detail view for each item.

Another improvement in that area would be if we could just render the buttons for refunds and dispute management as separate components. The PaymentDetails component has a lot of info and we need to figure out how to render that side by side with some of our own info. Extracting those buttons into their own components would give us lots more flexibility in our UI design

2 Likes