Tokenization

Get your tokenization key

In the Strictly dashboard, go to Administration → Security Keys and copy the value under Tokenization Source. This key is safe to expose in client-side code.

Create placeholder containers

ZeroGateway.js injects hosted iframes into your page. Add empty div elements where you want the fields to appear:

index.html
<form id="payment-form">
  <div id="ccnumber"></div>   <!-- Card number -->
  <div id="ccexp"></div>      <!-- Expiration date -->
  <div id="cvv"></div>        <!-- CVV -->
  <button type="submit">Pay</button>
</form>

Load the script

Load ZeroGateway.js with your tokenization key as a query parameter:

Code
<script src="https://secure.safewebservices.com/token/Collect.js"
        data-tokenization-key="YOUR_TOKENIZATION_KEY">
</script>

Replace YOUR_TOKENIZATION_KEY with the key from Administration → Security Keys.

Initialize ZeroGateway.js

Call CollectJS.configure to map your placeholder divs to payment fields and set up the token callback:

payment.js
CollectJS.configure({
  fields: {
    ccnumber: { selector: "#ccnumber", placeholder: "Card number" },
    ccexp:    { selector: "#ccexp",    placeholder: "MM / YY" },
    cvv:      { selector: "#cvv",      placeholder: "CVV" },
  },
  callback: function (response) {
    // response.token is your single-use paymentToken;
    // response.card.number is masked, response.card.exp is MMYY
    sendTokenToServer(response.token, response.card);
  },
});

document.getElementById("payment-form").addEventListener("submit", function (e) {
  e.preventDefault();
  CollectJS.startPaymentRequest();
});

The callback receives:

callback response
{
  "tokenType": "...",
  "token": "PAYMENT_TOKEN",
  "initiatedBy": "...",
  "card": {
    "number": "411111******1111",
    "exp": "1026",
    "hash": "..."
  },
  "check": { "...": "..." }
}

There is no bin field — derive the BIN from the first 6 digits of card.number when you need it for surcharge rates.

Send the token to your server

Pass the token and the masked card from the callback to your backend. Your server then uses them to make the charge request (card.number is required alongside card.paymentToken):

payment.js — send to your backend
async function sendTokenToServer(paymentToken, card) {
  const response = await fetch("/api/charge", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ paymentToken, cardNumber: card.number }),
  });

  const result = await response.json();

  if (result.success) {
    // Show confirmation
  } else {
    // Show error to customer
  }
}

Charge from your server

Your server receives the token and makes the charge request to the Strictly API. The raw token never hits the browser again. The example below uses Java, but this works the same in any server-side language:

ChargeController.java — Spring Boot
@RestController
@RequestMapping("/api")
public class ChargeController {

    private static final String BASE_URL = "https://api.paywithzero.net/v1/public/payment/charge";

    @PostMapping("/charge")
    public ResponseEntity<Map<String, Object>> charge(@RequestBody ChargeRequest req) throws Exception {
        String credentials = Base64.getEncoder().encodeToString(
            (System.getenv("STRICTLY_EMAIL") + ":" + System.getenv("STRICTLY_PASSWORD")).getBytes()
        );

        Map<String, Object> body = Map.of(
            "amount", 1000,
            "card", Map.of(
                "paymentToken", req.getPaymentToken(),
                "number", req.getCardNumber()   // masked number from the callback
            ),
            "contact", Map.of("email", "[email protected]"),
            "billingAddress", Map.of(
                "address", "123 Main St",
                "city", "San Jose",
                "state", "CA",
                "zipCode", "95101",
                "country", "US"
            ),
            "order", Map.of("amount", 1000, "shipping", 0, "tax", 0, "discount", 0),
            "capture", true
        );

        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create(BASE_URL))
            .header("Authorization", "Basic " + credentials)
            .header("key-hash", System.getenv("STRICTLY_KEY_HASH"))
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(new ObjectMapper().writeValueAsString(body)))
            .build();

        HttpResponse<String> response = HttpClient.newHttpClient()
            .send(request, HttpResponse.BodyHandlers.ofString());

        Map<String, Object> result = Map.of(
            "success", response.statusCode() == 201,
            "data", new ObjectMapper().readValue(response.body(), Map.class)
        );

        return ResponseEntity.ok(result);
    }
}