Quickstart

Create and publish a product

In the portal, create a product with your quote’s fields and publish it. See Set up a product.

Get a test key and allow your website

On the product’s API keys page, create a test publishable key (pk_test_…) and add the website you’ll test on, such as http://localhost:3000.

Add the script and protect your pay button

Add the embed to your quote pages’ shared layout, and your own file to the page with the pay button. Copy the embed’s tag from the product’s Embed page: it has the current version and its integrity hash filled in.

<!-- On every page of the quote journey -->
<script src="https://cdn.beopen.com/approvals-embed/1.5.0/embed.js"
        integrity="sha384-…" crossorigin="anonymous" async></script>
<!-- On the page with your pay button -->
<script src="/js/checkout-approvals.js" defer></script>

In that file, call protect on the button that continues to payment:

window.HumanApproved = window.HumanApproved || { q: [] };
HumanApproved.q.push(["protect", {
  key: "pk_test_…",
  quote: "HTA-4471920",
  before: "#continue-to-payment",
  quoteDetails: () => ({
    quote: {
      // your product's fields, from its Fields page
      premium: { amount: 412.6, currency: "AUD" },
    },
    mobile: "+61 491 570 156",
  }),
}]);

Press pay and approve

On the product’s Approval settings, set When to ask for approval to Every purchase and publish, so the pause panel shows without an agent.

Click your pay button. The checkout pauses and shows a link. Open the link, complete the approval page and enter the code. With a test key, the code is shown on the page instead of being texted. Your checkout then continues to payment.

Set it back

Set When to ask for approval back to Only when an agent is detected and publish.