Hosted Payments Code 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",
        },
      }),
    }
  );
  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: "tokenize" }, "*");
}

// 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-tokenized-payment-info") {
        const tokenizedData = event.data.payload; // Access tokenized result
        console.log(
          "Received tokenized info broadcast from iframe:",
          tokenizedData
        );
      }
    },
    false
  );
});

Hiding Fields and Adding Custom Styling

You can pre-fill billing address fields (postal code and country) by including them in the payment_session_defaults.billing_address object. When these values are provided, the corresponding input fields will be hidden from the user and automatically populated during tokenization.

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",
            payment_session_metadata: {
              payment_session_defaults: {
                billing_address: {
                  postal_code: "75218", // Hides postal code field
                  country: "United States", // Hides country field
                },
              },
            },
          },
          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);
  }
}