Customer onboarding

Prequisites

Before you get started, you should have:

• an API key

This integration guide will use cURL syntax, but you can find syntax for other common libraries and languages in the API reference.

Overview

You will need to gather various account, payment, and shipping information from your customers in order to make autonomous purchases on their behalf. We provide a frontend component to guide customers through the onboarding flow.

Onboarding customers

Guest checkout	Authenticated checkout
In order to complete guest checkouts, your customers will need a credit card on file. Our card onboarding component guides the customer through the process of saving a credit card for future use.	In order to complete authenticated checkouts, your customers will need to attach their account for that merchant. Our account onboarding component guides the customer through the process of connecting their account for future use.

The following instructions describe how to set up customer onboarding for each of these flows:

Server-side: Create a client token

The first step is to create a client token that will be used to authenticate your frontend. From your server, use the client token API to generate a new client token.

curl --request POST \
  --url https://api-agent.useelevate.dev/v1/client_tokens \
  --header 'Authorization: Bearer YOUR_KEY_HERE'

Reminder: Never use your API key directly from the client. Your API key is a secret that should never be shared and only ever used server-side.

You will get back a response with your new client token, which expires 1hr from creation.

{
  object: 'client_token'
  client_token: 'your_client_token_will_be_here'
  expires_at: 12345678 # expiration time as a Unix timestamp
}

Send this client_token to your frontend where you will render the onboarding flow.

Client-side: Initialize the onboarding component

Once you have your client token, initialize the customer onboarding component in an iframe.

Guest checkout

Guest checkout uses our card collection onboarding component. The URL for the card collection component is https://elev4te-onboarding-423322.wm.r.appspot.com/card. Include your client token in the URL of the iframe in the client_token parameter.

<iframe  frameborder="0" width="600" height="1200" src="https://elev4te-onboarding-423322.wm.r.appspot.com/card?client_token=your_client_token" />

Testing: Check out our test component for Guest customer onboarding to test your flow.

Authenticated checkout

Authenticated checkout uses our account connection onboarding component, which is unique per merchant. The URL for the Amazon account connection component is https://elev4te-onboarding-423322.wm.r.appspot.com/amazon. Include your client token in the URL of the iframe in the client_token parameter.

<iframe frameborder="0" width="550" height="650" src="https://elev4te-onboarding-423322.wm.r.appspot.com/amazon?client_token=your_client_token" />

Testing: Check out our test component for Amazon customer onboarding to test your flow.

Client-side: Save the new Customer ID

After your customer has gone through the onboarding flow, we will create a Customer object for them. Once that Customer has been successfully created, we'll send you the Customer ID through an event elevateCustomerCreated. You should store this Customer ID so that you can make purchases for this Customer.

<script>
window.onmessage = function(event) {
  // Verify the origin is coming from Elevate.
  if (event.origin === 'https://elev4te-onboarding-423322.wm.r.appspot.com' && event.data?.eventType === 'elevateCustomerCreated') {
    // You should save this Customer ID to make purchases for this customer.
    console.log(event.data?.data?.customerId);
  }
};
</script>

Congrats! Your customer is now onboarded for autonomous checkout!

Existing customers

For existing customers, you may want to render the customer information saved on file, in lieu of the onboarding component. You can retrieve customer information server-side via the Customers API, and send it to your frontend to show in your customer's profile.

curl --request GET \
  --url https://api.useelevate.dev/v1/customers/cus_ihdvoisofih11coio234 \
  --header 'Authorization: Bearer YOUR_KEY_HERE'

The Customer object may include payment method information, like the last 4 digits or expiration date of their credit card. This is fine to send to your frontend and render to your customer! We won't send you information with PCI constraints.