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() {
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 |
| 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 |