πŸ“ Bolt / Developers / Developer Guides / Checkout Setup / Embedded Checkout Setup / Logged-in Checkout for Embedded

Logged-in Checkout for Embedded

Prerequisites

These instructions assume that you:


Set Up Account Detection

1. Install Scripts

Add the following scripts to every page where a shopper can check out from your store.

Connect.js

This script enables account validation and launches Bolt’s Checkout Modal.

<script
	id="bolt-connect"
	type="text/javascript"
	src="https://connect.bolt.com/connect.js"
	data-publishable-key="{PUBLISHABLE_KEY}"
</script>

Track.js

This script enables the collection of fraud signals.

<script
  async
  id="bolt-track"
  type="text/javascript"
  src="{CDN_URL}/track.js"
  data-publishable-key="{PUBLISHABLE_KEY}"
></script>

Embed.js

This script is for hosted payment fields.

<script
  id="bolt-embedded"
  type="text/javascript"
  src="{CDN_URL}/embed.js"
></script>

2. Add an Email or Phone Input Field

Embedded Checkout displays upon recognizing a shopper that already participates in the Bolt Network. To enable this shopper detection, you must prompt the shopper to provide their email address or phone number. This can either be done at the beginning of the checkout process, or beforehand (outside of checkout).

3. Check for a Bolt Account

Send a GET request to https://api.bolt.com/v1/account/exists?email={email} to check whether a Bolt account exists for a user

  • On Success + True: Open the Bolt Checkout modal using the connect.js script previously installed.
  • On Success + False: Send the shopper to your guest checkout experience.
  • On Failure: Send the shopper to your guest checkout experience.

Success Response

{
    "has_bolt_account": true,
    ...
}

Error Response

{
    "result": {
        "success": false
    },
    "errors": [{
          "code": 25,
          "message": "The input is missing a required parameter."
    }]
}

Generate an Order Token

This step is done automatically if you use a managed plugin or the BigCommerce platform. Otherwise, send a POST request to Bolt’s Order Token Generation endpoint (https://api.bolt.com/v1/merchant/orders).

Set Up Checkout Modal

1. Initiate Checkout

For shoppers with Bolt Accounts, trigger the Bolt Checkout Modal (via connect.js) and include the following parameters from before:

BoltCheckout.configure({orderToken: token}, null, callbacks, {accountIdentifiers: {phone, email}});

Bolt automatically displays a login prompt, giving shoppers access to their saved shipping and payment information.

  • On Success: Open Bolt’s Checkout modal.
  • On Failure: Send the shopper to guest checkout.

If there is a failure (e.g. Bolt server errors), Bolt will call the onNotify callback with a event.eventName = β€˜error_open’.

2. Handle Checkout Steps Using Javascript Callbacks

var cart = {
  orderToken: '',
}
var hints = {
  prefill: {
    firstName: 'Bolt',
    lastName: 'User',
    email: 'email@example.com',
    phone: '1112223333',
    addressLine1: '1235 Howard St',
    addressLine2: 'Unit D',
    city: 'San Francisco',
    state: 'California',
    zip: '94103',
    country: 'US',
    // ISO Alpha-2 format expected
  },
}
var callbacks = {
  check: function () {
    // This function is called just before the checkout form loads.

    // This is a hook to determine whether Bolt can proceed

    // with checkout at this point. This function MUST return a boolean.

    return true
  },

  onCheckoutStart: function () {
    // This function is called after the checkout form is presented to the user.
  },

  onPaymentSubmit: function () {
    // This function is called after the user clicks the pay button.
  },

  success: function (transaction, callback) {
    // This function is called when the Bolt checkout transaction is successful.

    // ... Add your code here ...

    // **IMPORTANT** callback must be executed at the end of this function

    callback()
  },
  
  onNotify: function(event: CallbackEvent) {
    if (event.eventName === β€˜error_open’) {
      // This function will be called when an error occurs during Logged In Checkout.
      // If you receive this error, proceed to guest flow.
    }
  },

  close: function () {
    // This function is called when the Bolt checkout modal is closed.
    // This will not be called when create_order endpoint returns a valid URL
    // and authorization is successful
  },
}
BoltCheckout.configure(cart, hints, callbacks)

You are now ready to begin post checkout setup.

πŸ‘Ž

How did we do?

πŸ“–On This Page