Checkout Guide: Integration Methods¶

Requirements¶

Checkout is the easiest and the quickest way to integrate Payelata.com's services into your website. No coding knowledge is required. But your requirements should satisfy the below conditions:

• You do not have a user authentication or management system at your end, and you rely on Payelata.com 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 based on Checkout API.

Integration methods¶

Read about our integration methods below, then choose the one that best suits your needs. Then, jump to this page for the base integration steps.

Payment Widget¶

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

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

<script async src="https://unpkg.com/@paycore/merchant-widget-js@0.3.0/dist/merchantWidget.umd.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>

Payment Link¶

Payment Link is a quick and easy solution for accepting payments. Just create, and optionally customise, 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 is no need to require any data from your customers, so all the fields will be hidden in most cases.

Here is how it can look like:

<form action="{BASE COM API URL}/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 Payelata.com" />
</form>

Widget vs Link¶

Embed options¶

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

Full-page redirect¶

The Checkout is displayed full-page in a browser. Full-page redirect supports over 60 payment methods, but when you redirect customers to the payment page, the browser line displays the web address.

window.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 Checkout is displayed in an iframe or lightbox within your website. When you redirect your customers to the 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 a user resizes the width of the parent page, the content in the iframe or lightbox is automatically adjusted.

Depending on the content, the height of the iframe or lightbox may increase. And an iframe pushes down the content in the parent page that is below when expands vertically.

window.widget.init({
    selector: "HTML_ID_SELECTOR_TO_INSERT_WIDGET_INTO",
    flow: "iframe",
    public_key: "YOUR_PUBLIC_KEY",
    amount: "AMOUNT_OF_INVOICE",
    currency: "USD",
})

Self-hosted Payment Page¶

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

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