API ReferenceHome

Button Examples

<div id="ps_container_id"></div>
<script
  type="text/javascript"
  id="ps_checkout"
  src="https://checkout.paystand.co/v4/js/paystand.checkout.js"
  ps-env="sandbox"
  ps-publishableKey="1noqhele1yjgieoi8aqe4n8i"
  ps-containerId="ps_container_id"
></script>

Button styles

Styled

<button
	class="ps-button ps-button-style"
>
  Pay Now - Styled
</button>

Unstyled

<button
	class="ps-button"
>
  Pay Now - Unstyled
</button>

Checkout types

Payment

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
>
  Pay Now
</button>

Tokenize

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_token"
>
  Save Payment Method
</button>

Scheduled Payment

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_scheduled_payment"
  ps-spName="Monthly Rent"
  ps-spDescription="For apartment 201B"
  ps-spExtId="apt201b"
  ps-spAmount="1900"
  ps-spCurrency="USD"
  ps-spInterval="monthly"
  ps-spIntervalCount="1"
  ps-spAnchor="start"
  ps-spTimesToRun="12"
>
  Schedule Payment
</button>

Custom Preset

<button
  class="ps-button ps-button-style"
  ps-checkoutType="pay2"
  ps-viewCheckout="mobile"
>
  Pay Now
</button>

Payment amount

Editable amount

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.25"
>
  Pay Now - $20.25
</button>

Fixed amount

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-fixedAmount="true"
  ps-paymentAmount="20.59"
>
  Pay Now - $20.59
</button>

Checkout display

Width/height

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.13"
  ps-width="700px"
  ps-height="700px"
>
  Pay Now - 700px x 700x
</button>

Close button

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.97"
  ps-viewClose="hide"
>
  Pay Now - No close button
</button>

Portal view

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.23"
  ps-width="900px"
  ps-height="700px"
  ps-viewCheckout="portal"
  ps-viewClose="show"
>
  Pay Now - Portal view
</button>

Mobile view

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.97"
  ps-viewCheckout="mobile"
  ps-viewClose="show"
>
  Pay Now - Mobile view
</button>

Resource data

Payer data

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="50.00"
  ps-payerName="John Doe Payer"
  ps-payerEmail="[email protected]"
  ps-payerAddressStreet="123 Alliance Ln"
  ps-payerAddressCity="Santa Cruz"
  ps-payerAddressState="CA"
  ps-payerAddressCountry="USA"
  ps-payerAddressPostal="95060"
  ps-payerExternalId="payer_external_id"
  ps-payerMeta='{"payer": "meta"}'
>
  Pay Now - Payer data
</button>

Card data

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="50.00"
  ps-cardName="John Doe - Card"
  ps-cardExternalId="card_external_id"
  ps-cardMeta='{"card": "meta"}'
>
  Pay Now - Card data
</button>

Bank data

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="50.00"
  ps-bankNameOnAccount="John Doe - Bank"
  ps-bankAccountType="checking"
  ps-bankAccountHolderType="company"
  ps-bankRouting="110000000"
  ps-bankAccount="000123456789"
  ps-bankAccountRepeat="000123456789"
  ps-bankExternalId="bank_external_id"
  ps-bankMeta='{"bank": "meta"}'
>
  Pay Now - Bank data
</button>

Custom field data

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="50.00"
  ps-cf_first_name="First Name Custom Field"
>
  Pay Now - Custom field data
</button>

Embed/Modal mode

Embed

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.98"
  ps-mode="embed"
>
  Pay Now - Embed
</button>

Modal

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.98"
  ps-mode="modal"
>
  Pay Now - Modal
</button>

Header

Header color

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.24"
  ps-headerColor="darkred"
>
  Pay Now - Header color
</button>

Hide logo

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.77"
  ps-viewLogo="hide"
>
  Pay Now - Hide logo
</button>

