Creating Components for Custom Payment Types

Fonteva allows you to configure custom components to support custom payment types within your app. This allows you further flexibility when collecting payment from your customers while giving you an intuitive and visual method for adding these payment types to your application.

Before You Begin

Two classes must be implemented before building a custom payment type component. These interfaces provide you with the attributes needed to develop your payment type. Use the code snippets below to implement your initial interface. Currently, the values in the snippets include the attributes for PayPal. You can remove those attributes and add the appropriate information for the payment type you're building.

CustomePaymentTypeInterface - This provides a base set of attributes to implement custom payment types.

CustomPaymentTypeInterface

<aura:component description="PayPalPaymentType" access="global" implements="c:CustomPaymentTypeInterface">
    <ltng:require styles="{!$Resource.OrderApi__paypal+'/paypal.css'}"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="c:ProcessingChangesEvent" action="{!c.handleProcessingChangesEvent}"/>
    <aura:handler event="Framework:InputFieldValueChangedEvent" action="{!c.handleFieldUpdateEvent}"/>
    <aura:attribute name="payObj" type="Map" default="{}"/>
    <div class="slds-col slds-size--1-of-1 slds-text-align--center slds-m-top--medium">
        <div class="slds-col">
            <form accept-charset="UTF-8" action="https://core.spreedly.com/v1/payment_methods" method="POST">
                <input name="redirect_url" type="hidden" value="{!v.customPaymentTypeObj.callbackUrl}"/>
                <input name="environment_key" type="hidden" value="{!v.customPaymentTypeObj.environmentKey}"/>
                <div class="{!v.customPaymentTypeObj.displaySavePaymentMethod ? 'slds-col slds-grid' :'hidden'}">
                    <div class="slds-col slds-size--1-of-1 slds-align-middle">
                        <Framework:InputFields aura:id="savePaymentMethodCustom" fieldType="boolean" label="{!$Label.c.Save_Payment_Method_Checkbox_Label}" value="{!v.payObj}" fireChangeEvent="true" group="{!v.customPaymentTypeObj.customPaymentId}" labelStyleClasses="fonteva-paypal-label"/>
                    </div>
                </div>
                <span class="hidden">
                   <Framework:Button type="brand" name="payment_method_type" value="{!v.customPaymentTypeObj.gatewayType}" aura:id="payOffsitePaymentBtn" onClickAction="{!c.submitPaypalPayment}"/>
                </span>
            </form>
            <div id="paypal-button-container" aura:id="paypal-button" class="slds-align_absolute-center">
                <button id="{!v.customPaymentTypeObj.customPaymentId+'-paypal-button'}" value="{!v.customPaymentTypeObj.gatewayType}" name="payment_method_type" class="paypal-button paypal-style-pay paypal-branding-true paypal-dual-false paypal-shape-rect additional-payment-btn offsite_pay payment_method" tabindex="0" type="submit" style="min-width: 100px; min-height: 24px;" data-payment-id="{!v.customPaymentTypeObj.customPaymentId}" onclick="{!c.handleSubmit}">
                    <div class="paypal-button-content paypal-color-gold paypal-logo-color-blue">
                        <span class="text" style="visibility: visible;">Pay with </span><img class="logo logo-paypal logo-paypal-gold" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMTAwIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiPgogICAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTSA2Ny44OTQgNi44NjIgTCA2MC4wOTQgNi44NjIgQyA1OS41OTQgNi44NjIgNTkuMDk0IDcuMjYyIDU4Ljk5NCA3Ljc2MiBMIDU1Ljg5NCAyNy42NjIgQyA1NS43OTQgMjguMDYyIDU2LjA5NCAyOC4zNjIgNTYuNDk0IDI4LjM2MiBMIDYwLjQ5NCAyOC4zNjIgQyA2MC44OTQgMjguMzYyIDYxLjE5NCAyOC4wNjIgNjEuMTk0IDI3Ljc2MiBMIDYyLjA5NCAyMi4wNjIgQyA2Mi4xOTQgMjEuNTYyIDYyLjU5NCAyMS4xNjIgNjMuMTk0IDIxLjE2MiBMIDY1LjY5NCAyMS4xNjIgQyA3MC43OTQgMjEuMTYyIDczLjc5NCAxOC42NjIgNzQuNTk0IDEzLjc2MiBDIDc0Ljg5NCAxMS42NjIgNzQuNTk0IDkuOTYyIDczLjU5NCA4Ljc2MiBDIDcyLjM5NCA3LjU2MiA3MC40OTQgNi44NjIgNjcuODk0IDYuODYyIFogTSA2OC43OTQgMTQuMTYyIEMgNjguMzk0IDE2Ljk2MiA2Ni4xOTQgMTYuOTYyIDY0LjE5NCAxNi45NjIgTCA2Mi45OTQgMTYuOTYyIEwgNjMuNzk0IDExLjc2MiBDIDYzLjc5NCAxMS40NjIgNjQuMDk0IDExLjI2MiA2NC4zOTQgMTEuMjYyIEwgNjQuODk0IDExLjI2MiBDIDY2LjI5NCAxMS4yNjIgNjcuNTk0IDExLjI2MiA2OC4yOTQgMTIuMDYyIEMgNjguNzk0IDEyLjQ2MiA2OC44OTQgMTMuMTYyIDY4Ljc5NCAxNC4xNjIgWiI+PC9wYXRoPgogICAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTSAxMi4zOTQgNi44NjIgTCA0LjU5NCA2Ljg2MiBDIDQuMDk0IDYuODYyIDMuNTk0IDcuMjYyIDMuNDk0IDcuNzYyIEwgMC4zOTQgMjcuNzYyIEMgMC4yOTQgMjguMTYyIDAuNTk0IDI4LjQ2MiAwLjk5NCAyOC40NjIgTCA0LjY5NCAyOC40NjIgQyA1LjE5NCAyOC40NjIgNS42OTQgMjguMDYyIDUuNzk0IDI3LjU2MiBMIDYuNTk0IDIyLjE2MiBDIDYuNjk0IDIxLjY2MiA3LjA5NCAyMS4yNjIgNy42OTQgMjEuMjYyIEwgMTAuMTk0IDIxLjI2MiBDIDE1LjI5NCAyMS4yNjIgMTguMjk0IDE4Ljc2MiAxOS4wOTQgMTMuODYyIEMgMTkuMzk0IDExLjc2MiAxOS4wOTQgMTAuMDYyIDE4LjA5NCA4Ljg2MiBDIDE2Ljk5NCA3LjU2MiAxNC45OTQgNi44NjIgMTIuMzk0IDYuODYyIFogTSAxMy4yOTQgMTQuMTYyIEMgMTIuODk0IDE2Ljk2MiAxMC42OTQgMTYuOTYyIDguNjk0IDE2Ljk2MiBMIDcuNDk0IDE2Ljk2MiBMIDguMjk0IDExLjc2MiBDIDguMjk0IDExLjQ2MiA4LjU5NCAxMS4yNjIgOC44OTQgMTEuMjYyIEwgOS4zOTQgMTEuMjYyIEMgMTAuNzk0IDExLjI2MiAxMi4wOTQgMTEuMjYyIDEyLjc5NCAxMi4wNjIgQyAxMy4yOTQgMTIuNDYyIDEzLjQ5NCAxMy4xNjIgMTMuMjk0IDE0LjE2MiBaIj48L3BhdGg+CiAgICA8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNIDM1LjU5NCAxNC4wNjIgTCAzMS44OTQgMTQuMDYyIEMgMzEuNTk0IDE0LjA2MiAzMS4yOTQgMTQuMjYyIDMxLjI5NCAxNC41NjIgTCAzMS4wOTQgMTUuNTYyIEwgMzAuNzk0IDE1LjE2MiBDIDI5Ljk5NCAxMy45NjIgMjguMTk0IDEzLjU2MiAyNi4zOTQgMTMuNTYyIEMgMjIuMjk0IDEzLjU2MiAxOC43OTQgMTYuNjYyIDE4LjA5NCAyMS4wNjIgQyAxNy42OTQgMjMuMjYyIDE4LjE5NCAyNS4zNjIgMTkuNDk0IDI2Ljc2MiBDIDIwLjU5NCAyOC4wNjIgMjIuMjk0IDI4LjY2MiAyNC4xOTQgMjguNjYyIEMgMjcuNDk0IDI4LjY2MiAyOS4zOTQgMjYuNTYyIDI5LjM5NCAyNi41NjIgTCAyOS4xOTQgMjcuNTYyIEMgMjkuMDk0IDI3Ljk2MiAyOS4zOTQgMjguMzYyIDI5Ljc5NCAyOC4zNjIgTCAzMy4xOTQgMjguMzYyIEMgMzMuNjk0IDI4LjM2MiAzNC4xOTQgMjcuOTYyIDM0LjI5NCAyNy40NjIgTCAzNi4yOTQgMTQuNjYyIEMgMzYuMzk0IDE0LjQ2MiAzNS45OTQgMTQuMDYyIDM1LjU5NCAxNC4wNjIgWiBNIDMwLjQ5NCAyMS4zNjIgQyAzMC4wOTQgMjMuNDYyIDI4LjQ5NCAyNC45NjIgMjYuMjk0IDI0Ljk2MiBDIDI1LjE5NCAyNC45NjIgMjQuMzk0IDI0LjY2MiAyMy43OTQgMjMuOTYyIEMgMjMuMTk0IDIzLjI2MiAyMi45OTQgMjIuMzYyIDIzLjE5NCAyMS4zNjIgQyAyMy40OTQgMTkuMjYyIDI1LjI5NCAxNy43NjIgMjcuMzk0IDE3Ljc2MiBDIDI4LjQ5NCAxNy43NjIgMjkuMjk0IDE4LjE2MiAyOS44OTQgMTguNzYyIEMgMzAuMzk0IDE5LjM2MiAzMC41OTQgMjAuMjYyIDMwLjQ5NCAyMS4zNjIgWiI+PC9wYXRoPgogICAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTSA5MS4wOTQgMTQuMDYyIEwgODcuMzk0IDE0LjA2MiBDIDg3LjA5NCAxNC4wNjIgODYuNzk0IDE0LjI2MiA4Ni43OTQgMTQuNTYyIEwgODYuNTk0IDE1LjU2MiBMIDg2LjI5NCAxNS4xNjIgQyA4NS40OTQgMTMuOTYyIDgzLjY5NCAxMy41NjIgODEuODk0IDEzLjU2MiBDIDc3Ljc5NCAxMy41NjIgNzQuMjk0IDE2LjY2MiA3My41OTQgMjEuMDYyIEMgNzMuMTk0IDIzLjI2MiA3My42OTQgMjUuMzYyIDc0Ljk5NCAyNi43NjIgQyA3Ni4wOTQgMjguMDYyIDc3Ljc5NCAyOC42NjIgNzkuNjk0IDI4LjY2MiBDIDgyLjk5NCAyOC42NjIgODQuODk0IDI2LjU2MiA4NC44OTQgMjYuNTYyIEwgODQuNjk0IDI3LjU2MiBDIDg0LjU5NCAyNy45NjIgODQuODk0IDI4LjM2MiA4NS4yOTQgMjguMzYyIEwgODguNjk0IDI4LjM2MiBDIDg5LjE5NCAyOC4zNjIgODkuNjk0IDI3Ljk2MiA4OS43OTQgMjcuNDYyIEwgOTEuNzk0IDE0LjY2MiBDIDkxLjc5NCAxNC40NjIgOTEuNDk0IDE0LjA2MiA5MS4wOTQgMTQuMDYyIFogTSA4NS44OTQgMjEuMzYyIEMgODUuNDk0IDIzLjQ2MiA4My44OTQgMjQuOTYyIDgxLjY5NCAyNC45NjIgQyA4MC41OTQgMjQuOTYyIDc5Ljc5NCAyNC42NjIgNzkuMTk0IDIzLjk2MiBDIDc4LjU5NCAyMy4yNjIgNzguMzk0IDIyLjM2MiA3OC41OTQgMjEuMzYyIEMgNzguODk0IDE5LjI2MiA4MC42OTQgMTcuNzYyIDgyLjc5NCAxNy43NjIgQyA4My44OTQgMTcuNzYyIDg0LjY5NCAxOC4xNjIgODUuMjk0IDE4Ljc2MiBDIDg1Ljg5NCAxOS4zNjIgODYuMDk0IDIwLjI2MiA4NS44OTQgMjEuMzYyIFoiPjwvcGF0aD4KICAgIDxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0gNTUuNDk0IDE0LjA2MiBMIDUxLjc5NCAxNC4wNjIgQyA1MS4zOTQgMTQuMDYyIDUxLjA5NCAxNC4yNjIgNTAuODk0IDE0LjU2MiBMIDQ1LjY5NCAyMi4xNjIgTCA0My40OTQgMTQuODYyIEMgNDMuMzk0IDE0LjM2MiA0Mi44OTQgMTQuMDYyIDQyLjQ5NCAxNC4wNjIgTCAzOC43OTQgMTQuMDYyIEMgMzguMzk0IDE0LjA2MiAzNy45OTQgMTQuNDYyIDM4LjE5NCAxNC45NjIgTCA0Mi4yOTQgMjcuMDYyIEwgMzguMzk0IDMyLjQ2MiBDIDM4LjA5NCAzMi44NjIgMzguMzk0IDMzLjQ2MiAzOC44OTQgMzMuNDYyIEwgNDIuNTk0IDMzLjQ2MiBDIDQyLjk5NCAzMy40NjIgNDMuMjk0IDMzLjI2MiA0My40OTQgMzIuOTYyIEwgNTUuOTk0IDE0Ljk2MiBDIDU2LjI5NCAxNC42NjIgNTUuOTk0IDE0LjA2MiA1NS40OTQgMTQuMDYyIFoiPjwvcGF0aD4KICAgIDxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0gOTUuNDk0IDcuNDYyIEwgOTIuMjk0IDI3Ljc2MiBDIDkyLjE5NCAyOC4xNjIgOTIuNDk0IDI4LjQ2MiA5Mi44OTQgMjguNDYyIEwgOTYuMDk0IDI4LjQ2MiBDIDk2LjU5NCAyOC40NjIgOTcuMDk0IDI4LjA2MiA5Ny4xOTQgMjcuNTYyIEwgMTAwLjM5NCA3LjY2MiBDIDEwMC40OTQgNy4yNjIgMTAwLjE5NCA2Ljk2MiA5OS43OTQgNi45NjIgTCA5Ni4xOTQgNi45NjIgQyA5NS43OTQgNi44NjIgOTUuNTk0IDcuMDYyIDk1LjQ5NCA3LjQ2MiBaIj48L3BhdGg+CiAgICA8cGF0aCBmaWxsPSIjMDAzMDg3IiBkPSJNIDEyIDQuOTE3IEwgNC4yIDQuOTE3IEMgMy43IDQuOTE3IDMuMiA1LjMxNyAzLjEgNS44MTcgTCAwIDI1LjgxNyBDIC0wLjEgMjYuMjE3IDAuMiAyNi41MTcgMC42IDI2LjUxNyBMIDQuMyAyNi41MTcgQyA0LjggMjYuNTE3IDUuMyAyNi4xMTcgNS40IDI1LjYxNyBMIDYuMiAyMC4yMTcgQyA2LjMgMTkuNzE3IDYuNyAxOS4zMTcgNy4zIDE5LjMxNyBMIDkuOCAxOS4zMTcgQyAxNC45IDE5LjMxNyAxNy45IDE2LjgxNyAxOC43IDExLjkxNyBDIDE5IDkuODE3IDE4LjcgOC4xMTcgMTcuNyA2LjkxNyBDIDE2LjYgNS42MTcgMTQuNiA0LjkxNyAxMiA0LjkxNyBaIE0gMTIuOSAxMi4yMTcgQyAxMi41IDE1LjAxNyAxMC4zIDE1LjAxNyA4LjMgMTUuMDE3IEwgNy4xIDE1LjAxNyBMIDcuOSA5LjgxNyBDIDcuOSA5LjUxNyA4LjIgOS4zMTcgOC41IDkuMzE3IEwgOSA5LjMxNyBDIDEwLjQgOS4zMTcgMTEuNyA5LjMxNyAxMi40IDEwLjExNyBDIDEyLjkgMTAuNTE3IDEzLjEgMTEuMjE3IDEyLjkgMTIuMjE3IFoiPjwvcGF0aD4KICAgIDxwYXRoIGZpbGw9IiMwMDMwODciIGQ9Ik0gMzUuMiAxMi4xMTcgTCAzMS41IDEyLjExNyBDIDMxLjIgMTIuMTE3IDMwLjkgMTIuMzE3IDMwLjkgMTIuNjE3IEwgMzAuNyAxMy42MTcgTCAzMC40IDEzLjIxNyBDIDI5LjYgMTIuMDE3IDI3LjggMTEuNjE3IDI2IDExLjYxNyBDIDIxLjkgMTEuNjE3IDE4LjQgMTQuNzE3IDE3LjcgMTkuMTE3IEMgMTcuMyAyMS4zMTcgMTcuOCAyMy40MTcgMTkuMSAyNC44MTcgQyAyMC4yIDI2LjExNyAyMS45IDI2LjcxNyAyMy44IDI2LjcxNyBDIDI3LjEgMjYuNzE3IDI5IDI0LjYxNyAyOSAyNC42MTcgTCAyOC44IDI1LjYxNyBDIDI4LjcgMjYuMDE3IDI5IDI2LjQxNyAyOS40IDI2LjQxNyBMIDMyLjggMjYuNDE3IEMgMzMuMyAyNi40MTcgMzMuOCAyNi4wMTcgMzMuOSAyNS41MTcgTCAzNS45IDEyLjcxNyBDIDM2IDEyLjUxNyAzNS42IDEyLjExNyAzNS4yIDEyLjExNyBaIE0gMzAuMSAxOS4zMTcgQyAyOS43IDIxLjQxNyAyOC4xIDIyLjkxNyAyNS45IDIyLjkxNyBDIDI0LjggMjIuOTE3IDI0IDIyLjYxNyAyMy40IDIxLjkxNyBDIDIyLjggMjEuMjE3IDIyLjYgMjAuMzE3IDIyLjggMTkuMzE3IEMgMjMuMSAxNy4yMTcgMjQuOSAxNS43MTcgMjcgMTUuNzE3IEMgMjguMSAxNS43MTcgMjguOSAxNi4xMTcgMjkuNSAxNi43MTcgQyAzMCAxNy40MTcgMzAuMiAxOC4zMTcgMzAuMSAxOS4zMTcgWiI+PC9wYXRoPgogICAgPHBhdGggZmlsbD0iIzAwMzA4NyIgZD0iTSA1NS4xIDEyLjExNyBMIDUxLjQgMTIuMTE3IEMgNTEgMTIuMTE3IDUwLjcgMTIuMzE3IDUwLjUgMTIuNjE3IEwgNDUuMyAyMC4yMTcgTCA0My4xIDEyLjkxNyBDIDQzIDEyLjQxNyA0Mi41IDEyLjExNyA0Mi4xIDEyLjExNyBMIDM4LjQgMTIuMTE3IEMgMzggMTIuMTE3IDM3LjYgMTIuNTE3IDM3LjggMTMuMDE3IEwgNDEuOSAyNS4xMTcgTCAzOCAzMC41MTcgQyAzNy43IDMwLjkxNyAzOCAzMS41MTcgMzguNSAzMS41MTcgTCA0Mi4yIDMxLjUxNyBDIDQyLjYgMzEuNTE3IDQyLjkgMzEuMzE3IDQzLjEgMzEuMDE3IEwgNTUuNiAxMy4wMTcgQyA1NS45IDEyLjcxNyA1NS42IDEyLjExNyA1NS4xIDEyLjExNyBaIj48L3BhdGg+CiAgICA8cGF0aCBmaWxsPSIjMDA5Y2RlIiBkPSJNIDY3LjUgNC45MTcgTCA1OS43IDQuOTE3IEMgNTkuMiA0LjkxNyA1OC43IDUuMzE3IDU4LjYgNS44MTcgTCA1NS41IDI1LjcxNyBDIDU1LjQgMjYuMTE3IDU1LjcgMjYuNDE3IDU2LjEgMjYuNDE3IEwgNjAuMSAyNi40MTcgQyA2MC41IDI2LjQxNyA2MC44IDI2LjExNyA2MC44IDI1LjgxNyBMIDYxLjcgMjAuMTE3IEMgNjEuOCAxOS42MTcgNjIuMiAxOS4yMTcgNjIuOCAxOS4yMTcgTCA2NS4zIDE5LjIxNyBDIDcwLjQgMTkuMjE3IDczLjQgMTYuNzE3IDc0LjIgMTEuODE3IEMgNzQuNSA5LjcxNyA3NC4yIDguMDE3IDczLjIgNi44MTcgQyA3MiA1LjYxNyA3MC4xIDQuOTE3IDY3LjUgNC45MTcgWiBNIDY4LjQgMTIuMjE3IEMgNjggMTUuMDE3IDY1LjggMTUuMDE3IDYzLjggMTUuMDE3IEwgNjIuNiAxNS4wMTcgTCA2My40IDkuODE3IEMgNjMuNCA5LjUxNyA2My43IDkuMzE3IDY0IDkuMzE3IEwgNjQuNSA5LjMxNyBDIDY1LjkgOS4zMTcgNjcuMiA5LjMxNyA2Ny45IDEwLjExNyBDIDY4LjQgMTAuNTE3IDY4LjUgMTEuMjE3IDY4LjQgMTIuMjE3IFoiPjwvcGF0aD4KICAgIDxwYXRoIGZpbGw9IiMwMDljZGUiIGQ9Ik0gOTAuNyAxMi4xMTcgTCA4NyAxMi4xMTcgQyA4Ni43IDEyLjExNyA4Ni40IDEyLjMxNyA4Ni40IDEyLjYxNyBMIDg2LjIgMTMuNjE3IEwgODUuOSAxMy4yMTcgQyA4NS4xIDEyLjAxNyA4My4zIDExLjYxNyA4MS41IDExLjYxNyBDIDc3LjQgMTEuNjE3IDczLjkgMTQuNzE3IDczLjIgMTkuMTE3IEMgNzIuOCAyMS4zMTcgNzMuMyAyMy40MTcgNzQuNiAyNC44MTcgQyA3NS43IDI2LjExNyA3Ny40IDI2LjcxNyA3OS4zIDI2LjcxNyBDIDgyLjYgMjYuNzE3IDg0LjUgMjQuNjE3IDg0LjUgMjQuNjE3IEwgODQuMyAyNS42MTcgQyA4NC4yIDI2LjAxNyA4NC41IDI2LjQxNyA4NC45IDI2LjQxNyBMIDg4LjMgMjYuNDE3IEMgODguOCAyNi40MTcgODkuMyAyNi4wMTcgODkuNCAyNS41MTcgTCA5MS40IDEyLjcxNyBDIDkxLjQgMTIuNTE3IDkxLjEgMTIuMTE3IDkwLjcgMTIuMTE3IFogTSA4NS41IDE5LjMxNyBDIDg1LjEgMjEuNDE3IDgzLjUgMjIuOTE3IDgxLjMgMjIuOTE3IEMgODAuMiAyMi45MTcgNzkuNCAyMi42MTcgNzguOCAyMS45MTcgQyA3OC4yIDIxLjIxNyA3OCAyMC4zMTcgNzguMiAxOS4zMTcgQyA3OC41IDE3LjIxNyA4MC4zIDE1LjcxNyA4Mi40IDE1LjcxNyBDIDgzLjUgMTUuNzE3IDg0LjMgMTYuMTE3IDg0LjkgMTYuNzE3IEMgODUuNSAxNy40MTcgODUuNyAxOC4zMTcgODUuNSAxOS4zMTcgWiI+PC9wYXRoPgogICAgPHBhdGggZmlsbD0iIzAwOWNkZSIgZD0iTSA5NS4xIDUuNDE3IEwgOTEuOSAyNS43MTcgQyA5MS44IDI2LjExNyA5Mi4xIDI2LjQxNyA5Mi41IDI2LjQxNyBMIDk1LjcgMjYuNDE3IEMgOTYuMiAyNi40MTcgOTYuNyAyNi4wMTcgOTYuOCAyNS41MTcgTCAxMDAgNS42MTcgQyAxMDAuMSA1LjIxNyA5OS44IDQuOTE3IDk5LjQgNC45MTcgTCA5NS44IDQuOTE3IEMgOTUuNCA0LjkxNyA5NS4yIDUuMTE3IDk1LjEgNS40MTcgWiI+PC9wYXRoPgo8L3N2Zz4K" alt="paypal" style="visibility: visible;"/>
                    </div>
                    <div class="paypal-button-tag-content paypal-tagline-color-blue" style="visibility: visible;">
                    </div>
                </button>
            </div>
        </div>
    </div>
