Client-side Purchasing

We support an API to create a "customer client secret". A customer client secret is a short-lived credential whose scope is limited to a single customer email address. It can be used to purchase an insurance policy, but only for that email address, which means it is appropriate for use if you wish to perform the purchase on the client side.

The customer client secret must be created by authenticating to the API with a client ID and client secret, and the client secret must not be exposed on the client side, so a backend service is still required.

Here's an example of how you could use the customer client secret with a Django backend and a Javascript jQuery frontend. First, in your view, create the customer client secret and pass it to your template:

/views/offer.py

@login_required
def offer(request):
    email_address = "user@example.com"
    vi_customer_client_secret_response = requests.post(
        url="https://api.verticalinsure.com/v1/auth/customer/secret",
        auth=(VERTICAL_INSURE_CLIENT_ID,VERTICAL_INSURE_CLIENT_SECRET),
        json={"email_address": email_address},
    )
    vi_customer_client_secret_response.raise_for_status()
    vi_customer_client_secret = vi_customer_client_secret_response.json()["secret"]
    return render(
        request,
        "offer.html",
        {
            "vi_client_id": VERTICAL_INSURE_CLIENT_ID,
            "vi_customer_client_secret": vi_customer_client_secret,
            ...
        },
    )

Then, in your template, present the offer and utilize javascript to complete the purchase:

/templates/offer.html

<gap-medical
    client-id="{{vi_client_id}}"
    customer-email-address="{{email_address}}"
    coverage-start-date={{coverage_start_date}}
    ...
    include-payment-element
></gap-medical>
<input id="vi-customer-client-secret" value="{{vi_customer_client_secret}}" hidden>

<script type="text/javascript">
const component = document.querySelector("gap-medical");
component
  .validate()
  .then((validation) => {
    if (!validation.isValid) {
      throw Error("Credit card form validation failed!");
    }
    return component.getPaymentToken(creditCardHolderName, creditCardHolderZipCode);
  })
  .then((paymentToken) => {
    $.ajax({
      method: "post",
      url: "https://api.verticalinsure.com/v1/purchase/gap-medical",
      headers: {
        Authorization: "Bearer " + document.getElementById("vi-customer-client-secret").value,
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      data: JSON.stringify({
        quote_id: component.quoteId,
        payment_method: {
          token: paymentToken,
        },
      }),
    })
      .done(function () {
        alert("done");
      })
      .fail(function () {
        alert("failure");
      });
  });
</script>