Custom logo

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.19"
  ps-logoUrl="http://www.image360.com/assets/live/0/34/59/115/118/design-output-services-logo-creation-national-log001.jpg?width=330&height=290&mode=crop&scale=both"
  ps-logoBdColor="#555"
  ps-logoBgColor="#000"
  ps-logoWidth="90px"
  ps-logoHeight="100px"
>
  Pay Now - Custom logo
</button>

Custom css

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.19"
  ps-externalCss="../js/paystand.checkout.external.css"
>
  Pay Now - Custom css
</button>

Payment methods

Ordering

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.95"
  ps-viewFunds="card,ach,bank"
>
  Pay Now - Payment methods - ordering
</button>

Removing

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.46"
  ps-viewFunds="card,bank"
>
  Pay Now - Payment methods - removing
</button>

Labels

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.33"
  ps-setFundSelector_bankSessionTabText="1. eCheck"
  ps-setFundSelector_cardTabText="2. Card"
  ps-setFundSelector_bankTabText="3. Bank"
>
  Pay Now - Payment methods - labels
</button>

Layout

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.97"
  ps-setLayout_fundSelect="tabs"
>
  Pay Now - Payment methods - layout
</button>

Labels and fields

Section headers

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.03"
  ps-showHeader_cardHeader="show"
  ps-setHeader_cardHeader="Card Details"
  ps-showHeader_bankHeader="show"
  ps-setHeader_bankHeader="Bank Details"
  ps-showHeader_payerHeader="show"
  ps-setHeader_payerHeader="Payer Details"
>
  Pay Now - Section headers
</button>

Show External Id fields

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.99"
  ps-viewExtIds="card,bank,payer"
>
  Pay Now - Show External Id fields
</button>

Show field labels

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.21"
  ps-viewLabels="show"
>
  Pay Now - Show field labels
</button>

Set field placeholders

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.22"
  ps-viewPlaceholders="show"
  ps-setPlaceholder_cardExternalId="Card external id placeholder"
  ps-setPlaceholder_cardName="Name on card placeholder"
  ps-setPlaceholder_cardNumber="Card number placeholder"
  ps-setPlaceholder_cardExpiry="Card expiry placeholder"
  ps-setPlaceholder_cardSecurityCode="Card security code placeholder"
  ps-setPlaceholder_bankNameOnAccount="Name on account placeholder"
  ps-setPlaceholder_bankAccountHolderType="Account holder type placeholder"
  ps-setPlaceholder_bankRouting="Routing placeholder"
  ps-setPlaceholder_bankAccount="Account placeholder"
  ps-setPlaceholder_bankName="Bank name placeholder"
  ps-setPlaceholder_bankAccountRepeat="Account repeat placeholder"
  ps-setPlaceholder_bankExternalId="External Id placeholder"
  ps-setPlaceholder_payerEmail="Payer email placeholder"
  ps-setPlaceholder_payerAddressStreet="Street placeholder"
  ps-setPlaceholder_payerAddressCity="City placeholder"
  ps-setPlaceholder_payerAddressPostal="Postal placeholder"
  ps-setPlaceholder_payerAddressState="State placeholder"
  ps-setPlaceholder_payerAddressCountry="Country placeholder"
>
  Pay Now - Set field placeholders
</button>

Set field labels

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.22"
  ps-viewLabels="show"
  ps-setLabel_cardExternalId="Card external id label"
  ps-setLabel_cardName="Name on card label"
  ps-setLabel_cardNumber="Card number label"
  ps-setLabel_cardExpiry="Card expiry label"
  ps-setLabel_cardSecurityCode="Card security code label"
  ps-setLabel_bankNameOnAccount="Name on account label"
  ps-setLabel_bankAccountHolderType="Account holder type label"
  ps-setLabel_bankRouting="Routing label"
  ps-setLabel_bankAccount="Account label"
  ps-setLabel_bankName="Bank name label"
  ps-setLabel_bankAccountRepeat="Account repeat label"
  ps-setLabel_bankExternalId="External Id label"
  ps-setLabel_payerEmail="Payer email label"
  ps-setLabel_payerAddressStreet="Street label"
  ps-setLabel_payerAddressCity="City label"
  ps-setLabel_payerAddressPostal="Postal label"
  ps-setLabel_payerAddressState="State label"
  ps-setLabel_payerAddressCountry="Country label"
