Skip to content

Generate a Checkout Token

If you want to use Geins Checkout, you will need to create a checkout token. This token will be used by the checkout to load the cart and checkout information. The token can also carry the look and feel of your brand during the checkout process.

💡 TIP

If you want to try the checkout out right now, you can use the Checkout Token Generator further down this page.

Generate with @geins/oms

Here is everything you need to know if you want to connect Geins Checkout to your infrastructure.

Code Example

typescript
import { GeinsCore } from '@geins/core';
import { GeinsOMS } from '@geins/oms';
import type { GenerateCheckoutTokenOptions, GeinsSettings, CartType } from '@geins/types';

// Setup your Geins settings
const geinsSettings: GeinsSettings = {
  apiKey: 'your-api-key', // xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
  accountName: 'your-account-name', // 'name'
  channel: 'your-channel-id', // '1'
  tld: 'your-tld', // 'com'
  locale: 'your-locale', // 'en-US'
  market: 'your-market', // 'us'
};

// Initialize GeinsCore and GeinsOMS
const geinsCore = new GeinsCore(geinsSettings);
const geinsOMS = new GeinsOMS(geinsSettings);

// Get your cart
const cart: CartType = await geinsOMS.cart.get();

// Setup your checkout
const checkoutTokenOptions: GenerateCheckoutTokenOptions = {
  cartId: cart.id,
  user: { email: 'user@test.se' },
  selectedPaymentMethodId: 23,
  selectedShippingMethodId: 1,
  copyCart: true,
  customerType: 'PERSON',
  redirectUrls: {
    cancel: 'https://www.my-store.com/cart',
    continue: 'https://www.my-store.com',
    terms: 'https://www.my-store.com/terms',
  },
  branding: {
    title: 'My Store',
    logo: 'https://www.my-store.com/logo.svg',
    styles: {
      logoSize: '2.5rem',
      radius: '5px',
      accent: '#ffcc00',
      accentForeground: '#000000',
    },
  },
};

// Generate checkout token
const token = await geinsOMS.createCheckoutToken(checkoutTokenOptions);

// Redirect to the checkout page
window.open(`https://checkout.geins.services/${token}`);

Checkout Token Options

OptionTypeDescription
cartIdstringThe ID of the cart to use for the checkout.
customerTypeCustomerTypeThe type of customer. Can be either PERSON or ORGANIZATION.
userGeinsUserTypeThe user object containing details like email and address.
copyCartbooleanIf true, the cart will be copied. Useful if you want several customers to be able to checkout a predefined cart
selectedPaymentMethodIdnumberThe ID of the selected payment method.
selectedShippingMethodIdnumberThe ID of the selected shipping method.
redirectUrlsCheckoutRedirectsTypeThe redirect URLs for the checkout, see below for specifications.
brandingCheckoutBrandingTypeThe branding options for the checkout, see below for specifications.

Branding Options

OptionTypeDescriptionDefault Value
titlestringThe title of the checkout page. Will not be shown if a logo is added but is always used for the meta title.''
iconstringURL for the icon shown to the left of the logo/title. Displayed in a circle as 48x48px.''
logostringURL for your logo.''
styles.logoSizestringHeight of the logo. The width will be automatic.'2rem'
styles.radiusstringRadius of UI elements.'0.5rem'
styles.backgroundstringThe first background color.'#f7f7f7'
styles.foregroundstringColor for text and icons used on the first background color.'#131313'
styles.cardstringSecondary background color.'#ffffff'
styles.cardForegroundstringColor for text and icons used on the secondary background color.'#131313'
styles.accentstringColor used on buttons and other accent elements.'#131313'
styles.accentForegroundstringColor for text and icons used on accent elements.'#ffffff'
styles.borderstringColor for borders.'#ebebeb'
styles.salestringColor used for sale prices in the cart.'#e60000'
styles.errorstringColor used for error messages.'#b00020'

Redirect URLs

OptionTypeDescription
cancelstringURL to go to if the user cancels/exits the checkout. Will show a small arrow link next to the icon/logo.
continuestringIf supplied, will show a button to continue shopping on the confirmation page.
termsstringWill display a Terms & Conditions link on the checkout page.
privacystringWill display a Privacy Policy link on the checkout page.
successstringURL to redirect to after successful checkout. Leave empty to use the default (recommended). If using a custom URL, you will need a custom implementation to complete cart.

Types

typescript
type GenerateCheckoutTokenOptions = {
  cartId: string;
  customerType?: CustomerType;
  user?: GeinsUserType;
  copyCart?: boolean;
  selectedPaymentMethodId?: number;
  selectedShippingMethodId?: number;
  redirectUrls?: CheckoutRedirectsType;
  branding?: CheckoutBrandingType;
  geinsSettings?: GeinsSettings;
};

export type CheckoutBrandingType = {
  title?: string;
  icon?: string;
  logo?: string;
  styles?: CheckoutStyleType;
};

export type CheckoutStyleType = {
  logoSize?: string;
  radius?: string;
  background?: string;
  foreground?: string;
  card?: string;
  cardForeground?: string;
  accent?: string;
  accentForeground?: string;
  border?: string;
  sale?: string;
  error?: string;
};

export type CheckoutRedirectsType = {
  terms?: string;
  privacy?: string;
  success?: string;
  cancel?: string;
  continue?: string;
};

enum CustomerType {
  PERSON = 'PERSON',
  ORGANIZATION = 'ORGANIZATION',
}

Generate a token here

Follow these steps to generate a token for the checkout right now:

1. Set up your Geins Settings

2. Create a Cart

3. Generate a checkout token

Already have a token and want to edit it? Paste it below:

Checkout Settings

The zip code to be used for shipping

Urls

Url to go to if user cancels/exits the checkout. Will show a small arrow link next to the icon/logo

If supplied, will show a button to continue shopping on confirmation page.

Will display a Terms & Conditions link on the checkout page.

Will display a Privacy Policy link on the checkout page.

Url to redirect to after successful checkout. Leave empty to use the default (recommended)

Checkout Branding

Title of the checkout page. Will not be shown if you add a logo, but is always used for the meta title.

Shown to the left of the logo/title if provided. Will be shown in a circle as 48x48px

Url for your logo. Choose size for your logo below.

Radius of UI elements

Branding Colors

The colors below are set to the default values.

The first background color

Color for text and icons used on the first background color

Used as a secondary background color

Color for text and icons used on the secondary background color

Color used on buttons and other accent elements

Color for text and icons used on accent elements

Color for borders

Color used for sale prices in the cart

Color used for error messages

Released under the MIT License.