Events

You can subscribe to both payment and minting / asset delivery events.

See a live demo

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.

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.

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

Quotes

quote:status.changed

Triggered when the price is calculated or when it changes.

Example response

{
  "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
      }
    ]
  }
}

quote:status.invalidated

Triggered when a new quote is retrieved and invalidates the previous one.

Example response

Payments

payment:preparation.succeeded

Triggered when checkout is ready for payment.

Example response

payment:preparation.failed

Triggered when checkout preparation fails.

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.

  <CrossmintPaymentElement
    // removed for brevity
    emailInputOptions={{
      show: true,
    }}
    ...
  />

Example response

payment:process.started

Triggered when checkout is ready for payment.

Example response

payment:process.succeeded

Triggered when payment has been successfully authorized.(Payment capture occurs after transaction:fulfillment.succeeded)

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

{
  "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"
  }
}

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.

Introduction

Wallets

Authentication

Tokenization (Minting)

Checkout

Event Types

Adding Payment Events

Types of Payment Events

Introduction

Wallets

Authentication

Tokenization (Minting)

Checkout

​Event Types

​Adding Payment Events

​Types of Payment Events

Event Types

Adding Payment Events

Types of Payment Events