This guide shows how to use KOMOJU Fields to collect payment tokens for long term storage and repeated use. An example use case for this API might be to create your own subscription or bill-as-you-go system.

The process here is nearly identical to the standard integration guide. The only difference is that you create a session with mode=customer instead of the default payment mode (much like the Hosted Page customer mode).

Step 1: create a customer session on backend

Before you can show fields, you must create a session from your server. Unlike payment sessions, amount is optional for customer sessions.

The response should contain a customer_id field. This value can be used to create payments later.

Supported payment types

Hosted Fields can only support customer mode sessions with credit_card.

If you'd like to use paypay, you must follow the Hosted Page customer mode guide.

Step 2: use session ID to render fields on frontend

This step is no different from payment mode.

You'll need 2 pieces of information:

1. Your session ID from step 1, and
2. Your publishable key from the KOMOJU merchant settings page.

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

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

Step 3: decide how you want users to submit

This step is also the same as payment mode. There are 2 ways to submit the fields:

1. Place your <komoju-fields> inside of a <form> element, and submit the <form> like normal, OR
2. Use JS to call submit() on your <komoju-fields> component: document.querySelector('komoju-fields').submit().

It's important to note that in case 1, your form tag does not actually get submitted. KOMOJU Fields cancels the form's submit event, and directly POSTs the customer's payment details to KOMOJU.

On payment success, the customer will be redirected to your session's redirect_url regardless of whether you submit via form or via submit().

If you want to avoid the redirect entirely, see Integration Guide: Token.

Step 4: create payments using customer ID

Once the user submits and your customer object's payment details are populated, you can start using it to create payments.