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="#!" class="payhip-buy-button" data-product="RGsF">Buy Now</a>

Make sure you replace “RGsF” with the unique key to your own product (which forms your product link). 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() {
        Payhip.Checkout.open({
            product: "RGsF",
            message: "A custom message to add to the checkout"
        });
    });
</script>

<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 Required
Product Key The unique link key for your product or subscription data-product product Yes
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 No
Title A custom title which will override the title displayed on the checkout data-title title No
Message A custom message which will be displayed on the checkout data-message message No
Icon The path to an icon image which will be displayed on checkout or override existing icon data-icon icon No
Method The method the checkout will be displayed to the buyer. Can be one of ‘overlay’, ‘inline’ or ‘window’ data-method method No
Metadata A custom variable you can use to passthrough the checkout process, for example may be useful with success callback data-metadata metadata No
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 No
Success URL A page which buyers can be taken to after they complete the purchase data-success-url successUrl No
Success Callback A success callback function which can be triggered once the buyer completes the purchase data-success-callback successCallback No
Subscription Plan For subscription products, the checkout can be initiated with a default subscription plan data-subscription-plan subscriptionPlan No
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 No
Iframe Initial Height If an inline method has been defined, then the initial height of the checkout iframe data-iframe-initial-height iframeInitialHeight No
Iframe Style If an inline method has been defined, then the CSS style of the checkout iframe data-iframe-style iframeStyle No