See a live demo
See a live demo
Fill out the checkout below and observe the events on the right side. Enter a valid email address to receive the purchase receipt.
Use the test card number
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 anonEvent
handler to the CrossmintPaymentElement
.See example
See example
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.
Types of Payment Events
Quotes
Quotes
Payments
Payments
payment:preparation.succeeded
Triggered when checkout is ready for payment.
Example response
Example response
payment:preparation.failed
Triggered when checkout preparation fails.
How to solve
How to solve
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.Example response
Example response
payment:process.started
Triggered when checkout is ready for payment.
Example response
Example response
payment:process.succeeded
Triggered when payment has been successfully authorized.(Payment capture occurs after
transaction:fulfillment.succeeded
)Example response
Example response
The
orderIdentifier
returned in the response is used to subscribe to minting events.payment:process.rejected
Triggered if a user’s card has been rejected.
Example response
Example response
You can trigger this event using the high risk test card number:
4000 0000 0000 4954
payment:process.cancelled
Triggered if a user cancelled the payment or closed the checkout.