Enterprise Only

Payment UI Components

Mapping payment components to providers

All payment providers defined in your config are passed to the frontend, these are then in turn mapped to components.


const paymentCodeToPluginMap = {
cash: `SimplePayment`,
stripe: `Stripe`
paymentCodeToPluginMap.getFor = code => (code in paymentCodeToPluginMap ? paymentCodeToPluginMap[code] : undefined);
const payment = code =>
loadable(() => import(/* webpackChunkName: "shop/checkout/payments/[request]" */ `../components/payments/${code}`));


import { SimplePayment } from '@deity/falcon-payment-plugin';
import Stripe from './payments/Stripe';
const paymentCodeToPluginMap = {
cash: SimplePayment,
stripe: Stripe

The key for each value in paymentCodeToPluginMap should be linked to the name of the provider in the your config.

How payment components work

As a general rule, Payment UIs will need some form of authentication. We use the initialize method in our provider to pass data to our component to do this. This is triggered when our payment method is selected and before the component is rendered.

Each component is passed the pay() function. This function in turn triggers the validate method in your provider.


import { useCallback } from 'react';
const SimplePaymentProvider = ({ children }) => {
// This is returned to our provider
const pay = useCallback(() => Promise.resolve({ id: undefined }), []);
return children(pay, { loading: false });
// This is what is rendered on the frontend, you'll likely want to add a form here
SimplePaymentProvider.UI = () => null;
export default SimplePaymentProvider;

Ask the community. #help

If you can't find what you're looking for, the answer might be on our community slack channel. Our team keep a close eye on this and will usually get back to you within a few hours, if not straight away. If you haven't created an account yet please sign up here slack.deity.io.