Hosted Payments Examples

Example: Tokenize Card information

This example should allow you to create a working tokenization request using HTML and Javascript. It may be adapted as needed for other languages or frameworks.

Example: HTML

<div>
  <h2>Add Your Payment Info</h2>
  <iframe
    id="paynetworxIframe"
    width="900"
    height="600"
    scrolling="no"
  ></iframe>
  <div class="button-container">
    <button onclick="tokenizeCard()">Pay Now</button>
  </div>
</div>

Example: Javascript

// Function to initialize the Payment Session
async function initializePaymentSession() {
  const headers = new Headers();
  headers.append("Content-Type", "application/json");
  headers.append("Authorization", "{{ YOUR_API_KEY }}");

  const api_response = await fetch(
    `https://{{PNX_HOSTED_PAYMENTS_URL}}/v1/payments/sessions/create`,
    {
      method: "POST",
      headers,
      body: JSON.stringify({
        payment_session: {
          payment_session_use: "TOKENIZE_CARD",
        },
      }),
    }
  );
  return await api_response.json();
}

const initialize = async () => {
  const response = await initializePaymentSession(); // Call the initializePaymentSession and await the response.
  const urlObject = await new URL(response.payment_session.payment_session_url); // Create a URL Object from the response data
  const fullUrl = urlObject.href; // Declare the new url for the iFrame on your site
  document.getElementById("paynetworxIframe").src = `${fullUrl}&styles=light`; // Currently light and dark modes are supported for the optional styles parameter
};

// Function to trigger the embedded iframe to run the tokenization of the input card data
function tokenizeCard() {
  iframe.contentWindow.postMessage({ type: "pnx-submit" }, "*");
}

// Initialize iframe on load and add event listener to listen for tokenized card data
let iframe;
document.addEventListener("DOMContentLoaded", function () {
  iframe = document.querySelector("iframe");
  initialize();

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

Page Styling

Use the page_style object to apply custom themes to the payment form:

Note

The names custom_light and custom_dark are placeholders and should be replaced with your specific theme name if and when applicable. Not all users will have access to a custom theme, and will need to be approved by PayNetWorx.

• page_style_name: 'custom_light' - Applies the Custom Light theme
• page_style_name: 'custom_dark' - Applies the Custom Dark theme
• If page_style_name is left blank or not present, the default (light) mode will be used

Example API Request

async function initializePaymentSession() {
  try {
    const headers = new Headers();
    headers.append("Content-Type", "application/json");
    headers.append("Authorization", "{{YOUR_KEY}}");

    const api_response = await fetch(
      `https://{{PNX_HOSTED_PAYMENTS_URL}}/v1/payments/sessions/create`,
      {
        method: "POST",
        headers,
        body: JSON.stringify({
          payment_session: {
            payment_session_use: "TOKENIZE_CARD",
            payment_session_metadata: {
              payment_session_defaults: {
                tokenize_data: {
                  card: {
                    billing_address: {
                      line_1: {
                        hidden: true
                      },
                      line_2: {
                        hidden: true
                      },
                      city: {
                        hidden: true
                      },
                      state: {
                        hidden: true
                      },
                      country: {
                        value: 'US',
                        hidden: true
                      }
                    }
                  }
                }
              }
            }
          }
          page_style: {
            page_style_name: "custom_dark", // Optional: 'custom_light', 'custom_dark', or omit for default
          },
        })
      }
    );
    // Handle response...
  } catch (error) {
    console.error("Error creating payment session:", error);
  }
}