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:

  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

779779

Buy Now Button embedded onto a web page

663663

Shipping Address screen

665665

Secure Checkout screen


Did this page help you?