A list of all the allowed attributes in checkout.
Attributes can be added to the checkout script tag and HTML buttons to configure checkout. For example, here is a scheduled payment monthly checkout for $100.00, embedded, with an email passed in which will only accept cards as payment method.
<script
type="text/javascript"
id="paystand_checkout"
src="https://checkout.paystand.co/v4/js/paystand.checkout.js"
ps-env="sandbox"
ps-publishableKey="1noqhele1yjgieoi8aqe4n8i"
ps-mode="embed"
ps-show="true"
ps-spAmount="100.00"
ps-spCurrency="USD"
ps-fixedAmount="true"
ps-payerEmail="[email protected]"
ps-checkoutType="checkout_scheduled_payment"
ps-spInterval="month"
ps-viewFunds="card"
ps-viewClose="hide"
></script>
General Attributes
| attribute | details | description |
|---|---|---|
| publishableKey | type: string elements: init_script (required) | The customer's publishableKey |
| containerId | type: string example: my_checkout_container elements: init_script (optional) | An html element id, whose element checkout should be injected into. |
| env | type: enum_string enum: sandbox|live|default default: live elements: init_script (optional) | The environment mode the checkout instance should operate in. |
| debug | type: enum_string enum: true|false default: false elements: init_script (optional) | When set to 'true', extra logs will be output to the console. |
| mode | type: enum_string enum: modal|embed default: modal elements: any (optional) | Whether checkout should render as a modal popup or an embedded checkout. |
| width | type: string examples: 100px|100% default: 400px elements: any (optional) | The width of the checkout frame. |
| height | type: string examples: 100px|100% default: 700px elements: any (optional) | The height of the checkout frame. |
| ps-click | type: js_string examples: "getDetails();" elements: buttons (optional) | Similar to the javascript onClick event. Fires once per click. Can contain arbitrary javascript statements. The final result of the statements should be a valid checkout settings hash that will be used to configure the checkout instance. |
| drawerType | type: string (3 values req.) examples: open_displaced_fixed default: closed_overlay_toggle elements: open/closed|displaced/overlay|fixed/toggle (optional) | This is used to change the payor pays fee drawer in your checkout. Open/Closed: Open OR close drawer. Displaced/Overlay: In open drawer, move content down OR have drawer on top of content. Fixed/Toggle: User cannot open/close drawer by clicking OR User can open/close drawer by clicking. Supported combinations: open_displaced_fixed open_displaced_toggle closed_displaced_toggle closed_overlay_fixed closed_overlay_toggle |
General display attributes
| attribute | details | description |
|---|---|---|
| checkoutType | type: enum_string enum: checkout_payment|checkout_token| checkout_scheduled_payment|checkout_token2col||checkout_bank_enrollment default: checkout_payment elements: any (optional) | The type of checkout to render. The checkout type largly determines the overall type of flow the checkout will perform. |
| viewFunds | type: ordered_comma_separated_enum_string enum: card|ach|bank|default default: bank,card,ach example: bank,ach,card elements: any (optional) | Sets the payment methods available in the checkout instance as well as the order in which they will appear. |
| viewLogo | type: enum_string enum: hide|show|ps|default default: ps elements: any (optional) | Sets the visibility of the header logo. |
| viewClose | type: enum_string enum: hide|show|default default: show elements: any (optional) | Set the visibility of the close button inside the checkout instance. |
| viewCheckout | type: enum_string enum: portal-xlarge|portal-large|portal-medium| portal-small|portal|mobile|default default: mobile elements: any (optional) | Set whether the checkout displays the the billing portal chrome layout or the more compact mobile layout. |
| viewReceipt | type: enum_string enum: hide|show|close|default default: show elements: any (optional) | Set what should happen once a flow completes. |
| viewLabels | type: enum_string enum: hide|show|default default: show elements: any (optional) | Set the visibility of field labels globally. |
| viewHeader | type:** enum_string enum: hide|show|default default: show elements*: any (optional)* | Set the visibility of the checkout instance header section. |
| viewSecure | type: enum_string enum: hide|show|default default: show elements: any (optional) | Set the visibility of the security notice. This is usually the 'lock' symbol in the bottom right hand corner of the checkout instance. |
| viewExtIds | type: ordered_comma_separated_enum_string enum: card|bank|payer default: none example: card,bank elements: any (optional) | Set the visibility of various resource external ids. |
| hidePoweredBy | type: boolean_string default: false elements: any (optional) | Set the visibility of the "Powered by: Paystand" logo in the portal view's footer. |
| hideSupportInfo | type: boolean_string default: false elements: any (optional) | Set the visibility of the Paystand support content in the portal view's footer. |
| fixedAmount | type: boolean_string default: false elements: any (optional) | Set the payment amount to be editable or fixed. |
| customReceipt | type: html_string elements: any (optional) | Set a custom message on the receipt page. |
| headerColor | type: string elements: any (optional) | Set the header color. Can be any valid css color. |
| externalCss | type: css_url_string elements: any (optional) | Load an external css file to alter the look and feel of the checkout instance. |
| logoUrl | type: image_url_string elements: any (optional) | Load an external image url to display as the header logo. |
| hideCf | type:string elements:any (optional) | Comma separated list of custom field keys. Hide custom fields that have been enabled in the dashboard or per billing portal. |
| checkoutDescription | type: string defaults: Payment: "Make a payment" Token: "Save payment method for later" elements: any (optional) | Description displayed in the checkout header section. |
Resource attributes
| cardExtId | type: string elements: any (optional) | The card external id. |
| cardMeta | type: json_string elements: any (optional) | The card meta data. |
| cardAddressStreet | type: string elements: any (optional) | The card street address. |
| cardAddressCity | type: string elements: any (optional) | The card city address. |
| cardAddressPostal | type: string elements: any (optional) | The card postal address. |
| cardAddressState | type: string elements: any (optional) | The card state address. |
| cardAddressCountry | type: string elements: any (optional) | The card country address. |
| bankNameOnAccount | type: string elements: any (optional) | The name on the bank account. |
| bankAccountType | type: enum_string enum: checking|savings elements: any (optional) | The bank account type. |
| bankAccountHolderType | type: enum_string enum: individual|corporate elements: any (optional) | The bank account holder type. |
| bankRouting | type: string elements: any (optional) | The bank routing number. |
| bankAccount | type: string elements: any (optional) | The bank account number. |
| bankAccountRepeat | type: string elements: any (optional) | The bank account repeat number. |
| bankExtId | type: string elements: any (optional) | The bank external id. |
| bankMeta | type: json_string elements: any (optional) | The bank meta data. |
| bankAddressStreet | type: string elements: any (optional) | The bank street address. |
| bankAddressCity | type: string elements: any (optional) | The bank city address. |
| bankAddressPostal | type: string elements: any (optional) | The bank postal address. |
| bankAddressState | type: string elements: any (optional) | The bank state address. |
| bankAddressCountry | type: string elements: any (optional) | The bank country address. |
| payerName | type: string elements: any (optional) | The payer name. |
| payerEmail | type: string elements: any (optional) | The payer email. |
| payerId | type: string elements: any (optional) | The payer id. |
| payerExtId | type: string elements: any (optional) | The payer external id. |
| payerMeta | type: json_string elements: any (optional) | The payer meta data. |
| payerAddressStreet | type: string elements: any (optional) | The payer street address. |
| payerAddressCity | type: string elements: any (optional) | The payer city address. |
| payerAddressPostal | type: string elements: any (optional) | The payer postal address. |
| payerAddressState | type: string elements: any (optional) | The payer state address. |
| payerAddressCountry | type: string elements: any (optional) | The payer country address. |
| paymentAmount | type: string elements: any (optional) | The payment amount. |
| paymentCurrency | type: string elements: any (optional) | The payment currency. Supported currencies [ "USD", "CAD", "EUR", "MXN", "AUD", "GBP" ] |
| paymentDescription | type: string elements: any (optional) | The payment description. |
| paymentExtId | type: string elements: any (optional) | The payment external id. |
| paymentMeta | type: json_string elements: any (optional) | The payment meta. |
| spName | type: string elements: any (optional) | The scheduled payment name. |
| spDescription | type: string elements: any (optional) | The scheduled payment description. |
| spExtId | type: string elements: any (optional) | The scheduled payment external id. |
| spMeta | type: json_string elements: any (optional) | The scheduled payment meta data. |
| spAmount | type: integer_string elements: any (optional) | The scheduled payment amount. |
| spCurrency | type: enum_string elements: any default: USD (optional) | The scheduled payment currency. Supported currencies [ "USD", "CAD", "EUR", "MXN", "AUD", "GBP" ] |
| spInterval | type: enum_string enum: week|month|year|day elements: any default: week (optional) | The scheduled payment interval. |
| spIntervalCount | type: integer_string elements: any (optional) | The scheduled payment interval count. |
| spAnchor | type: enum_string enum: start|end elements: any (optional) | The scheduled payment anchor. |
| spTimesToRun | type: integer_string elements: any (optional) | The scheduled payment times to run. |
| spAtDay | type: integer_string elements: any (optional) | The scheduled payment day to run. |
| cf_* | : any valid custom field key type: string elements: any (optional)* | Custom field resource data. If a custom field has a key such as someCustomFieldKey, then the attribute should be cf_some_custom_field_key. |
Resource display attributes
| showHeader_* | *: cardHeader | bankHeader | payerHeader type: enum_string enum: hide|show|default default: show elements: any (optional) | Set the visibility of a section header. |
| setHeader_* | *: cardHeader | bankHeader | payerHeader type: string elements: any (optional) | Set the text for a section header. |
| showField_* | *: any card, bank, or payer resource field above type: enum_string enum: hide|show|default default: varies elements: any (optional) | Set the visibility of a field. |
| showFieldIcon_* | *: any card, bank, or payer resource field above type: enum_string enum: hide|show|default default: varies elements: any (optional) | Set the visibility of a field's icon. |
| setPlaceholder_* | *: any card, bank, or payer resource field above type: string elements: any (optional) | Set the placeholder text for a field. |
| setFieldIcon_* | *: any card, bank, or payer resource field above type: material_icon_string elements: any (optional) | Set a fields icon. |
| setLabel_* | *: any card, bank, or payer resource field above type: string elements: any (optional) | Set a field's label. |
| setLayout_fundSelect | type: enum_string enum: tabs|buttons elements: any (optional) | Set the layout for the payment method select buttons/tabs. |
| setFundSelector_cardTabText | type: string b: any (optional) | Set the card payment method selector text. |
| setFundSelector_bankTabText | type: string elements: any (optional) | Set the ach payment method selector text. |
| setFundSelector_bankSessionTabText | type: string elements: any (optional) | Set the echeck payment method selector text. |
Behavior Attributes
| disableFees | type:boolean elements: any (optional) | Disable any additional fees for all payment rails (if you have it enabled in the dashboard). |
| disableNetworkFees | type:boolean elements: any (optional) | Disable any additional fees for Paystand Bank Network payments (if you have it enabled in the dashboard). |
| disableBankFees | type:boolean elements: any (optional) | Disable any additional fees for ACH payments (if you have it enabled in the dashboard). |
| disableCardFees | type:boolean elements: any (optional) | Disable any additional fees for card payments (if you have it enabled in the dashboard). |