Tokenization

Get your tokenization key

In the Strictly dashboard, go to Merchant Settings → 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 Merchant Settings.

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
    sendTokenToServer(response.token);
  },
});

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

Send the token to your server

Pass the token from the callback to your backend. Your server then uses it to make the charge request:

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

  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()),
            "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() == 200,
            "data", new ObjectMapper().readValue(response.body(), Map.class)
        );

        return ResponseEntity.ok(result);
    }
}