</aura:component>

JS

PaymentMethodsInterface - This method enables you to add your custom payment type to available payment methods. Access must be set to global.

PaymentMethodsInterface

<aura:component description="PaymentMethodsPaypal" access="global" implements="c:PaymentMethodsInterface">
    <div class="slds-grid slds-grid_vertical slds-p-bottom--medium">
        <div class="slds-grid slds-p-horizontal--large slds-p-bottom_medium">
            <div class="slds-grid slds-grid_vertical slds-col">
                <div class="slds-text-heading_medium">
                    <strong>{!$Label.c.PayPal_Methods}</strong>
                </div>
                <div>
                    {!$Label.c.PayPal_Methods_Description}
                </div>
            </div>
        </div>
        <div class="fonteva-table--container">
            <table class="slds-table slds-table_bordered slds-no-row-hover">
                <thead class="slds-theme_shade">
                <tr class="slds-text-title_caps">
                    <th class="slds-hide_medium"></th>
                    <th style="padding-left: 1.5rem;width: 150px;">
                    </th>
                    <th>
                        {!$Label.c.PayPal_Name}
                    </th>
                    <th style="width: calc(64px + 3rem);" class="slds-show_medium">

                    </th>
                </tr>
                </thead>

                <tbody>
                <aura:iteration items="{!v.paymentMethods}" var="paymentMethod">
                    <tr>
                        <td class="slds-hide_medium">
                            <lightning:buttonIcon iconName="utility:threedots"  alternativeText="More Options" iconClass="slds-button__icon"/>
                            <div class="slds-dropdown slds-dropdown--right">
                                <ul class="dropdown__list" role="menu">
                                    <li class="slds-dropdown__item">
                                        <a href="javascript:void(0);" onclick="{!c.delPayMethod}" data-id="{!paymentMethod.paymentMethodId}" role="menuitem">
                                            {!$Label.c.Manage_Payment_Methods_Delete}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                        <td style="padding-left: 1.5rem;">
                            <img height="19" width="75" src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/PP_logo_h_100x26.png"/>
                        </td>
                        <td>
                            <strong>
                                {!paymentMethod.type}
                            </strong>
                        </td>
                        <td class="slds-show_medium">
                            <lightning:buttonIcon iconName="utility:edit" alternativeText="{!$Label.c.Manage_Payment_Methods_Edit}" class="slds-theme--shade slds-hidden" onclick="{!c.editPayMethod}" value="{!paymentMethod.paymentMethodId}" />
                            <lightning:buttonIcon iconName="utility:delete" alternativeText="{!$Label.c.Manage_Payment_Methods_Delete}" class="slds-theme--shade" onclick="{!c.delPayMethod}"  value="{!paymentMethod.paymentMethodId}"/>
                        </td>
                    </tr>
                </aura:iteration>
                </tbody>
            </table>
        </div>
    </div>
