HPP Guide: Integration Methods¶

Requirements¶

Commerce HPP is the easiest and the quickest way to integrate checkout into your website. No coding knowledge is required. But your requirements should satisfy the below conditions:

• You do not have an user authentication or management system at your end and you rely on Corefy for providing it.
• Only after completing checkout, end users are allowed to access your product or service.

You can integrate with any of our payment page experience offerings. Choose from one of our simple hosted solutions — Payment Widget or Payment Link which are based on HPP API.

Integration methods¶

Read about our integration methods below, then choose the one that best suits your needs.

Payment Widget¶

Payment widget is our simplest integration method and requires little technical know-how. It's a payment lightbox that you can easily add to your website without redirecting client to the separate payment page.

Widget is integrated directly to the website page — client selects a payment method, fills out payment details and confirms payment in the widget.

<script async src="https://unpkg.com/@paycore/[email protected]/dist/merchantWidget.umd.min.js"></script>
<script>
window.widget.init({
    selector: "HTML_ID_SELECTOR_TO_INSERT_WIDGET_INTO",
    public_key: "YOUR_PUBLIC_KEY",
    amount: 100.00,
    currency: "USD",
});
</script>

Jump to this page for the Payment Link based integration steps.

Payment Link¶

Payment Link is a quick and easy solution for accepting payments. Just create, and optionally customize, a Payment Link, then copy and paste the HTML code snippet to your website.

The simplest case would involve an HTML form with specific information that would be sent via a GET request. There’s no need to require any the data from your customers, so all the fields will be hidden in most cases. Here’s how it can look like:

<form action="https://com.paycore.io/hpp/" method="GET">
    <input type="hidden" name="public_key" value="<your-public-key>" />
    <input type="hidden" name="reference_id" value="<unique-reference-id>" />
    <input type="hidden" name="currency" value="USD" />
    <input type="hidden" name="description" value="Some goods" />
    <input type="hidden" name="amount" value="100" />
    <input type="submit" value="Pay with Corefy" />
</form>

Widget vs Link¶

Embed options¶

• Standard HPP: Redirect to a customizable hosted payment page.
• Embedded HPP: Display an overlay payment form on your site.

Full-page redirect¶

The Hosted Payment Page are displayed full-page in a browser. When your customers are redirected to the Hosted Payment Page, the web address for the Hosted Payment Page is displayed. Full-page redirect supports over 60 payment methods.

window.payment_widget.init({
    selector: "HTML_ID_SELECTOR_TO_INSERT_WIDGET_INTO",
    flow: "redirect",
    public_key: "YOUR_PUBLIC_KEY",
    amount: "AMOUNT_OF_INVOICE",
    currency: "USD",
});

Embedded (iframe)¶

The Hosted Payment Page are displayed in an iframe or lightbox within your website. When you redirect your customers to our payment page, the web address for your website remains unchanged, providing a more seamless shopping experience. An iframe or lightbox integration requires a more advanced integration.

We apply responsive web design to payment content displayed in an iframe or lightbox. When the width of the parent page is resized, the content in the iframe or lightbox is automatically adjusted.

Depending on the content being displayed, the height of the iframe or lightbox may increase. For an iframe, the content in the parent page that is below the iframe is pushed down as the payment page content expands vertically.

window.payment_widget.init({
    selector: "HTML_ID_SELECTOR_TO_INSERT_WIDGET_INTO",
    flow: "redirect",
    public_key: "YOUR_PUBLIC_KEY",
    amount: "AMOUNT_OF_INVOICE",
    currency: "USD",
});

Self-hosted Payment Page¶

Integrating using API provides you with better control. But requires coding knowledge. Choose this option if you:

• Have user authentication / management system at your end.
• Or need more control than offered by HPP (like 'price overriding' , changing 'trial end date')

Jump to this page for the API based integration steps.

Next¶

Jump to next page for the HPP Features.