@sourceallies/payment-gateway-form
Introduction
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 |