Listening to Checkout Page Events

After the checkout page is generated and initialized, it will return tokenezation events. The returned token is what we will use to create a payment.

Step 1: Setup event listener. Add this line to your page where the checkout form is i-framed:

window.addEventListener("message", handleTokenizationEvent);

Step 2: Extract token from the event data

interface TokenizationResponse {
  type: "paymentCompleted";
  data: {
    message: "OK";
    data: {
      type: "tokenv3";
      id: string;  // Example: "474747aOlplH4747-1734960710"
      attributes: {
        label: "tokenv3";
        customerId: string;
      };
      customerId: string;  // Same as attributes.customerId
    };
  };

Example usage:

const handleTokenizationEvent = (event: MessageEvent) => {
  const response = event.data as TokenizationResponse;
  
  if (response.type === "paymentCompleted") {
    const tokenId = response.data.data.id;
    const customerId = response.data.data.customerId;
    // Process the tokenization data...
  }

Important Notes

• Always validate the response data before processing
• The event listener should be unmounted for every new form
• The customerId is present in both data.data.customerId and data.data.attributes.customerId

Security Considerations

• Validate that the message origin matches your expected payment provider domain
• Validate schemas or use validation libraries to ensure data integrity