@liveauctioneers/hammer-ui-checkout

Hammer UI's Checkout Components

Table of Contents

• Installation Prerequesites
• Installation
• Setup
• Examples

Installation Prerequesites

Get access to LiveAuctioneers NPM organization through the SharedPayments team.

If you can access this page while logged in, you have the appropriate permissions / access.

Make sure you're logged into npm.

npm login

Installation

1. Add .npmrc to root directory with the following contents

This will be removed in the future but while we rely on fontawesome icons, it must stay.

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=7E8D8A84-111A-4D49-90AA-E0AA483C0CD6

2. Add necessary packages:

npm i --save --save-exact @liveauctioneers/hammer-ui-checkout @liveauctioneers/hammer-ui-core @formatjs/icu-messageformat-parser react-intl styled-components react-is

Setup

1. Add the Hammer UI provider <HammerProvider />

Hammer UI requires that you add a provider for both themeing among other utilities. (If you have Hammer UI core already setup, you likely have done this already)

Add to where your <App /> is rendered.

import { HammerProvider } from '@liveauctioneers/hammer-ui-core';

// ...

render(
    // Pick the appropriate brand / theme
    <HammerProvider brand="PXB">
        <App />
    </HammerProvider>
);

An example from create-react-app

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { HammerProvider } from '@liveauctioneers/hammer-ui-core';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    // Pick the appropriate brand / theme
    <HammerProvider brand="PXB">
        <App />
    </HammerProvider>
);

2. Add the Hammer UI Checkout provider <CheckoutProvider />

You'll need this provider to wrap any checkout components. Other Hammer UI components do not require it, hence why it's not around the entire app. It is recommended to wrap this around the entire page where the components will lie. It must be a descendent of the above <HammerProvider />.

import { CheckoutProvider } from '@liveauctioneers/hammer-ui-checkout';

// ...

// In your page component...
return (
    <CheckoutProvider
        buyerId={BUYER_ID}
        externalId={EXTERNAL_ID}
        marketplaceCode={MarketPlaceCode.ProxiBid}
        marketplaceToken={MARKETPLACE_TOKEN}
    >
        <Page />
    </CheckoutProvider>
);

5. Add relevant component from Hammer UI

See examples below if you need some inspiration.

Examples

Example - Payment Method Component

import {
    // for typescript:
    // CreditCard,
    emptyAddress,
    MarketPlaceCode,
    PaymentMethod,
    PaymentMethodEnum,
    PaymentProvider,
    CheckoutProvider,
} from '@liveauctioneers/hammer-ui-checkout';
import styled from 'styled-components';

// typeof `CreditCard` if you have typescript.
const MOCK_MASTER_CARD = {
    bidderId: '1',
    billingAddress: { ...emptyAddress },
    bin: '1',
    brand: 'MasterCard',
    default: false,
    expirationMonth: '11',
    expirationYear: '22',
    id: 33,
    lastFour: '9333',
    nameOnCard: 'John Doe',
    nickname: 'Prop MasterCard',
    provider: '3',
    providerCustomerId: '',
    providerMethod: PaymentMethodEnum.CreditCard,
    providerToken: '12345',
};

// In your React component...

return (
    <CheckoutProvider
        buyerId={BUYER_ID}
        externalId={EXTERNAL_ID}
        marketplaceCode={MarketPlaceCode.LiveAuctioneers}
        marketplaceToken={MARKETPLACE_TOKEN}
    >
        <PaymentMethod
            title="Payment Method"
            onPaymentMethodSavedCallback={(payload) => console.log(payload)}
            creditCards={[MOCK_MASTER_CARD]}
        />
    </CheckoutProvider>
);

Example - Full Checkout Page

import {
    // for typescript:
    // Address,
    // CreditCard,
    emptyAddress,
    MarketPlaceCode,
    PaymentMethodEnum,
    PaymentProvider,
    CheckoutProvider,
    CheckoutPage,
} from '@liveauctioneers/hammer-ui-checkout';
import styled from 'styled-components';

// typeof CreditCard if you have typescript.
const MOCK_MASTER_CARD = {
    bidderId: '1',
    billingAddress: { ...emptyAddress },
    bin: '1',
    brand: 'MasterCard',
    default: false,
    expirationMonth: '11',
    expirationYear: '22',
    id: 33,
    lastFour: '9333',
    nameOnCard: 'John Doe',
    nickname: 'Prop MasterCard',
    provider: '3',
    providerCustomerId: '',
    providerMethod: PaymentMethodEnum.CreditCard,
    providerToken: '12345',
};

// typeof Address if you have typescript.
const MOCK_ADDRESS = {
    ...emptyAddress,
    address1: 'Live Auctioneers LLC 10 East 38th Street',
    city: 'New York',
    countryCode: 'US',
    firstName: 'Don',
    lastName: 'Joe',
    organizationName: 'Auctioneers',
    phoneNumber: '123456789',
    postalCode: '10016',
    state: 'NY',
};

// In your React component...

return (
    <CheckoutProvider
        buyerId={BUYER_ID}
        externalId={EXTERNAL_ID}
        marketplaceCode={MarketPlaceCode.LiveAuctioneers}
        marketplaceToken={MARKETPLACE_TOKEN}
    >
        <CheckoutPage
            showLoading
            addressList={[MOCK_ADDRESS]}
            creditCards={[MOCK_MASTER_CARD]}
            freeLocalPickup
            hasBidderShippingAvailable
        />
    </CheckoutProvider>
);