Buy Now Button

The Buy Now button is a customizable embeddable solution for desktop, mobile, and tablet devices that allows you to create a simple checkout experience to collect payments or donations on a one-time or recurring basis without being redirected to complete the transaction.

The HTML Snippet

The following describes the minimum requirements to be able to load a Buy Now Button on your website:

<div ps-embed="buy-now-button" offering-id="<offering-id>"></div>

This will load a Buy Now Button with the default settings. You can override the defaults using the attributes listed below.

You can also pass in additional data to the Buy Now Button, which will help to streamline the Buy Now Button experience by reducing the number of screens that the user will see upon clicking the Buy Now Button.

Attributes

🚧
Some Content Management Systems (e.g. WordPress) remove non-standard attributes. In these instances, prepend data- to the name of the attribute. For example, ps-embed would become data-ps-embed.

Attribute	Description
ps-embed	Required Identifies the embed tag as a buy now button Value: buy-now-button
offering-id	Required The ID of the offering that the buy now button corresponds to
button-bg-color	The button's background color Default: #D3D3D3
button-text-color	The button's text color Default: #000
size	The size of the button Options: sm md lg Default: md
corner-radius	The size of the rounding on the corners of the button in pixels Default: 0
label	The label that will be displayed in the button Default: Buy Now
details-text-color	The theme color of the button Values are #000 (light) and #fff (dark) Default #000
orientation	Orientation style of the button Values are horizontal and vertical Default vertical
show-name	Indicates whether the offering's name should be displayed Default: false
show-description	Indicates whether the offering's description should be displayed Default: false
show-image	Indicates whether the offering's image should be displayed If offering does not have an image, this property is ignored Default: false
show-pricing-info	Indicates whether the offering's pricing information should be displayed Default: false
payment-acceptance	The types of payments that the buy now button should accept Options: cc ach cc,ach Default: cc,ach
price	Only applicable to offerings whose price is entered at checkout Ignored if populated for offerings with a preset price If populated, hides the field that asks user to enter a price
quantity	Only applicable to non-recurring offerings - will be ignored for recurring offerings Default: 1
discount-code	Allows developer to pass in a discount code
show-discount-code	Allows the developer to show or hide the discount code input on the checkout screen Default: true
shipping-address-line1	Allows developer to pass in shipping address line 1
shipping-address-line2	Allows developer to pass in shipping address line 2
shipping-address-city	Allows developer to pass in shipping address city
shipping-address-region	Allows developer to pass in shipping address region (i.e. state/province)
shipping-address-postal-code	Allows developer to pass in shipping address postal code
shipping-address-country	Allows developer to pass in shipping address country
service-address-line1	Allows developer to pass in service address line 1
service-address-line2	Allows developer to pass in service address line 2
service-address-city	Allows developer to pass in service address city
service-address-region	Allows developer to pass in service address region (i.e. state/province) Must be a two-character state abbreviation for US or two-character province abbreviation for CA
service-address-postal-code	Allows developer to pass in service address postal code Must be a valid postal code
service-address-country	Allows developer to pass in service address country Must be US or CA

Example

The following snippet shows how to:

Customize the look & feel of the Buy Now Button
Set the button label
Pass in a discount code
Pass in parts of a shipping address

<div
  ps-embed="buy-now-button"
  offering-id="o_5b71ba387f09c50ce09e40e1"
  payment-acceptance="cc,ach"
  label="Checkout"
  button-bg-color="#08c"
  button-text-color="#fff"
  size="md"
  corner-radius="100"
  details-text-color="#000"
  show-name="true"
  show-description="true"
  show-image="true"
  show-pricing-info="true"
  orientation="horizontal"
  discount-code="SPRING2018"
  shipping-address-line1="123 Fake St."
  shipping-address-city="Denver"
  shipping-address-region="CO"
  shipping-address-country="US">
</div>

Resulting Images

The HTML Snippet

Attributes

Some Content Management Systems (e.g. WordPress) remove non-standard attributes. In these instances, prepend data- to the name of the attribute. For example, ps-embed would become data-ps-embed.

Example