Menu
JustiFi payments infrastructure leverages payment facilitation to ensure all funds flow through your platform, rather than relying on third-party processors. This provides you with more control over processing rates, allowing you to capture the lion’s share of the revenue.
We think you deserve to participate in economics, preserve optionality as you scale, and generate payment revenues like the best platforms in the world. At the end of the day, the cost of a payment shouldn’t be determined by the volume of funds flowing through your platform.
Traditional payment processors stifle your platform’s growth potential. Processing with JustiFi means you get to reap the rewards of custom payment infrastructure.
If you’ve used Stripe Connect, you know it’s easy to implement but costs extra and doesn’t offer white-label functionality. With JustiFi, you get the best of both worlds; a frictionless seller onboarding experience that’s completely white-labeled, all at no additional cost.
JustiFi’s infrastructure directs all transaction revenue through your platform, significantly enhancing your ARR.
JustiFi’s innovative payments infrastructure is designed to provide payment facilitation that extends beyond traditional processor transactions. This infrastructure places the payment flow directly into your platform, allowing for higher control and supervision of customer funds.
On top of transactional costs being reduced, businesses are able to retain more of the processing rates established in their respective markets due to funds not having to run through third-party processors.
After building SaaS platforms for 15 years, we’ve created what we wish we had – a full stack of platform-focused white-label tools that allow you to keep the lion’s share of revenue from the funds flowing through your platform. Exactly how it should be.
Switching payment processors needs to be effortless for your development team, who is also responsible for pushing your product roadmap forward. The JustiFi API docs will get you to your first processed payment in days rather than weeks.
Web components are reusable, modular pieces of code that offer several benefits for accepting payments and embedding fintech products such as:
Web components can be easily integrated into any platform, allowing you to customize the UI to match your platform.
Using web components can significantly reduce the amount of time and resources required to develop and maintain payment functionality on your platform.
Web components use modern security practices such as encryption and tokenization, removing the compliance burden on your platform.
Web components are designed to be user-friendly and easy to use, improving the overall experience for your customers.
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>justifi-card-form: Simple example</title>
<!--
If you are including the components via CDN the src should be the following:
https://cdn.jsdelivr.net/npm/@justifi/webcomponents@2.1.0/dist/webcomponents/webcomponents.esm.js
-->
<script type="module" src="/build/webcomponents.esm.js"></script>
<script nomodule src="/build/webcomponents.js"></script>
</head>
<body>
<h1>Card Form</h1>
<hr>
<!--
The 'style-overrides' prop takes a stringified instance of Theme. The type and all optional
members for Theme can be found here:
https://github.com/justifi-tech/web-component-library/tree/main/stencil-library/src/components/payment-method-form/theme.ts
-->
<justifi-card-form style-overrides='{
"layout":{
"padding":"0",
"formControlSpacingHorizontal":".5rem",
"formControlSpacingVertical":"1rem"
},
"formLabel":{
"fontWeight":700,
"fontFamily":"sans-serif",
"margin":"0 0 .5rem 0"
},
"formControl":{
"backgroundColor":"#F4F4F6",
"backgroundColorHover":"#EEEEF5",
"borderColor":"rgba(0, 0, 0, 0.42)",
"borderColorHover":"rgba(0, 0, 0, 0.62)",
"borderColorFocus":"#fccc32",
"borderColorError":"#C12727",
"borderWidth":"0px",
"borderBottomWidth":"1px",
"borderRadius":"4px 4px 0 0",
"borderStyle":"solid",
"boxShadowErrorFocus":"none",
"boxShadowFocus":"none",
"color":"#212529",
"fontSize":"1rem",
"fontWeight":"400",
"lineHeight":"2",
"margin":"0",
"padding":".5rem .875rem"
},
"errorMessage":{
"color":"#C12727",
"margin":".25rem 0 0 0",
"fontSize":".875rem"
}
}'></justifi-card-form>
<button type="submit" id="card-submit-button">Tokenize</button>
<button type="submit" id="card-validate-button">Validate</button>
</body>
<script>
(function () {
var cardForm = document.querySelector('justifi-card-form');
var cardSubmitButton = document.querySelector('#card-submit-button');
var cardValidateButton = document.querySelector('#card-validate-button');
cardForm.addEventListener('cardFormReady', function () {
console.log('justifi-card-form ready');
});
cardSubmitButton.addEventListener('click', (event) => {
console.log('card form tokenize button clicked');
// All of this information would come from your form instead of being hard coded
// Card number, expiration and cvv are collected on our iframe
const paymentMethodData = {
name: 'John Doe',
address_line1: '123 Broadway', // optional
address_line2: '', // optional
address_city: 'Minneapolis', // optional
address_state: 'MN', // optional
address_postal_code: '55413',
address_country: 'US', // optional
metadata: { something: "somevalue" } // optional
};
// ACCOUNT_ID is optional, currently required for platforms
// ACCOUNT_ID is the seller account for which you are tokenizing
cardForm.tokenize('CLIENT_ID', paymentMethodData, 'ACCOUNT_ID')
.then((data) => {
// This is where you can submit the form and use the payment method token
// on your backend
console.log('justifi-card-form tokenized: ', data);
});
});
cardValidateButton.addEventListener('click', (event) => {
console.log('card validate button clicked');
cardForm.validate()
.then((data) => {
console.log('justifi-card-form validated. Is valid? ', data.isValid);
});
});
})();
</script>
</html>
