Embed Buttons

To start embedding the checkout process for digital products or subscriptions into your site the first thing you’ll need to do is add the following to the head part of your site:

<script type="text/javascript" src="https://payhip.com/payhip.js"></script>

Next, decide where you want your embed button to be placed and add the following link:

<a href="https://payhip.com/b/RGsF" class="payhip-buy-button" data-theme="none" data-product="RGsF">Buy Now</a>

Two points we need to make:

  • Make sure you replace "RGsF" with the unique key to your own product (which forms your product link).
  • data-theme="none" means the embed button will appear like a regular link you can style with your own CSS. Instead of using "none", you can also use "blue", "green" or "grey" for embed buttons with our default style.

The above is the bare minimum parameters needed to get started, for more advanced options please read on.

Initiating checkout with javascript

To build a custom checkout flow that is tailored to your site, the above simple checkout button may not be enough.

In the example below, you can initiate the checkout on click after binding it to an element on the page and additionally display a custom message to the buyer.

<script type="text/javascript">
    jQuery(".custom-js-btn").click(function() {
        product: "RGsF",
        message: "A custom message to add to the checkout"
<button class="custom-js-btn">Buy Now (50% off)</button>

Checkout Properties

Here are the properties available to you for providing a fully featured checkout experience.

Property Description Data Attribute JS Attribute
Product Key The unique link key for your product or subscription data-product product
Theme The style of the button, by default a green button is displayed, to use your own design set the theme to “none” data-theme theme
Title A custom title which will override the title displayed on the checkout data-title title
Message A custom message which will be displayed on the checkout data-message message
Icon The path to an icon image which will be displayed on checkout or override existing icon data-icon icon
Method The method the checkout will be displayed to the buyer. Can be one of ‘overlay', or ‘window’ data-method method
Metadata A custom variable you can use to passthrough the checkout process, for example may be useful with success callback data-metadata metadata
Pay-What-You-Want If PWYW is enabled for a standard product, then you could use this parameter to define a custom price for the checkout. Formatting as follows: [{product: ‘P9h6’, price: ‘2:50’}, {product: ‘g65f’, price: ‘9.99’}] data-pwyw pwyw
Success URL A page which buyers can be taken to after they complete the purchase data-success-url successUrl
Success Callback A success callback function which can be triggered once the buyer completes the purchase data-success-callback successCallback
Subscription Plan For subscription products, the checkout can be initiated with a default subscription plan data-subscription-plan subscriptionPlan
Iframe Target If an inline method has been defined, then you can specify the class of the element to attach the checkout iframe to data-iframe-target iframeTarget
Iframe Initial Height If an inline method has been defined, then the initial height of the checkout iframe data-iframe-initial-height iframeInitialHeight
Iframe Style If an inline method has been defined, then the CSS style of the checkout iframe data-iframe-style iframeStyle

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.