>
  Pay Now - Set field labels
</button>

Set field icon

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.22"
  ps-setFieldIcon_payerEmail="done"
  ps-setFieldIcon_payerAddressStreet="done"
  ps-setFieldIcon_payerAddressCity="done"
  ps-setFieldIcon_payerAddressPostal="done"
  ps-setFieldIcon_payerAddressState="done"
  ps-setFieldIcon_payerAddressCountry="done"
  ps-setFieldIcon_cardExternalId="done"
  ps-setFieldIcon_cardName="done"
  ps-setFieldIcon_cardNumber="done"
  ps-setFieldIcon_cardExpiry="done"
  ps-setFieldIcon_cardSecurityCode="done"
  ps-setFieldIcon_bankNameOnAccount="done"
  ps-setFieldIcon_bankAccountHolderType="done"
  ps-setFieldIcon_bankRouting="done"
  ps-setFieldIcon_bankAccount="done"
  ps-setFieldIcon_bankName="done"
  ps-setFieldIcon_bankAccountRepeat="done"
  ps-setFieldIcon_bankExternalId="done"
>
  Pay Now - Set field icons
</button>

Show fields

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.22"
  ps-showField_payerEmail="show"
  ps-showField_payerAddressStreet="show"
  ps-showField_payerAddressCity="show"
  ps-showField_payerAddressPostal="show"
  ps-showField_payerAddressState="show"
  ps-showField_payerAddressCountry="show"
  ps-showField_cardExternalId="show"
  ps-showField_cardName="show"
  ps-showField_cardNumber="show"
  ps-showField_cardExpiry="show"
  ps-showField_cardSecurityCode="show"
  ps-showField_bankNameOnAccount="show"
  ps-showField_bankAccountHolderType="show"
  ps-showField_bankRouting="show"
  ps-showField_bankAccount="show"
  ps-showField_bankName="show"
  ps-showField_bankAccountRepeat="show"
  ps-showField_bankExternalId="show"
>
  Pay Now - Show fields
</button>

Show field icons

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.22"
  ps-showFieldIcon_payerEmail="show"
  ps-showFieldIcon_payerAddressStreet="show"
  ps-showFieldIcon_payerAddressCity="show"
  ps-showFieldIcon_payerAddressPostal="show"
  ps-showFieldIcon_payerAddressState="show"
  ps-showFieldIcon_payerAddressCountry="show"
  ps-showFieldIcon_cardExternalId="show"
  ps-showFieldIcon_cardName="show"
  ps-showFieldIcon_cardNumber="show"
  ps-showFieldIcon_cardExpiry="show"
  ps-showFieldIcon_cardSecurityCode="show"
  ps-showFieldIcon_bankNameOnAccount="show"
  ps-showFieldIcon_bankAccountHolderType="show"
  ps-showFieldIcon_bankRouting="show"
  ps-showFieldIcon_bankAccount="show"
  ps-showFieldIcon_bankName="show"
  ps-showFieldIcon_bankAccountRepeat="show"
  ps-showFieldIcon_bankExternalId="show"
>
  Pay Now - Show field icons
</button>

Misc

Click event

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-click="onButtonClick('some_data')"
>
  Pay Now - Click event
</button>

<script type="text/javascript">
  
  // example function
  function onButtonClick(value) {
    return {
      "paymentAmount": "20.43"
    }
  }
  
</script>

Close on receipt

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.01"
  ps-viewReceipt="close"
>
  Pay Now - Close on receipt
</button>

Hide security notice

<button
  class="ps-button ps-button-style"
  ps-checkoutType="checkout_payment"
  ps-paymentAmount="20.76"
  ps-viewSecure="hide"
>
  Pay Now - Hide security notice
</button>