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
Updated about 6 years ago