Merchant360 Â· Hosted Fields

Live test-mode demo

The card fields below render in a Merchant360-hosted iframe on a different origin â€” this page never sees the card number. Enter a test card and click Save card to watch it become a reusable card_token. Nothing is charged; this is test mode.

Card details

Test mode

Loading secure fieldsâ€¦

Test card: 4242 4242 4242 4242 Â· any future expiry (e.g. 12 / 30) Â· any ZIP.

The whole integration

<script src="/merchant360.js"></script>
<div id="card"></div>
<button id="save" disabled>Save card</button>

<script>
  var m360   = Merchant360(CLIENT_TOKEN);           // minted server-side
  var fields = m360.hostedFields({ style: { accent: "#2563eb" } });
  fields.mount("#card");
  fields.on("change", function (e) {
    document.getElementById("save").disabled = !e.complete;
  });
  document.getElementById("save").onclick = function () {
    fields.tokenize().then(function (r) {
      // r.card_token â†’ send to YOUR server, charge with your secret key:
      //   POST /api/m360/v1/payments { amount: 2500, card_token: r.card_token }
    });
  };
</script>

The only piece not shown: your server mints CLIENT_TOKEN with POST /api/m360/v1/hosted/sessions using your secret key. Full reference at the API docs.