Payment Collections

Queries and Mutations listed here are used to send requests to the Store Payment Collection API Routes.

A payment collection is useful for managing additional payments, such as for Order Edits, or installment payments.

Mutations

useManageMultiplePaymentSessions

This hook creates, updates, or deletes a list of payment sessions of a Payment Collections. If a payment session is not provided in the sessions array, it's deleted.

Example

To add two new payment sessions:

import React from "react"
import { useManageMultiplePaymentSessions } from "medusa-react"

type Props = {
  paymentCollectionId: string
}

const PaymentCollection = ({
  paymentCollectionId
}: Props) => {
  const managePaymentSessions = useManageMultiplePaymentSessions(
    paymentCollectionId
  )

  const handleManagePaymentSessions = () => {
    managePaymentSessions.mutate({
      // Total amount = 10000
      sessions: [
        {
          provider_id: "stripe",
          amount: 5000,
        },
        {
          provider_id: "manual",
          amount: 5000,
        },
      ]
    }, {
      onSuccess: ({ payment_collection }) => {
        console.log(payment_collection.payment_sessions)
      }
    })
  }
  
  // ...
}

export default PaymentCollection

To update a payment session and another one by not including it in the payload:

import React from "react"
import { useManageMultiplePaymentSessions } from "medusa-react"

type Props = {
  paymentCollectionId: string
}

const PaymentCollection = ({
  paymentCollectionId
}: Props) => {
  const managePaymentSessions = useManageMultiplePaymentSessions(
    paymentCollectionId
  )

  const handleManagePaymentSessions = () => {
    managePaymentSessions.mutate({
      // Total amount = 10000
      sessions: [
        {
          provider_id: "stripe",
          amount: 10000,
          session_id: "ps_123456"
        },
      ]
    }, {
      onSuccess: ({ payment_collection }) => {
        console.log(payment_collection.payment_sessions)
      }
    })
  }
  
  // ...
}

export default PaymentCollection

Hook Parameters

idstringRequired

The payment collection's ID.

Mutation Function Parameters

StorePostPaymentCollectionsBatchSessionsReqStorePostPaymentCollectionsBatchSessionsReqRequired

The details of the payment sessions to manage.

Mutation Function Returned Data

StorePaymentCollectionsResStorePaymentCollectionsResRequired

The payment collection's details.

useManagePaymentSession

This hook creates a Payment Session for a payment provider in a Payment Collection.

Example

import React from "react"
import { useManagePaymentSession } from "medusa-react"

type Props = {
  paymentCollectionId: string
}

const PaymentCollection = ({
  paymentCollectionId
}: Props) => {
  const managePaymentSession = useManagePaymentSession(
    paymentCollectionId
  )

  const handleManagePaymentSession = (
    providerId: string
  ) => {
    managePaymentSession.mutate({
      provider_id: providerId
    }, {
      onSuccess: ({ payment_collection }) => {
        console.log(payment_collection.payment_sessions)
      }
    })
  }
  
  // ...
}

export default PaymentCollection

Hook Parameters

idstringRequired

The payment collection's ID.

Mutation Function Parameters

StorePaymentCollectionSessionsReqStorePaymentCollectionSessionsReqRequired

The details of the payment session to manage.

Mutation Function Returned Data

StorePaymentCollectionsResStorePaymentCollectionsResRequired

The payment collection's details.

useAuthorizePaymentSession

This hook authorizes a Payment Session of a Payment Collection.

Example

import React from "react"
import { useAuthorizePaymentSession } from "medusa-react"

type Props = {
  paymentCollectionId: string
}

const PaymentCollection = ({
  paymentCollectionId
}: Props) => {
  const authorizePaymentSession = useAuthorizePaymentSession(
    paymentCollectionId
  )
  // ...

  const handleAuthorizePayment = (paymentSessionId: string) => {
    authorizePaymentSession.mutate(paymentSessionId, {
      onSuccess: ({ payment_collection }) => {
        console.log(payment_collection.payment_sessions)
      }
    })
  }

  // ...
}

export default PaymentCollection

Hook Parameters

idstringRequired

The payment collection's ID.

Mutation Function Parameters

stringstringRequired

The payment session's ID.

Mutation Function Returned Data

StorePaymentCollectionsResStorePaymentCollectionsResRequired

The payment collection's details.

useAuthorizePaymentSessionsBatch

This hook authorize the Payment Sessions of a Payment Collection.

Example

import React from "react"
import { useAuthorizePaymentSessionsBatch } from "medusa-react"

type Props = {
  paymentCollectionId: string
}

const PaymentCollection = ({
  paymentCollectionId
}: Props) => {
  const authorizePaymentSessions = useAuthorizePaymentSessionsBatch(
    paymentCollectionId
  )
  // ...

  const handleAuthorizePayments = (paymentSessionIds: string[]) => {
    authorizePaymentSessions.mutate({
      session_ids: paymentSessionIds
    }, {
      onSuccess: ({ payment_collection }) => {
        console.log(payment_collection.payment_sessions)
      }
    })
  }

  // ...
}

export default PaymentCollection

Hook Parameters

idstringRequired

The payment collection's ID.

Mutation Function Parameters

StorePostPaymentCollectionsBatchSessionsAuthorizeReqStorePostPaymentCollectionsBatchSessionsAuthorizeReqRequired

The details of the payment sessions to authorize.

Mutation Function Returned Data

StorePaymentCollectionsResStorePaymentCollectionsResRequired

The payment collection's details.

usePaymentCollectionRefreshPaymentSession

This hook refreshes a Payment Session's data to ensure that it is in sync with the Payment Collection.

Example

import React from "react"
import { usePaymentCollectionRefreshPaymentSession } from "medusa-react"

type Props = {
  paymentCollectionId: string
}

const PaymentCollection = ({
  paymentCollectionId
}: Props) => {
  const refreshPaymentSession = usePaymentCollectionRefreshPaymentSession(
    paymentCollectionId
  )
  // ...

  const handleRefreshPaymentSession = (paymentSessionId: string) => {
    refreshPaymentSession.mutate(paymentSessionId, {
      onSuccess: ({ payment_session }) => {
        console.log(payment_session.status)
      }
    })
  }

  // ...
}

export default PaymentCollection

Hook Parameters

idstringRequired

The payment collection's ID.

Mutation Function Parameters

stringstringRequired

The payment session's ID.

Mutation Function Returned Data

StorePaymentCollectionsSessionResStorePaymentCollectionsSessionResRequired

The details of the payment session.

---

Queries

usePaymentCollection

This hook retrieves a Payment Collection's details.

Example

import React from "react"
import { usePaymentCollection } from "medusa-react"

type Props = {
  paymentCollectionId: string
}

const PaymentCollection = ({
  paymentCollectionId
}: Props) => {
  const { 
    payment_collection, 
    isLoading
  } = usePaymentCollection(
    paymentCollectionId
  )

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {payment_collection && (
        <span>{payment_collection.status}</span>
      )}
    </div>
  )
}

export default PaymentCollection

Hook Parameters

idstringRequired

The payment collection's ID.

Query Returned Data

payment_collectionPaymentCollectionRequired

Payment collection's details.