app-form

formProgress

/src/assets2/scss/codegrid-ui.scss
  • app-item
  • app-form
  1. 1. ログイン方法について
  2. 2. 決済方法選択
  3. 3. 登録完了
<div class="CG2-formProgress">
  <ol>
    <li>1. ログイン方法について</li>
    <li class="CG2-formProgress__item--current">2. 決済方法選択</li>
    <li>3. 登録完了</li>
  </ol>
</div>

signupFrom

/src/assets2/scss/codegrid-ui.scss
  • app-item
  • app-form
購読料は月額800円(税抜)
PayPal払いなら30日間無料

支払い処理中にエラーが発生しました

お手数ですがもう一度手続きをおこなってください。

※CodeGridの購読にはGoogleアカウントが必要です。 Googleアカウント作成

※CodeGridの購読にはGoogleアカウントが必要です。 Googleアカウント作成

再度エラーになる場合は以下よりお問い合わせください。

<div class="CG2-signupFrom">
 
  <div class="CG2-signupFrom__lead">
    購読料は月額800円(税抜)
    <div class="CG2-signupFrom__leadSub">
      PayPal払いなら30日間無料
    </div>
  </div>
 
  <div class="CG2-signupFrom__information">
    <p>支払い処理中にエラーが発生しました</p>
  </div>
 
  <div class="CG2-signupFrom__text">
    <p>お手数ですがもう一度手続きをおこなってください。</p>
  </div>
 
  <div class="CG2-signupFrom__check">
    <label><input type="checkbox">利用規約に同意する</label>
  </div>
 
  <div class="CG2-signupFrom__buttonContainer">
    <ul>
      <li><a class="CG2-button CG2-button--primary" href="#">再度支払い手続きをおこなう</a></li>
    </ul>
    <div class="CG2-signupFrom__buttonContainerText">
      <p>※CodeGridの購読にはGoogleアカウントが必要です。 <a href="#">Googleアカウント作成</a></p>
    </div>
  </div>
 
  <div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">
    <ul>
      <li><a class="CG2-button CG2-button--primary" href="#">PayPalで支払う</a></li>
    </ul>
    <ul>
      <li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1ヶ月分</a></li>
      <li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1年分</a></li>
    </ul>
    <div class="CG2-signupFrom__buttonContainerText">
      <p>※CodeGridの購読にはGoogleアカウントが必要です。 <a href="#">Googleアカウント作成</a></p>
    </div>
  </div>
 
  <div class="CG2-signupFrom__annotation">
    <p>再度エラーになる場合は以下よりお問い合わせください。</p>
  </div>
</div>

paymentTable

/src/assets2/scss/codegrid-ui.scss
  • app-item
  • app-form
  • www-item
PayPal WebMoney
購読料
(税込金額)
  • 月額
    800
    (税込864円)
  • 月払い
    800
    (税込864円)
  • 年払い
    9,600
    (税込10,368円)
購読料 自動継続 随時購入
無料購読期間
  • 無料購読期間 30
  • 無料購読期間 なし
<div class="CG2-paymentTable">
  <table>
    <thead>
      <tr>
        <th></th>
        <th><img src="/build/assets2/img/logos/paypal.svg" alt="PayPal" width="100" height="25"></th>
        <th><img src="/build/assets2/img/logos/webmoney.svg" alt="WebMoney" width="120" height="30"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>購読料<br><span class="CG2-paymentTable__annotation">(税込金額)</span></th>
        <td>
          <div class="CG2-paymentTable__priceList">
            <ul>
              <li>
                <div class="CG2-paymentTable__priceLabel">月額</div>
                <div class="CG2-paymentTable__priceValue">800</div>
                <div class="CG2-paymentTable__priceUnit"></div>
                <div class="CG2-paymentTable__priceAnnotation">(税込864円)</div>
              </li>
            </ul>
          </div>
        </td>
        <td>
          <div class="CG2-paymentTable__priceList">
            <ul>
              <li>
                <div class="CG2-paymentTable__priceLabel">月払い</div>
                <div class="CG2-paymentTable__priceValue">800</div>
                <div class="CG2-paymentTable__priceUnit"></div>
                <div class="CG2-paymentTable__priceAnnotation">(税込864円)</div>
              </li>
              <li>
                <div class="CG2-paymentTable__priceLabel">年払い</div>
                <div class="CG2-paymentTable__priceValue">9,600</div>
                <div class="CG2-paymentTable__priceUnit"></div>
                <div class="CG2-paymentTable__priceAnnotation">(税込10,368円)</div>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <th>購読料</th>
        <td>自動継続</td>
        <td>随時購入</td>
      </tr>
      <tr>
        <th>無料購読期間</th>
        <td>
          <div class="CG2-paymentTable__valueList">
            <ul>
              <li>
                <span class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</span>
                <span class="CG2-paymentTable__value">30</span>
                <span class="CG2-paymentTable__valueUnit"></span>
              </li>
            </ul>
          </div>
        </td>
        <td>
          <div class="CG2-paymentTable__valueList">
            <ul>
              <li>
                <span class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</span>
                <span class="CG2-paymentTable__valueText">なし</span>
              </li>
            </ul>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>