Credit Card Form

🛠️ Step-by-Step Guide

1️⃣ Add Jupico's JavaScript Library

The Jupico web component logic, including security, rendering, and tokenization, is inside the Jupico JavaScript library. Include the following script in the<head> of your HTML:

 <head>
   <meta charset="UTF-8" />
   <!-- 👇🏻 Add Jupico hosted script  -->
   <script src="https://sandbox-payments-hosted-pages.jupico.com/wc/tokenization-form.umd.js"></script>  
 </head>

2️⃣ Include the Web Component

Use the <tokenization-form> tag and provide the required properties: Note: If you're using a JavaScript framework with dynamic data binding (e.g., React, Vue, Angular), follow the HTML example. If not, use the vanilla JavaScript example to programmatically create the tag and bind the data.

<tokenization-form
 	id="credit-card-form-ref"
  :submitSuccess="handleSubmitSuccessEvent"
  :validationError="handleValidationErrorEvent"
  :sessions="{YOUR_SESSIONS_OBJECT}"
></tokenization-form>

        document.addEventListener("DOMContentLoaded", function () {
          fetch("http://your-appserver.com/browser-session-authorize", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ publicKey: "10971890-ab53-4a8b-a09d-a9dae3276ba3" }),
          })
          .then(response => response.json())
          .then(response => {
            const tokenizationForm = document.createElement("tokenization-form");
            tokenizationForm.sessions = response.data.sessions;
            tokenizationForm.submitSuccess =  handleSubmitSuccessEvent
            tokenizationForm.validationError =  handleValidationErrorEvent
            tokenizationForm.id = "form-id";

            document.getElementById("tokenization-container").appendChild(tokenizationForm);
          })
          .catch(error => console.error("Error:", error));
        });

🔹 Required Properties:

sessions: will contain all the authorization sessions required for the web component to support multiple tokenization approaches. Do not alter/modify this object or build logic with it as it might constantly change.
submit-success: Callback function to handle the generated oneTimeToken.
validation-error: Callback to handle validation errors.

3️⃣ Trigger Tokenization with a Button

To execute tokenization, get the reference of the form and call its method:

<button id="process-tokenization-button">Process Tokenization</button>
<script>
  const processTokenization = async () => {
    var creditCardFormElement = document.getElementById("credit-card-form-ref");
    creditCardFormElement._instance.exposed.validateForm();
  };

  document
    .getElementById("process-tokenization-button")
    .addEventListener("click", processTokenization);
</script>

4️⃣ Handle Success & Error Callbacks

// Handle successful tokenization
function handleSubmitSuccessEvent(event) {
  console.log("🚀 Success! One-Time Token:", event.oneTimeToken);
}

// Handle validation errors
function handleValidationErrorEvent(event) {
  console.error("❌ Validation Error:", event.error);
}