#
Routing payments

There are two ways to build a smart-checkout using Modernbanc. The first method is initiating payments via workflows. The second method uses accounts to represent users and transactions to initiate payment flows.

In this method, we will build and run the workflow that will initiate payments:

  • Create a webhook trigger in the Modernbanc dashboard.
  • Create a workflow with a Condition step to check for the payment provider.
    • Create a Connection query step to make calls to the payment provider API with the details.
  • Collect all data from the component.
  • Use Modernbanc SDK createSecret() function to create secrets for the data.
  • Pass the secrets to the webhook trigger in the request body.
  • Return a response to the trigger that can be used in the component to determine if the transaction was successful.

Process

Create a trigger in the UI

Creating a webhook trigger gives you a URL in Modernbanc that you can make an http request to. In the request body, you can include any information from your application, like card secrets, that need to be used in the workflow.

Create a workflow with `Condition` and `Connection query` steps

Creating a workflow with a Condition step allows you to handle multiple types of payments providers. In this example, we will handle Stripe and other. The Connection query step will make a call to the payment provider API with the details.

Create secrets using your application and the Modernbanc SDK

In the component where you've collected the card details, you'll need to pass the card details to the transaction API call.

<InputElement
  id="card_number"
  placeholder="Enter card number"
  container={{ style: { height: '28px', width: '100%' } }}
  css={'background: gray; border: 1px solid black;'}
  html_type="number"
  onReady={() => {
    console.log('Input loaded')
  }}
/>
<InputElement
  id="card_expiry"
  placeholder="Enter card expiry"
  container={{ style: { height: '28px', width: '100%' } }}
  css={'background: gray; border: 1px solid black;'}
  html_type="number"
  onReady={() => {
    console.log('Input loaded')
  }}
/>
<InputElement
  id="card_cvv"
  placeholder="Enter card number"
  container={{ style: { height: '28px', width: '100%' } }}
  css={'background: gray; border: 1px solid black;'}
  html_type="number"
  onReady={() => {
    console.log('Input loaded')
  }}
/>
<InputElement
  id="passport_number"
  placeholder="Enter card number"
  container={{ style: { height: '28px', width: '100%' } }}
  css={'background: gray; border: 1px solid black;'}
  html_type="number"
  onReady={() => {
    console.log('Input loaded')
  }}
/>
const card_number_secret = mdb.createSecret('card_number')
const card_expiry_secret = mdb.createSecret('card_expiry')
const card_cvv_secret = mdb.createSecret('card_cvv')
const passport_secret = mdb.createSecret('passport_number')

Additionally, you'll need to collect the transaction amount details and currency and pass it to the transaction API call, and the payment_provider if there are multiple.

const amount = 100
const currency = 'dbff8f21-f979-4da4-a6ad-a2b7a569701f' // USD currency ID in Modernbanc
const payment_provider = 'Stripe'
Make a call to the Webhook Trigger setup in step 1

In the component where you've collected the card details, you'll need to pass the card details in the Webhook Trigger reqyest body call.

  const data = {
    "amount": `${amount}`,
    "currency": `${currency}`,
    "payment_provider": `${payment_provider}`,
    "secrets": {
      "card_number": `${card_number_secret}`,
      "card_expiry": `${card_expiry_secret}`,
      "card_cvv": `${card_cvv_secret}`,
      "passport_number": `${passport_secret}`
    }
  };
 
  const config = {
    method: 'post',
    url: 'https://api.modernbanc.com/v1/workflows/run?trigger_id=WFT-3532&trigger_version=0.0.1&workflow_id=WFL-810&workflow_version=0.0.1',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'ApiKey YOUR_API_KEY'
    },
    data: data
  }
 
  axios(config)
    .then((response) => {
      console.log(JSON.stringify(response.data));
    })
    .catch((error) => {
      console.log(error);
    });

Congratulations! You've created a workflow that will create a transaction with the credit card information stored in the secrets variables. You can now use this workflow to create transactions with credit card information.

Next up: Accounting with Modernbanc