JSFiddle - React, Tailwind, and code Playground

by joshpiper_medipass

HTML

<script src="https://unpkg.com/@medipass/[email protected]/umd/@medipass/partner-sdk.min.js"></script>
<h1>
  Card Details
</h1>
<div id="card-details">
  <h2>
    Card Number
  </h2>
  <p id="card-number"></p>

  <h2>
    Card Expiry
  </h2>
  <p id="card-expiry"></p>
  
  <h2>
    JSON card details
  </h2>
  <p id="card-json"></p>
</div>

JavaScript

// import MedipassTransactionSDK from '@medipass/partner-sdk';
// const MedipassTransactionSDK = require('@medipass/partner-sdk');


/**
 * Retrieving payment methods for a patient.
 * A patient can only have 1 payment method. Therefore, the
 * items array only supports a single item currently.
 *
 * Example response:
 * {
 *   "items": [
 *     {
 *         "cardType": "Visa",
 *         "expiryMonth": "02",
 *         "expiryYear": "2025",
 *         "isDebit": false,
 *.        "lastFour": "4242",
 *     }
 *     ...
 *   ]
 * }   
 */
async function main() {
  await MedipassTransactionSDK.setConfig({
    env: 'stg', // Enter the environment you want to target (stg/prod)
    apiKey: 'your-api-key', // Can be found in your business settings in Connect
    appId: 'web-application', // Your application identifier
    appVersion: 'v1.0.0' // The transaction SDK version to target 
  });

  // Patient Id must be supplied
  const patientId = '6243f1695ef93900672ef327';

  const { items } = await MedipassTransactionSDK.payments.getBusinessPatientPaymentMethods({
    query: {
      patientId
    }
  });
  
  // Use the first item since a patient can only have a single paytment method currently.
  const mainPaymentMethod = items[0];
  
  if (!mainPaymentMethod) {
  	console.log("No payment method");
    return;
  }
  
  document.getElementById('card-number').textContent = "**** " + mainPaymentMethod.lastFour;
  document.getElementById('card-expiry').textContent = `${mainPaymentMethod.expiryMonth}/${mainPaymentMethod.expiryYear}`;
  document.getElementById('card-json').textContent = JSON.stringify(mainPaymentMethod);
  
  const cardNumbersElements = document.querySelectorAll('#card-number, #card-expiry');
  const newTextColor = mainPaymentMethod.isExpired ? "red" : "black";

	cardNumbersElements.forEach((cardNumberElement) => {
  	cardNumberElement.style.color = newTextColor;
  });

}

main();