#
Show/Reveal card data.

In this guide, we'll walk you through adding an output element within your app, which will allow you to show/reveal sensitive data to your users.

#
Demo - What we'll be building

#
Requirements

A workspace setup with Modernbanc.
An API key that will be used in the SDK to fetch Secrets from our servers. Ensure this API key has a role with get secret permissions.
A Secret Id from your Modernbanc vault.

#
Adding Modernbanc Outputs to your app.

To minimize PCI scope your app should never touch or access the card data. To achieve that you need to embed Modernbanc Output components to your screen/page.

They're isolated, headless, and flexible so you can build any kind of user journey and safely fetch data from our Vault without exposing it to your app.

For this example we'll use our React SDK - but the same principles apply to our iOS and Android SDKs.

Wrap your app with Modernbanc context

import { ModernbancProvider } from '@modernbanc/react';
import View from './form/form.comp';
 
const App = () => (
  <ModernbancProvider api_key="YOUR_API_KEY">
    <View />
  </ModernbancProvider>
);
 
export default App;

Declare following variables to store modernbanc context and to keep track of loading, reveal and error states in View Component

// View Component
import { OutputElement, useModernbancContext } from "@modernbanc/react";
import { useState } from "react";
 
const View = () => {
  const context = useModernbancContext();
  const secret_id = "SECRET_MAR24_Vfi1gUoYhiex5LbesVj"; // Update with your secret id.
  const [loading, setLoading] = useState(true);
  const element = context.modernbanc.getElement("output", "number");
  const [reveal, setReveal] = useState<boolean>(false);
  const [error, setError] = useState<boolean>(false);
  const css = `padding: 5px; border: 1px solid #ccc; border-radius: 5px`;
 
  return (<></>);
};

Add 1 Output Element

// View Component
// rest of the code
return (
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      gap: "10px",
      color: "gray",
      width: "400px",
      height: "500px",
    }}
  >
    {loading && <>Loading</>}
    {error && <>Error: Something went wrong</>}
    <form
      style={{
        display: !loading && !error ? "flex" : "none",
        flexDirection: "column",
        gap: "15px",
      }}
    >
      <OutputElement
        css={css} // Add your css here
        id="number"
        container={{ style: { height: "28px", width: "100%" } }}
        secret_id={secret_id}
        onReady={() => {
          setLoading(false);
        }}
        placeholder="**** **** **** ****"
      />
      {!reveal && (
        <button disabled={!secret_id} onClick={show}>
          Show
        </button>
      )}
    </form>
  </div>
);

Show method - We call the output elements showSecretValue method for revealing secret value

// View Component
async function show(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
  e.preventDefault();
  setLoading(true);
  const response = await element?.showSecretValue();
  if (response?.is_error) {
    console.error(response.error);
    setLoading(false);
    setError(true);
    return;
  }
 
  // Component has now revealed the secret value in your app.
  setLoading(false);
  setReveal(true);
}

Complete View Component

// View Component
import { OutputElement, useModernbancContext } from "@modernbanc/react";
import { useState } from "react";
 
const View = () => {
  const context = useModernbancContext();
  const secret_id = "SECRET_MAR24_Vfi1gUoYhiex5LbesVj"; // Update with your secret id.
  const [loading, setLoading] = useState(true);
  const element = context.modernbanc.getElement("output", "number");
  const [reveal, setReveal] = useState<boolean>(false);
  const [error, setError] = useState<boolean>(false);
  const css = `padding: 5px; border: 1px solid #ccc; border-radius: 5px`;
 
  // View Component
  async function show(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
    e.preventDefault();
    setLoading(true);
    const response = await element?.showSecretValue();
    if (response?.is_error) {
      console.error(response.error);
      setLoading(false);
      setError(true);
      return;
    }
 
    // Component has now revealed the secret value in your app.
    setLoading(false);
    setReveal(true);
  }
 
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: "10px",
        color: "gray",
        width: "400px",
        height: "500px",
      }}
    >
      {loading && <>Loading</>}
      {error && <>Error: Something went wrong</>}
      <form
        style={{
          display: !loading && !error ? "flex" : "none",
          flexDirection: "column",
          gap: "15px",
        }}
      >
        <OutputElement
          css={css} // Add your css here
          id="number"
          container={{ style: { height: "28px", width: "100%" } }}
          secret_id={secret_id}
          onReady={() => {
            setLoading(false);
          }}
          placeholder="**** **** **** ****"
        />
        {!reveal && (
          <button disabled={!secret_id} onClick={show}>
            Show
          </button>
        )}
      </form>
    </div>
  );
};
 
export default View;

#
Demo Source Code

#
That's it!

Now when the user clicks the submit button our SDK will fetch the Secret value from the Vault and reveal it in the output element.

#Show/Reveal card data.

#Demo - What we'll be building

#Requirements

#Adding Modernbanc Outputs to your app.