@sourceallies/payment-gateway-form
    TypeScript icon, indicating that this package has built-in type declarations

    0.10.2 • Public • Published

    @sourceallies/payment-gateway-form

    Introduction

    npm version

    Web component for adding the Source Allies Payment Gateway form to your website. The developer documentation for this package can be found here. A tutorial of how to integrate Payment Gateway with your website can be found here.

    sa-pg-form

    Properties

    Property Attribute Description Type Default
    amountOptions amount-options Specifies what values to display in default buttons. If empty, buttons will not render. Separate values with pipes. Example: '10|25|50|100|250' string undefined
    amountPlaceholder amount-placeholder The placeholder for the amount input. string | undefined undefined
    apiLoginId (required) api-login-id Your login for Authorize.Net. string undefined
    appleMerchantName apple-merchant-name Your Apple merchant name to be used for Apple Pay. string undefined
    applePay apple-pay Enables Apple Pay. boolean undefined
    buttonColor button-color Specifies the background of the buttons. This can be a HEX value, RGB value, RGBA value, HSL value, HSLA value, or the color in all lowercase. This color does not set the color for the payment amount buttons. string '#fff'
    buttonTextColor button-text-color Specifies the text color of the buttons. This can be a HEX value, RGB value, RGBA value, HSL value, HSLA value, or the color in all lowercase. This color does not set the color for the payment amount buttons. string '#1a80c7'
    card card Enables card transactions. boolean undefined
    cardProviders card-providers Specifies the list of card providers to support. These values are used for Google Pay, Apple Pay... Example: 'visa|mastercard|discover|amex' Valid Values: visa, mastercard, discover, amex string undefined
    clientCanonicalName client-canonical-name Your Apple client canonical name to be used for Apple Pay. string undefined
    defaultConfig default-config Uses a default configuration with card, e-check, handle-result, one-time, and recurring enabled. boolean | undefined undefined
    designations designations The designations options. These values are used for the name of the line item being sent through Payment Gateway. If the line item is longer than 31 characters, it will be truncated prior to sending it to Payment Gateway. Separate designations with pipes. If only one is specified, the select will not be displayed. Example: 'Item one|Item two|Item three' string undefined
    displayCoverFees display-cover-fees Specifies whether you want to display the cover fees checkbox and information. If this is displayed, the payer will be able to opt in to covering the transaction fees that are calculated using 'percent-fee'. boolean undefined
    eCheck e-check Enables eCheck transactions. boolean undefined
    environment environment The environment of Payment Gateway you want to make HTTP requests to. Environment.DEV | Environment.LOCAL | Environment.PROD | Environment.QUAL undefined
    forceSurcharge force-surcharge Specifies a dollar amount where a surcharge will be forced. This value must be the number where you want the surcharge to start being forced. Do not include the '\

    Attribute Combinations

    Required Attributes

    Always required: api-login-id, merchant-name, gateway-name

    Required for Google Pay: google-merchant-id, google-merchant-name, gateway-merchant-id

    Required for Apple Pay: apple-merchant-name, client-canonical-name

    Payment Options

    Attributes: card, e-check, google-pay, and apple-pay

    Attribute(s) UI
    card Does not display payment option buttons and displays credit card inputs
    e-check Does not display payment option buttons and displays e check inputs
    google-pay Displays Google Pay button only
    apple-pay Displays Apple Pay button only
    two or more of card, e-check, apple-pay, and google-pay Displays payment option buttons

    Payment Frequencies

    Attributes: one-time and recurring

    Attribute(s) UI
    one-time Does not display payment frequency buttons
    recurring Does not display payment frequency buttons and displays payment schedule inputs
    one-time and recurring Displays payment option buttons

    Payment Designation

    Attributes: designations and other-designation

    Attribute(s) UI
    designations Displays payment designation select
    other-designation Displays payment designation input
    designations and other-designation Displays payment designation select with an Other option. Selecting Other displays payment designation input
    symbol. This attribute should only be used if you are legally allowed to charge a surcharge. number
    gatewayMerchantId gateway-merchant-id
    gatewayName (required) gateway-name
    getInvoiceNumber get-invoice-number
    googleMerchantId google-merchant-id
    googleMerchantName google-merchant-name
    googlePay google-pay
    handleResult handle-result
    keyword keyword
    oneTime one-time
    otherDesignation other-designation
    partnerName (required) partner-name
    phoneNumber phone-number
    preferredName preferred-name
    recaptchaSiteKey recaptcha-site-key
    recurring recurring
    reportErrors report-errors
    surcharge surcharge

    Events

    Event Description Type
    pgPaymentComplete Emits an event on the completion of a payment. CustomEvent<PaymentResult>

    Attribute Combinations

    Required Attributes

    Always required: api-login-id, merchant-name, gateway-name

    Required for Google Pay: google-merchant-id, google-merchant-name, gateway-merchant-id

    Required for Apple Pay: apple-merchant-name, client-canonical-name

    Payment Options

    Attributes: card, e-check, google-pay, and apple-pay

    Attribute(s) UI
    card Does not display payment option buttons and displays credit card inputs
    e-check Does not display payment option buttons and displays e check inputs
    google-pay Displays Google Pay button only
    apple-pay Displays Apple Pay button only
    two or more of card, e-check, apple-pay, and google-pay Displays payment option buttons

    Payment Frequencies

    Attributes: one-time and recurring

    Attribute(s) UI
    one-time Does not display payment frequency buttons
    recurring Does not display payment frequency buttons and displays payment schedule inputs
    one-time and recurring Displays payment option buttons

    Payment Designation

    Attributes: designations and other-designation

    Attribute(s) UI
    designations Displays payment designation select
    other-designation Displays payment designation input
    designations and other-designation Displays payment designation select with an Other option. Selecting Other displays payment designation input

    Keywords

    none

    Install

    npm i @sourceallies/payment-gateway-form

    DownloadsWeekly Downloads

    147

    Version

    0.10.2

    License

    Apache-2.0

    Unpacked Size

    2.34 MB

    Total Files

    168

    Last publish

    Collaborators

    • sourceallies