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
id
stringRequiredMutation Function Parameters
The details of the payment sessions to manage.
Mutation Function Returned Data
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
id
stringRequiredMutation Function Parameters
The details of the payment session to manage.
Mutation Function Returned Data
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
id
stringRequiredMutation Function Parameters
string
stringRequiredMutation Function Returned Data
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
id
stringRequiredMutation Function Parameters
StorePostPaymentCollectionsBatchSessionsAuthorizeReq
StorePostPaymentCollectionsBatchSessionsAuthorizeReqRequiredThe details of the payment sessions to authorize.
StorePostPaymentCollectionsBatchSessionsAuthorizeReq
StorePostPaymentCollectionsBatchSessionsAuthorizeReqRequiredMutation Function Returned Data
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
id
stringRequiredMutation Function Parameters
string
stringRequiredMutation Function Returned Data
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
id
stringRequired