Inline checkout set-up

To be able to use this service, you need to create your own payment form first.
Once you created an “App token ID”, please save it and paste it in the sample code below.

Sample code

<script src="https://widget.univapay.com/client/checkout.js"></script>
<form id="payment-form" action="/paid">
    <div id="checkout">
        <span
            data-app-id="{アプリトークンID}"
            data-checkout="payment"
            data-amount="1000"
            data-currency="jpy"
            data-inline="true"
        ></span>
    </div>

    <button type="submit">Pay</button>
</form>
<script>
    (function () {
        var form = document.getElementById("payment-form");

        function getPaymentInfo() {
            event.preventDefault();

            var iFrame = document.querySelector("#checkout iframe");
            UnivapayCheckout.submit(iFrame)
                .then((data) => {
                    console.log(data);
                    // The `univapayTokenId` hidden input
                    // has been added with the token id
                    form.submit();
                })
                .catch((errors) => {
                    console.error(errors);
                });
        }

        form.addEventListener("submit", getPaymentInfo);
    })();
</script>

Amount and currency

You can change the checkout type, the amount and currency by editing the parameters below.
data-checkout and data-token-type are the same as in Widget: HTML.
However, qr cannot be used with inline forms.

            data-checkout="payment"
            data-amount="1000"
            data-currency="jpy"

Button design

You can change the design of the button by applying your own CSS classes.

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

Transactions results

The id of the transaction will be added to the form when submitting. The name of the field is univapayTokenId by default.

Webhooks

The result of the transaction will be POSTed as JSON data to the URL specified in the “Webhook” section of the administration console.

Please see “Reference > Webhooks” and create a script to retrieve the POSTed data to update the order status etc.

Style parameters

Parameters
data-inline-item-stylestring
Style for each field container. The container is the element that contains the error messages, label and input.
Required: No
Allowed values: css styles
data-inline-item-label-stylestring
Style for the field label.
Required: No
Allowed values: css styles
data-inline-item-error-stylestring
Style for the error message container, including all the error messages.
Required: No
Allowed values: css styles
data-inline-field-stylestring
Style for the field input.
Required: No
Allowed values: css styles
data-inline-field-invalid-stylestring
Style for the field input when invalid.
Required: No
Allowed values: css styles
data-inline-field-focus-stylestring
Style for the field input when focused.
Required: No
Allowed values: css styles