<script src="https://cdn.us.zip.co/v1/zip.js" type="text/javascript"></script>

<zip-button id="QPButton" integrationType="api></zip-button>

<input type="button" id="ZipButton" value="Pay with Zip"/>

const zipButton = document.getElementById('ZipButton')

zipButton.addEventListener('click', () => {
  window.quadpay.apiCheckout.openCheckout(requestBody, signature)
})

const handleClick = () => {
  window.quadpay.apiCheckout.openCheckout(requestBody, signature)
}

const handleKeyDown = () => {
  if (event.key === 'Enter') {
    window.quadpay.apiCheckout.openCheckout(requestBody, signature)
  }
}

<input 
  type="button"
  id="ZipButton"
  value="Pay with Zip"
  onClick={handleClick}
  onKeyDown={(event) =>  handleKeyDown(event)}
></input>

/**
 * @param {Object} result - The result object
 * @param {Object} result.customer - The Customer object
 * @param {Object} result.object - The Zip order object
 * @param {Object} [result.shippingAddress] - Address object (only on Express Checkout)
 */

window.quadpay.apiCheckout.onComplete((result) => {
  // your code goes here
});

/**
 * @param {string} message - A message explaining why checkout was closed
 */

window.quadpay.apiCheckout.onClose((message) => {
  // your code goes here
})

/**
 * @param {string[]} errors - An array of error messages
 */

window.quadpay.apiCheckout.onError((errors) => {
  // your code goes here
})

{
        "merchantId": "[Insert merchant Id]",
        "merchantReference": "your-unique-order-id",
        "order": {}, // Order object reference can be found below
        "callbackUrl": "your-url-for-callbacks",
        "capture": "true"
}

/// Takes the secret key and the JSON in string format
public string Compute(string secretKey, string json)
{
    var bytes = Encoding.UTF8.GetBytes(json);
    return this.Compute(secretKey, bytes);
}

/// If your entire request body is passed in as bytes (e.g. POST JSON request), this will give you the correct hash
public string Compute(string secretKey, byte[] bytes)
{
    using (var hmacsha256 = new HMACSHA256(Encoding.UTF8.GetBytes(secretKey)))
    {
        var hash = hmacsha256.ComputeHash(bytes);
        return Convert.ToBase64String(hash);
    }
}

$signature = base64_encode(hash_hmac('sha256', $data, $secret, true));

import crypto from 'crypto'

const data = JSON.stringify(requestBody);
const key = 'your_api_key_here';
const signature = crypto
	.createHmac('sha256', key)
	.update(data)
	.digest('base64');

import hmac
import hashlib
import base64
import json

request_body = {"key": "value"}  # Replace with actual data
data = json.dumps(request_body)
key = 'your_api_key_here'

signature = base64.b64encode(
    hmac.new(key.encode(), data.encode(), hashlib.sha256).digest()
).decode()

print(signature)

package main

import (
    "crypto/hmac"
    "crypto/sha256"
    "encoding/base64"
    "encoding/json"
    "fmt"
)

func main() {
    requestBody := map[string]interface{}{"key": "value"} // Replace with actual data
    data, _ := json.Marshal(requestBody)
    key := "your_api_key_here"

    h := hmac.New(sha256.New, []byte(key))
    h.Write(data)

    signature := base64.StdEncoding.EncodeToString(h.Sum(nil))
}

require 'openssl'
require 'base64'
require 'json'

request_body = { key: 'value' } # Replace with actual data
data = request_body.to_json
key = 'your_api_key_here'

digest = OpenSSL::HMAC.digest('sha256', key, data)
signature = Base64.strict_encode64(digest)

// retrieve server-side computed signature
const signature = await fetch('/calculate-signature')

// format order object
const order = {
  amount: 123.45,
  curency: 'USD',
  shippingAmount: 10,
  taxAmount: 13.45,
  email: '[email protected]',
  firstName: 'John',
  lastName: 'Doe',
  phoneNumber: '+15555555555',
  billingAddress: {
    line1: '123 street',
    address2: '',
    city: 'New York',
    state: 'NY',
    postalCode: '10001',
    country: 'US'
  },
  lineItems: [
    {
      name: 'Item Name',
      description: 'Item description',
      quantity: 1,
      price: 123.45,
      sku: '12345678',
    },
  ]
}

// format Zip checkout request body
const requestBody = {
  merchantId: '[Insert merchant Id]',
  merchantReference: 'merchant-order-id', // Unique order id from Merchant
  order,
  callbackUrl: 'http://merchant-url',
  capture: true,
  checkoutFlow: 'standard'
}

// initiate checkout method
window.quadpay.apiCheckout.openCheckout(requestBody, signature)

// runs when Zip checkout completes
window.quadpay.apiCheckout.onComplete((result) => {
  // your code goes here
})

// runs when Zip checkout popup is closed or session times out
window.quadpay.apiCheckout.onClose((message) => {
  // your code goes here
})

// runs when requestBody validation fails in openCheckout()
window.quadpay.apiCheckout.onError((errors) => {
  // your code goes here
})

window.quadpay.apiCheckout.focusCheckout()

window.quadpay.apiCheckout.closeCheckout()