Capturing payment sources

<script src="https://checkout-v3.au.meetapril.io/v3/checkout-v3.0.0.min.js"></script>

const paymentSourceUI = window.AprilCheckout.createPaymentSource();
paymentSourceUI.init({
    publicKey: 'live_pk_xxxxxxxxxxxxxxxxxxxxx', // required, merchant public key
    customerToken: customToken, // signed in customer token
    isB2B: false, // B2B only
    hideB2BUsageScopeOptions: false, // B2B only, hide "Save card for" options
    submitCallbackFunction: (paymentSource) => {
        if(paymentSource.cardPaymentSource) {
            // retrieve cardPaymentSourceId
            const cardPaymentSourceId = paymentSource.cardPaymentSource.cardPaymentSourceId;
        }
    },
    errorCallbackFunction: (error) => {
        // handle errors
    }
});
paymentSourceUI.render({
    elementId: 'payment-source-container', // required, parent HTML element ID
    showSubmit: true, // hide the Submit button
    hideSavedCards: false, // hide previously saved cards
    primaryColor: '#b29572' // theme primary color (HEX)
});

paymentSourceUI.render({
    ...options,
    showSubmit: false // hide the Submit button
});
paymentSourceUI.submit((paymentSource) => {
    if(paymentSource.cardPaymentSource) {
        // retrieve cardPaymentSourceId
        const cardPaymentSourceId = paymentSource.cardPaymentSource.cardPaymentSourceId;
    }
});

type CardPaymentSource = {
  cardPaymentSourceId: string;
  last4: string;
  cardBin: string;
  brand: '' | 'American Express' | 'MasterCard' | 'Visa';
  funding: 'credit' | 'debit' | 'chargecard' | 'prepaid' | 'deferreddebit' | 'unknown';
  expMonth: number;
  expYear: number;
  country: string;
}
type PaymentSource = {
  cardPaymentSource?: CardPaymentSource;
}