</aura:component>

JS

See here for more information.

Building Your Component

[Click]
to access the Setup screen.
[Select] Custom Code from the sidebar on the left side of your window.
A list of items expands. [Select] Custom Metadata Types from that list.
A list displays. Find Custom Payment Type Template and [click] Manage Records.
The base list of Fonteva provided Components displays. [Click]
.
Enter the following information:
- Label - the name of your custom payment displayed in the UI.
- Custom Payment Type Template Name - The Salesforce designation. This will populate automatically once the Label value is entered.
- Apex Class - This allows you to provide a custom Apex method for your payment type. This providing this method provides a base set of objects for each Custom Payment Type you create. For example, adding CustomPaymentTypeTemplate will provide:
  - getPaymentOptions - this will return all the valid payment methods for your specific Custom Payment Type.
  - customizeName and customizeValue - this method overrides the default set of attributes with the correct fields for your custom payment type.
- Lightning Component for Checkout - This allows you to provide a component to your checkout view.
- Lightning Component for Payment Method - This adds your custom payment types to the Saved Payment Method component.
If you release protected metadata records in a managed package, [click] the Protected Component select box to restrict access.
If you would like your Sales Order to post your sales orders before receiving payment, [click] the Auto Post Sales Order select box.
- For example, some payment types allow the customer to process payment when they receive the item. If this box is checked, the sales order will post immediately to your ledger. If this box is left unchecked, the sales order will post once payment is received.
[Click] the Is Enabled select box to enable your Custom Payment Type.
[Click] the Available for Recurring Payments if you want the purchase to be available for installments (e.g., A monthly membership fee).
To complete the configuration, [click] either
or
to finalize registration.

Each store has its own set of payment types. See https://fonteva.atlassian.net/wiki/spaces/userguide/pages/854240835 for more information.
Fonteva is developing powerful configuration options via the Apex Class field. Stay tuned.