JSFiddle - React, Tailwind, and code Playground

by joshpiper_medipass

HTML

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

    <h2>
      Card Expiry
    </h2>
    <p id="card-expiry"></p>
  </div>
  
  <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 by the patient ref id.
 * 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: '61f1f842fb031da2373daaf6:drC6RAykRd0ecV-oCzOnx8dG6iHND8hSBuu-ygPlMCQ', // Can be found in your business settings in Connect
    appId: 'web-application', // Your application identifier
    appVersion: 'v1.0.0' // Your application version
  });

  // Patient Id must be supplied
  const refId = '611a57d5506a87005f04e4ac';

let vale
try {
  const { items } = await MedipassTransactionSDK.payments.getBusinessPatientPaymentMethodsByRefId({
    query: {
      refId
    }
  });
  vale = items
} catch (e) {
console.log(e)
return
}

const items = vale

  
  // 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";

...