npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sourceallies/payment-gateway-form

v0.10.3

Published

Form web component for integrating Source Allies Payment Gateway with your website.

Downloads

30

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

sourcealliessourceallies

Keywords

Readme

@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 | undefined | | gatewayMerchantId | gateway-merchant-id | Your gateway merchant ID to be used for Google Pay. | string | undefined | | gatewayName (required) | gateway-name | Your Payment Gateway gateway name. | string | undefined | | getInvoiceNumber | get-invoice-number | Specifies whether you want to display the invoice number field. If this is not displayed, a random, unique invoice number will be generated for each transaction. | boolean | undefined | | googleMerchantId | google-merchant-id | Your Google merchant ID to be used for Google Pay. | string | undefined | | googleMerchantName | google-merchant-name | Your Google merchant name to be used for Google Pay. | string | undefined | | googlePay | google-pay | Enables Google Pay. | boolean | undefined | | handleResult | handle-result | Enables default result handling for transactions that is built into the form. | boolean | undefined | | keyword | keyword | Specifies the keyword to use for titling the sections of the form. Examples: payment, gift, donation, or contribution. | string | 'payment' | | oneTime | one-time | Enables one time transactions. | boolean | undefined | | otherDesignation | other-designation | Stores whether to display the other designation input. | boolean | false | | partnerName (required) | partner-name | Your Payment Gateway partner name. | string | undefined | | phoneNumber | phone-number | Adds an optional phone number field. | boolean \| undefined | undefined | | preferredName | preferred-name | Adds an optional preferred name field. | boolean \| undefined | undefined | | recaptchaSiteKey | recaptcha-site-key | Site key used for enabling reCAPTCHA v3. | string \| undefined | undefined | | recurring | recurring | Enables recurring transactions. | boolean | undefined | | reportErrors | report-errors | Specifies if errors generated by the form should be reported to Source Allies. Disabled by default. | boolean | false | | surcharge | surcharge | Sets percentage processing fee amount. This is used to calculate the price with fees if a 'display-cover-fees' is set to true and the user opts in to cover the processing fees or if you set the attribute force-surcharge. This attribute should only be used if you are legally allowed to charge a surcharge. | number | 0.03 |

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 |