Integration Guide: Customer
Using KOMOJU Fields to collect tokens for long-term use
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 and currency is optional for customer sessions.
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:
- Your session ID from step 1, and
- 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:
- Place your
<komoju-fields>
inside of a<form>
element, and submit the<form>
like normal, OR - 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.
Updated 7 months ago