discourse-subscriptions/assets/javascripts/discourse/templates/subscribe/show.hbs

<div class="discourse-subscriptions-section-columns">
  <div class="section-column discourse-subscriptions-confirmation-billing">
    <h2>
      {{model.product.name}}
    </h2>

    <hr />

    <p>
      {{html-safe model.product.description}}
    </p>
  </div>

  <div class="section-column">
    {{#if canPurchase}}
      <h2>
        {{i18n "discourse_subscriptions.subscribe.card.title"}}
      </h2>

      <hr />

      <PaymentOptions @plans={{model.plans}} @selectedPlan={{selectedPlan}} />

      <hr />

      <SubscribeCard @cardElement={{cardElement}} />

      {{#if loading}}
        {{loading-spinner}}
      {{else if isAnonymous}}
        <LoginRequired />
      {{else}}
        <Input
          @type="text"
          name="cardholder_name"
          placeholder={{i18n
            "discourse_subscriptions.subscribe.cardholder_name"
          }}
          @value={{cardholderName}}
          class="subscribe-name"
        />
        <div class="address-fields">
          <SubscribeCountrySelect
            @value={{cardholderAddress.country}}
            @onChange={{action "changeCountry"}}
          />
          <Input
            @type="text"
            name="cardholder_postal_code"
            placeholder={{i18n
              "discourse_subscriptions.subscribe.cardholder_address.postal_code"
            }}
            @value={{cardholderAddress.postalCode}}
            class="subscribe-address-postal-code"
          />
        </div>
        <Input
          @type="text"
          name="cardholder_line1"
          placeholder={{i18n
            "discourse_subscriptions.subscribe.cardholder_address.line1"
          }}
          @value={{cardholderAddress.line1}}
          class="subscribe-address-line1"
        />
        <div class="address-fields">
          <Input
            @type="text"
            name="cardholder_city"
            placeholder={{i18n
              "discourse_subscriptions.subscribe.cardholder_address.city"
            }}
            @value={{cardholderAddress.city}}
            class="subscribe-address-city"
          />
          {{#if isCountryUS}}
            <SubscribeUsStateSelect
              @value={{cardholderAddress.state}}
              @onChange={{action "changeState"}}
            />
          {{else if isCountryCA}}
            <SubscribeCaProvinceSelect
              @value={{cardholderAddress.state}}
              @onChange={{action "changeState"}}
            />
          {{else}}
            <Input
              @type="text"
              name="cardholder_state"
              placeholder={{i18n
                "discourse_subscriptions.subscribe.cardholder_address.state"
              }}
              @value={{cardholderAddress.state}}
              class="subscribe-address-state"
            />
          {{/if}}
        </div>

        <Input
          @type="text"
          name="promo_code"
          placeholder={{i18n "discourse_subscriptions.subscribe.promo_code"}}
          @value={{promoCode}}
          class="subscribe-promo-code"
        />

        <DButton
          @disabled={{loading}}
          @action={{action "stripePaymentHandler"}}
          class="btn btn-primary btn-payment"
          @label="discourse_subscriptions.plans.payment_button"
        />
      {{/if}}
    {{else}}
      <h2>{{i18n "discourse_subscriptions.subscribe.already_purchased"}}</h2>

      <LinkTo
        @route="user.billing.subscriptions"
        @model={{currentUser.username}}
        class="btn btn-primary"
      >
        {{i18n "discourse_subscriptions.subscribe.go_to_billing"}}
      </LinkTo>
    {{/if}}
  </div>
</div>