Listen for Response

After requesting tokenization, you need to set up a listener to receive the tokenized payment information from the hosted payment form.

Overview

Listen for tokenized payment info via window message events. The hosted payment form will send a postMessage containing the tokenization result.

Implementation

window.addEventListener(
  "message",
  (event) => {
    if (event.data?.type === "pnx-tokenized-payment-info") {
      // Access tokenized result
      const tokenizedData = event.data.payload;
      console.log(
        "Received tokenized info broadcast from iframe:",
        tokenizedData
      );

      // Process the tokenized data
      handleTokenizedData(tokenizedData);
    }
  },
  false
);

Security Best Practices

IMPORTANT - Origin Validation

Always verify the origin of the message to prevent security vulnerabilities:

window.addEventListener("message", (event) => {
  // Verify the origin matches your expected PayNetWorx domain
  const allowedOrigins = [
    "https://{{PNX_HOSTED_FORM_URL}}", // Replace with actual environment URL
  ];

  if (!allowedOrigins.includes(event.origin)) {
    console.warn("Rejected message from unauthorized origin:", event.origin);
    return;
  }

  if (event.data?.type === "pnx-tokenized-payment-info") {
    const tokenizedData = event.data.payload;
    handleTokenizedData(tokenizedData);
  }
});

Environment URLs

Replace PNX_HOSTED_FORM_URL with the appropriate environment URL.

See QA Environment or Production Environment for origin validation URLs.

Response Structure

The event.data.payload will contain:

{
  payment_session: {
    /** Format: KSUID */
    payment_session_request_id: string
  }
  tokenized_card: {
    approved: boolean
    /** Present if approved = true */
    cvc_check?: string
    /** Present if approved = true */
    token?: {
      token_id: string
      token_name: string
    }
  }
}

Handling the Response

function handleTokenizedData(data) {
  if (data.tokenized_card.approved) {
    // Tokenization successful
    const token = data.tokenized_card.token;
    console.log("Tokenization approved:", token);

    // Proceed with your payment flow
    processPayment(token);
  } else {
    // Tokenization failed
    console.error("Tokenization not approved");
    showErrorMessage("Unable to process card information. Please try again.");
  }
}

Common Response Scenarios

Success Response

{
  "payment_session": {
    "payment_session_request_id": "2ABC123XYZ456789"
  },
  "tokenized_card": {
    "approved": true,
    "cvc_check": "pass",
    "token": {
      "token_id": "tok_abc123xyz789",
      "token_name": "Visa ending in 1234"
    }
  }
}

Failed Response

{
  "payment_session": {
    "payment_session_request_id": "2ABC123XYZ456789"
  },
  "tokenized_card": {
    "approved": false
  }
}

Next Step

Once you have the tokenized data, learn how to use the tokenized data for subsequent Payment API calls.