Cari Finance - Embedded Example

This example demonstrates how to embed the Cari Finance SDK on your website.

Implementation Guide

1. Include the SDK

Add the Cari Finance SDK to your page:

<script src="https://cdn.cari.finance/js/latest/cari-finance.min.js"></script>

2. Initialize and Create Payment Form

Initialize the SDK and create a payment form:

// Initialize the SDK with your publishable key
const cariFinance = new CariFinance("pk_test_27436257e3fe4b0fa266f4a6f59047a3");

// Create elements instance
const elements = cariFinance.elements();

// Create Stripe card element with custom button text
const paymentForm = elements.create("stripeCard", {
   buttonText: "Pay $49.99",
   onSuccess: function(result) {
      console.log("Stripe token created:", result);
      
      // Now use the token to create a payment
      const paymentData = {
         amount: 4999, // $49.99 in cents
         currency: "usd",
         provider: "card",
         description: "Embedded example payment",
         card: { token: result.token },
         customer: {
            name: "Test Customer",
            email: "customer@example.com"
         }
      };
      
      // Process the payment with the token
      cariFinance.createPayment(paymentData)
         .then(function(paymentResult) {
            console.log("Payment processed:", paymentResult);
            
            // Hide payment form
            document.getElementById("payment-form").style.display = "none";
            
            // Show success message
            const successMessage = document.getElementById("success-message");
            successMessage.style.display = "block";
            
            // Extract card details from result
            const cardInfo = result.card || {};
            
            // Display payment details
            const paymentDetails = document.getElementById("payment-details");
            paymentDetails.innerHTML = `
               Card: ${cardInfo.brand || "Unknown"} •••• ${cardInfo.last4 || "****"}
               Expires: ${cardInfo.expMonth || "**"}/${cardInfo.expYear || "****"}
               Transaction ID: ${paymentResult.charge?.id || result.token || "Unknown"}
               Amount: $49.99 USD
            `;
         })
         .catch(function(error) {
            console.error("Payment processing error:", error);
            alert("Payment processing failed: " + error.message);
         });
   },
   onError: function(error) {
      alert("Payment failed: " + error.message);
      console.error("Payment error:", error);
   }
});

// Mount the payment form
paymentForm.mount("#payment-form");

3. Handle Form Submission

Process the payment when the form is submitted:

// Add event listener to the form
document.querySelector("#payment-form form").addEventListener("submit", async function(e) {
    e.preventDefault();
    
    try {
        // Get payment data from form
        const paymentData = paymentForm.getPaymentData();
        
        // Add transaction details
        paymentData.amount = 4999;  // $49.99 in cents
        paymentData.currency = "usd";
        paymentData.description = "Product purchase";
        
        // Process payment
        const result = await cariFinance.createPayment(paymentData);
        
        // Handle success
        console.log("Payment successful:", result);
        
        // Show success message or redirect
        document.getElementById("payment-form").style.display = "none";
        document.getElementById("payment-details").innerHTML = `
            
Transaction ID: ${result.charge?.id || "N/A"}
            
Amount: $49.99 USD
            
Date: ${new Date().toLocaleString()}
        `;
        document.getElementById("success-message").style.display = "block";
    } catch (error) {
        // Handle error
        console.error("Payment failed:", error);
        alert("Payment failed: " + error.message);
    }
});