KOMOJU Hosted Fields is a front-end library for securely collecting payment information on your website.

All input fields are rendered in a secure iframe hosted by us to minimize your PCI-DSS burden.

Fields uses modern web features to provide easy-to-use components that work well with frameworks like React, VueJS, or even vanilla HTML.

Code Example

💴

Create payment session (minimal)

Open Recipe

<script type="module" src="https://multipay.komoju.com/fields.js"></script>

<form>
  <!-- optional payment method picker -->
  <komoju-picker></komoju-picker>

  <komoju-fields
  	session-id={your_session_id}
    publishable-key={your_publishable_key}
  ></komoju-fields>

  <button type="submit">Pay</button>
</form>

Live Demo

Full list of attributes

Here are the attributes accepted by the <komoju-fields> tag:

`session-id` (required)

This session tells Fields which payment methods to render, and ensures payment amount cannot be changed on the front-end.

<!-- Create a session on your back-end and pass it to komoju-fields. -->
<komoju-fields
  session-id="abc123xyz"
  publishable-key="YOUR_PUBLISHABLE_KEY"
></komoju-fields>

`publishable-key` (required)

Your publishable key is required in order for Fields to access the KOMOJU API.

Everything KOMOJU Fields does under the hood can be done via our regular JSON API.

<!-- Your publishable key is required in order for Fields to access the KOMOJU API. -->
<komoju-fields
  session-id="{...}"
  publishable-key="pk_live_abc123"
></komoju-fields>

`session`

Avoid a round-trip by passing the entire KOMOJU Session JSON.

<!-- If you specify session, session-id is no longer requried. -->
<komoju-fields
  session="{...}"
  publishable-key="YOUR_PUBLISHABLE_KEY"
></komoju-fields>

`payment-type`

This is only useful if you're creating sessions that support multiple payment types. Your options are:

use <komoju-picker>,
create a session with only one payment type, or
use the payment-type attribute manually like below.

<!-- Pre-select payment type. -->
<komoju-fields
  payment-type="konbini"
  session-id="SESSION_ID_FROM_KOMOJU_API"
  publishable-key="YOUR_PUBLISHABLE_KEY"
></komoju-fields>

<!-- You can change this payment-type attribute during runtime too. -->
<!-- This can be used to make your own payment method picker. -->
<script>
  const fields = document.querySelector('komoju-fields');
  fields.paymentType = 'credit_card';
  
  // You can also access the session object to see which payment types are available.
  console.log(fields.session.payment_methods);
</script>

`theme`

Hosted Fields supports loading custom CSS to better fit the look and feel of your website.

See Styling Hosted Fields for more detail.

<!-- Set custom CSS -->
<komoju-fields
  session-id="abc123xyz"
  publishable-key="YOUR_PUBLISHABLE_KEY"
  theme="https://example.com/my-fields-theme.css"
></komoju-fields>

`token` and `name`

These attributes allow your <komoju-fields> to act like an <input> tag whose value is a Token ID of the user's input.

See Integration Guide: Token for more detail.

<!-- 'token' is a boolean attribute that activates token mode -->
<komoju-fields
  token name="komoju_token"
  session="{...}"
  publishable-key="YOUR_PUBLISHABLE_KEY"
></komoju-fields>

<!-- You can either submit the form normally, or obtain the token via JS: -->
<script>
  (async () => {
    const fields = document.querySelector('komoju-fields');
    const token = await fields.submit();
    console.log(token);
  })()
</script>

Code Example

Live Demo

Full list of attributes

session-id (required)

publishable-key (required)

session

payment-type