Checkout SDK

A JavaScript/TypeScript SDK for launching to the Kite Checkout App.

Launching Checkout

Checkout is initialised using either your test or live Kite publishable keys - it supports new style Kite publishable keys where the environment & purpose is prefixed to the key i.e. pk_live_ or pk_test_, please prefix your keys appropriately (even if they don't yet show up in the Kite dashboard like this):

var checkout = KiteCheckout("pk_live_YOUR_KITE_PUBLISHABLE_KEY");

Add items for printing to the basket, these item objects are exactly the Kite print job that you want printing (see Kite docs for more information around constructing them):

The basketImageUrl field can be used if you want to use a custom image for the item in the basket.

// add items to basket
checkout.basket.addItem({
    "template_id": "hdbook_297x210",
    "page_count": 100,
    "cover_pdf": "http://psps.s3.amazonaws.com/sdk_static/2.pdf",
    "inside_pdf": "http://psps.s3.amazonaws.com/sdk_static/3.pdf",
    "options": {"finish": "gloss"},
    "basketImageUrl": "https://image.kite.ly/render/?image=https://s3.amazonaws.com/kiteshopify/40c7a084-a1e8-4d6f-b745-573d45094bb4_preview.jpeg&product_id=hoodie_uk&variant=purple&format=jpg&debug=false&background=FFFFFF&size=452x628&fill_mode=fit&padding=20&scale=1&rotate=-0&mirror=false&translate=-440,329",
});

// add a second item to the basket
checkout.basket.addItem({
    "template_id": "i6_case",
    "options": {
        "case_style": "matte"
    },
    "asset": "http://psps.s3.amazonaws.com/sdk_static/2.jpg"
});

Once you've constructed your basket, you can launch to checkout - this will redirect to https://checkout.kite.ly to collect payment from the user and ultimately submit the order to kite if payment is successful.

checkout.startCheckoutJourney({
    "cancelCallbackUrls": [{
        "url": "http://localhost:3000/example/checkout-cancel",
        "method": "GET"
    }, {
        "url": "http://localhost:3000/example/checkout-cancel",
        "method": "POST"
    }],
    "cancelRedirectUrl": "http://staging.photobook.kite.ly/kite/",

	"successCallbackUrls": [{
        "url": "http://localhost:3000/example/checkout-success",
        "method": "GET"
    }, {
        "url": "http://localhost:3000/example/checkout-success",
        "method": "POST"
    }],
	"successRedirectUrl": "http://staging.photobook.kite.ly/kite/",

	"style": {
		"logo": "https://checkout.kite.ly/static/images/canon_logo.png",
		"primaryColor": "#c0291b"
	},
});

All arguments to startCheckoutJourney are optional.

cancelRedirectUrl & successRedirectUrl are URLs the the user is redirected to in the instance that they explicitly click links indicating that they'll be taking back to the source website before and after completing an order respectively. The cancelRedirectUrl is the address the user goes to when pressing back. The successRedirectUrl is the address the user goes to when pressing complete. For the cancelRedirectUrl button to appear the cancelRedirectButtonLabel will also need to be set in the SDK which sets the label of the button.

successCallbackUrls are an array of URLs and methods that are called immediately after a user completes payment and the order has successfully been submitted to Kite. It contains the Kite order JSON that was POSTed to api.kite.ly, an order_id, a reference_id and a result field set to success.

cancelCallbackUrls are an array of URLs and methods that are called just before a user is sent to the cancelRedirectUrl address. The requests will include the reference_id and a result field set to cancel.

disableChangeQuantity if true the user cannot change the quantities of the products

disableOrderSummary if true the order summary sidebar is not displayed

Importing the SDK via script tags

<script src="https://unpkg.com/@kite-tech/checkout-sdk/sdk/dist/kite-checkout-client.min.js">

Importing the SDK directly

You can also import the SDK direcly into your project if you npm install it.

npm install --save @kite-tech/checkout-sdk

import {
    KiteCheckout,
} from '@kite-tech/checkout-sdk';

const checkout = KiteCheckout('pk_live_YOUR_KITE_PUBLISHABLE_KEY');

Use of referenceId

The basket JSON can include a referenceId which is used as an ID for the users basket. If this Id the referenceId is:

• Sent to the success callback endpoint when the user completes the journey.
• Sent to the cancelCallbackUrl when the user presses back
• Posted to the cancelRedirectUrl (if it isn't included we just redirect to this address) when the user presses back