Skip to content

Checkout Guide: Integration Methods

Requirements

Checkout is the easiest and the quickest way to integrate Spoynt'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 Spoynt 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

 Checkout

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>

Widget

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:

Simple redirect example

<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 Spoynt" />
</form>
Feature Payment Widget Payment Link
Technology JavaScript GET Request
Request Validation
Error & Event Handing
Invoicing via Email or SMS
Invoicing via QR-code

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.

Payment Widget

Set flow field to redirect for Payment Widget integration method:

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.

Payment Widget

Set flow field to "iframe" and create HTML tag to insert Checkout into. Define "selector" key in widget configuration options;

Example:

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')