Obtain the tokenize card data

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-response") {
      // 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-response") {
    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 Type

interface PaymentsTokenizeCard {
  /** The request_type or request_name of the route associated with the response */
  request_type: string
  /** Uuid created by the api associated with the api request */
  request_id: string
  /** Payment session data */
  payment_session: {
    /** Format: KSUID */
    payment_session_request_id: string
  }
  tokenize_data: {
    transaction_id: string
    transaction_event_id: string
    approved: boolean
    /** Present if approved = true */
    token?: {
      token_id: string
      token_name: string
    }
  }
}

Handling the Response

function handleTokenizedData(data) {
  if (data.tokenize_data.approved) {
    // Tokenization successful
    const token = data.tokenize_data.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

Approved Response

{
  "payment_session": {
    "payment_session_request_id": "2ABC123XYZ456789"
  },
  "tokenize_data": {
    "transaction_id": "3GSL9JY3AWPGAarESwtPU1yiSTh",
    "transaction_event_id": "3GSL9N3vHDBYTpb7qmt3rmDnWDe",
    "approved": true,
    "token": {
      "token_id": "tok_abc123xyz789",
      "token_name": "Visa ending in 1234"
    }
  }
}

Not Approved Response

{
  "payment_session": {
    "payment_session_request_id": "2ABC123XYZ456789"
  },
  "tokenize_data": {
    "transaction_id": "3GSL9JY3AWPGAarESwtPU1yiSTh",
    "transaction_event_id": "3GSL9N3vHDBYTpb7qmt3rmDnWDe",
    "approved": false
  }
}

Next Step

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