Financial Data Platform | Modernbanc

Collect cards.

In this guide we'll collect card numbers from your customers and put into the vault for future use. (e.g to either make a payment or reveal it to the customer.)

PCI Compliance

The most important thing is that you, your app, your company or your employees don't actually see or touch that data, it is the only way you can reduce your PCI scope to the minimum, more on this here. Therefore we'll use our SDKs which provide isolated iFrames.

Don't store CVC, CVV or PIN for longer than needed to authorize transaction!

Noone except for the card issuer is allowed to store CVCs, CVV, Pin or other Card Authorization Data for longer than it’s required to make a payment.

Creating an API Key.

First create an API key that will be used in the SDK to turn collected data into Secrets. Ensure this API key has a role with create secret permissions.

Adding Modernbanc Inputs 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 Input components to your screen/page.

They're isolated, headless and flexible so you can build any kind of user journey and safely pass the data through to 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
const App = () => (
  <ModernbancProvider api_key="DEV_TEST_KEY">
    <View />
Add inputs and a button to your page
import { InputElement, OutputElement, useModernbancContext } from '@modernbanc/react'
import { useState } from 'react'
const View = () => {
  const context = useModernbancContext()
  /** This function will collect data from inputs in isolated way and send them to Modernbanc Vault
   *  You will then have secrets that you can later use in yoru application.
   *  */
  async function collect() {
    const card_number_response = await context.modernbanc.getElement('input', 'card_number')?.createSecret()
    const card_expiry_date_response = await context.modernbanc.getElement('input', 'card_expiry_date')?.createSecret()
    const card_number_secret_id = card_number_response.secret_id
    const card_expiry_date_secret_id = card_expiry_date_response.secret_id
    // Use the secret ids as you want.
  return (
      <label>Card number</label>
        placeholder="Enter card number"
        container={{ style: { height: '28px', width: '100%' } }}
        css={'background: gray; border: 1px solid black;'}
        onReady={() => {
          console.log('Input loaded')
        placeholder="Enter expiry date"
        container={{ style: { height: '28px', width: '100%' } }}
        css={'background: gray; border: 1px solid black;'}
        onReady={() => {
          console.log('Input loaded')
      <button onClick={encrypt}>Collect card data</button>
export default View
Don't dismount your inputs too early!

If you want to show a loading indicator during the secret creation don't dismount the inputs, hide them instead (e.g opacity: 0). if you dismount them the underlying iFrame will close and you won't get a response message back.

That's it!

Now when user types in their card number and clicks the submit button our SDK will upload it to the Vault and give you back an id of the secret in Modernbanc Vault.

In the next guide we'll make use of that secret to either make a payment or reveal it to the customer.