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.

AttributeDescription
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:

  1. Customize the look & feel of the Buy Now Button
  2. Set the button label
  3. Pass in a discount code
  4. 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

779

Buy Now Button embedded onto a web page

663

Shipping Address screen

665

Secure Checkout screen