Events
Listen to embedded checkout events
You can subscribe to both payment and minting / asset delivery events.
Fill out the checkout below and observe the events on the right side. Enter a valid email address to receive the purchase receipt.
4242 4242 4242 4242 to trigger a successful payment.Event Types
Payment events notify of price changes and events happening while capturing the user’s payment (e.g. successful payments, rejected cards).
Adding Payment Events
Subscribe by adding an onEvent handler to the CrossmintPaymentElement.
The following example will log all events to the browser console. You can jump ahead to see some examples for capturing and reacting to specific events further below.
import { CrossmintPaymentElement } from "@crossmint/client-sdk-react-ui";
const Crossmint: React.FC = () => {
return (
<CrossmintPaymentElement
projectId={projectId}
collectionId={collectionId}
environment={environment}
emailInputOptions={{
show: true,
}}
mintConfig={{
totalPrice: "0.001",
quantity: "1",
}}
onEvent={(event) => {
console.log(event.type, event);
}}
/>
);
};
export default Crossmint;
Types of Payment Events
Triggered when the price is calculated or when it changes.
{
"type": "quote:status.changed",
"payload": {
"totalPrice": {
"amount": "0.50",
"currency": "usd"
},
"lineItems": [
{
"metadata": {
"title": "Collection Name (set in dev console)",
"description": "Collection Description (set in dev console)",
"imageUrl": "https://uploadthing.com/f/your_collection_image.png"
},
"price": {
"amount": "0.50",
"currency": "usd"
},
"quantity": 1
}
]
}
}
Triggered when a new quote is retrieved and invalidates the previous one.
{
"type": "quote:status.invalidated",
"payload": {}
}
Triggered when checkout is ready for payment.
{
"type": "payment:preparation.succeeded",
"payload": {}
}
Triggered when checkout preparation fails.
The most common cause is a missing email address.
You can render an email input field to the CrossmintPaymentElement by setting the emailInputOptions prop to { show: true }. If you collect email elsewhere in your application you can set recipient.email programmatically.
<CrossmintPaymentElement
// removed for brevity
emailInputOptions={{
show: true,
}}
...
/>
{
"type": "payment:preparation.failed",
"payload": {}
}
Triggered when checkout is ready for payment.
{
"type": "payment:process.started",
"payload": {}
}
Triggered when payment has been successfully authorized.
(Payment capture occurs after transaction:fulfillment.succeeded)
{
"type": "payment:process.succeeded",
"payload": {
"orderIdentifier": "7723139d-fba3-474d-8e52-0ac7512d5c7b"
}
}
orderIdentifier returned in the response is used to subscribe to minting events.Triggered if a user’s card has been rejected.
{
"type": "payment:process.rejected",
"payload": {
"error": {
"code": "payments:payment-rejected.generic-decline",
"message": "The card was declined for an unknown reason."
},
"orderIdentifier": "3b8860e5-837b-44c5-99be-17f3f19238f6",
"paymentMethodType": "credit-card"
}
}
4000 0000 0000 4954