Retrieves the available payment methods for the checkout process. When the checkout option is enabled, it reads checkout session data to provide region-aware payment methods. Returns each payment method with its details and a total count of available methods.

Component Options

Option Type Default Description
checkout bool|null null When truthy, loads checkout session data to provide context-aware payment methods (e.g. region-specific pricing).

Component Properties

Property Type Description
payment array Array of available payment methods, keyed by method name.
payment.{name}.name string Internal payment method identifier.
payment.{name}.title string Display title for the payment method.
payment.{name}.description string Description of the payment method.
payment.{name}.cost float Additional cost for using this payment method.
payment.{name}.tax int Tax flag for this payment method.
payment.{name}.region_id int Region ID this payment method applies to.
payment.{name}.render string HTML snippet to render the payment form (e.g. Stripe element markup).
count int Total number of available payment methods.

HTML Example

<div data-v-component-checkout-payment>
  <div data-v-payment>
    <input type="radio" name="payment" data-v-payment-name value="" />
    <label data-v-payment-title></label>
    <p data-v-payment-description></p>
    <span data-v-payment-cost></span>
  </div>
</div>

Template Example

<div data-v-component-checkout-payment>
  <template data-v-template="payment-method">
    <div class="payment-option">
      <input type="radio" name="payment_method" data-v-payment-name />
      <label data-v-payment-title></label>
      <p data-v-payment-description></p>
      <span data-v-if="payment.cost">Fee: <span data-v-payment-cost></span></span>
      <div data-v-payment-render></div>
    </div>
  </template>
</div>