質問編集履歴

6

修正

2020/10/01 08:53

投稿

kojiro23
kojiro23

スコア0

test CHANGED
File without changes
test CHANGED
@@ -24,536 +24,150 @@
24
24
 
25
25
 
26
26
 
27
+
28
+
29
+ purchases_controller.rb
30
+
31
+ ```ruby
32
+
33
+ class PurchasesController < ApplicationController
34
+
35
+
36
+
37
+ def index
38
+
39
+ @item = Item.find(params[:item_id])
40
+
41
+ @user_purchase = UserPurchase.new
42
+
43
+ end
44
+
45
+
46
+
47
+ def new
48
+
49
+ @user_purchase = UserPurchase.new
50
+
51
+ end
52
+
53
+
54
+
55
+ def create
56
+
57
+ @user_purchase = UserPurchase.new(purchase_params)
58
+
59
+ @item = Item.find(params[:item_id])
60
+
61
+ if @user_purchase.valid?
62
+
63
+ pay_item
64
+
65
+ @user_purchase.save
66
+
67
+ return redirect_to root_path
68
+
27
- 購入画面
69
+ else
70
+
71
+ render :index
72
+
73
+ end
74
+
75
+ end
76
+
77
+
78
+
79
+ private
80
+
81
+
82
+
83
+ #def purchase_params
84
+
85
+ #params.permit(:postcode, :area_id, :city, :road, :building, :phone, :token).merge( user_id: current_user.id)
86
+
87
+ #end
88
+
89
+
90
+
91
+ def purchase_params
92
+
93
+ params.require(:user_purchase).permit(:postcode, :area_id, :city, :road, :building, :phone).merge( user_id:      current_user.id, token: params[:token], item_id: params[:item_id] )
94
+
95
+ end
96
+
97
+
98
+
99
+ def pay_item
100
+
101
+
102
+
103
+ Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
104
+
105
+ Payjp::Charge.create(
106
+
107
+ amount: @item.price,
108
+
109
+ card: purchase_params[:token],
110
+
111
+ currency:'jpy'
112
+
113
+ )
114
+
115
+ end
116
+
117
+
118
+
119
+ end
28
120
 
29
121
  ```
30
122
 
31
- <%= render "shared/second-header"%>
32
-
33
-
34
-
35
- <div class='transaction-contents'>
36
-
37
- <div class='transaction-main'>
38
-
39
- <h1 class='transaction-title-text'>
40
-
41
- 購入内容の確認
42
-
43
- </h1>
44
-
45
- <%# 購入内容の表示 %>
46
-
47
- <div class='buy-item-info'>
48
-
49
- <%= image_tag @item.image, class: 'buy-item-img' %>
50
-
51
- <div class='buy-item-right-content'>
52
-
53
- <h2 class='buy-item-text'>
54
-
55
- <%= @item.text %>
56
-
57
- </h2>
58
-
59
- <div class='buy-item-price'>
60
-
61
- <p class='item-price-text'>¥<%= @item.price %></p>
62
-
63
- <% if @item.delivery_fee.id == 1%>
64
-
65
- <p class='item-price-sub-text'>(税込)着払い</p>
66
-
67
- <% else %>
68
-
69
- <p class='item-price-sub-text'>(税込)送料込み</p>
70
-
71
- <% end %>
72
-
73
- </div>
74
-
75
- </div>
76
-
77
- </div>
78
-
79
- <%# /購入内容の表示 %>
80
-
81
-
82
-
83
- <%# 支払額の表示 %>
84
-
85
- <div class='item-payment'>
86
-
87
- <h1 class='item-payment-title'>
88
-
89
- 支払金額
90
-
91
- </h1>
92
-
93
- <p class='item-payment-price'>
94
-
95
- ¥<%= @item.price %>
96
-
97
- </p>
98
-
99
- </div>
100
-
101
- <%# /支払額の表示 %>
102
-
103
- <%= form_with model: @user_purchase, url: item_purchases_path, id: 'charge-form', local: true do |f| %>
104
-
105
- <%= render 'shared/error_messages', model: f.object %>
106
-
107
- <%# カード情報の入力 %>
108
-
109
- <div class='credit-card-form'>
110
-
111
- <h1 class='info-input-haedline'>
112
-
113
- クレジットカード情報入力
114
-
115
- </h1>
116
-
117
- <div class="form-group">
118
-
119
- <div class='form-text-wrap'>
120
-
121
- <label class="form-text">カード情報</label>
122
-
123
- <span class="indispensable">必須</span>
124
-
125
- </div>
126
-
127
- <%= f.text_field :number, class:"input-default", id:"card-number", placeholder:"カード番号(半角英数字)", maxlength:"16", name:"number" %>
128
-
129
- <div class='available-card'>
130
-
131
- <%= image_tag 'card-visa.gif', class: 'card-logo'%>
132
-
133
- <%= image_tag 'card-mastercard.gif', class: 'card-logo'%>
134
-
135
- <%= image_tag 'card-jcb.gif', class: 'card-logo'%>
136
-
137
- <%= image_tag 'card-amex.gif', class: 'card-logo'%>
138
-
139
- </div>
140
-
141
- </div>
142
-
143
- <div class="form-group">
144
-
145
- <div class='form-text-wrap'>
146
-
147
- <label class="form-text">有効期限</label>
148
-
149
- <span class="indispensable">必須</span>
150
-
151
- </div>
152
-
153
- <div class='input-expiration-date-wrap'>
154
-
155
- <%= f.text_area :exe_month, class:"input-expiration-date", id:"card-exp-month", placeholder:"例)3", name:"exp_month" %>
156
-
157
- <p>月</p>
158
-
159
- <%= f.text_area :exe_year, class:"input-expiration-date", id:"card-exp-year", placeholder:"例)23", name:"exp_year" %>
160
-
161
- <p>年</p>
162
-
163
- </div>
164
-
165
- </div>
166
-
167
- <div class="form-group">
168
-
169
- <div class='form-text-wrap'>
170
-
171
- <label class="form-text">セキュリティコード</label>
172
-
173
- <span class="indispensable">必須</span>
174
-
175
- </div>
176
-
177
- <%= f.text_field :cvc,class:"input-default", id:"card-cvc", placeholder:"カード背面4桁もしくは3桁の番号", maxlength:"4", name:"cvc" %>
178
-
179
- </div>
180
-
181
- </div>
182
-
183
- <%# /カード情報の入力 %>
184
-
185
-
186
-
187
- <%# 配送先の入力 %>
188
-
189
- <div class='shipping-address-form'>
190
-
191
- <h1 class='info-input-haedline'>
192
-
193
- 配送先入力
194
-
195
- </h1>
196
-
197
- <div class="form-group">
198
-
199
- <div class='form-text-wrap'>
200
-
201
- <label class="form-text">郵便番号</label>
202
-
203
- <span class="indispensable">必須</span>
204
-
205
- </div>
206
-
207
- <%= f.text_field :postcode, class:"input-default", id:"postal-code", placeholder:"例)123-4567", maxlength:"8" %>
208
-
209
- </div>
210
-
211
- <div class="form-group">
212
-
213
- <div class='form-text-wrap'>
214
-
215
- <label class="form-text">都道府県</label>
216
-
217
- <span class="indispensable">必須</span>
218
-
219
- </div>
220
-
221
- <%= f.collection_select(:area_id, Area.all, :id, :name, {}, {class:"select-box", id:"prefecture"}) %>
222
-
223
- </div>
224
-
225
- <div class="form-group">
226
-
227
- <div class='form-text-wrap'>
228
-
229
- <label class="form-text">市区町村</label>
230
-
231
- <span class="indispensable">必須</span>
232
-
233
- </div>
234
-
235
- <%= f.text_field :city, class:"input-default", id:"city", placeholder:"例)横浜市緑区"%>
236
-
237
- </div>
238
-
239
- <div class="form-group">
240
-
241
- <div class='form-text-wrap'>
242
-
243
- <label class="form-text">番地</label>
244
-
245
- <span class="indispensable">必須</span>
246
-
247
- </div>
248
-
249
- <%= f.text_field :road, class:"input-default", id:"addresses", placeholder:"例)青山1-1-1"%>
250
-
251
- </div>
252
-
253
- <div class="form-group">
254
-
255
- <div class='form-text-wrap'>
256
-
257
- <label class="form-text">建物名</label>
258
-
259
- <span class="form-any">任意</span>
260
-
261
- </div>
262
-
263
- <%= f.text_field :building, class:"input-default", id:"building", placeholder:"例)柳ビル103"%>
264
-
265
- </div>
266
-
267
- <div class="form-group">
268
-
269
- <div class='form-text-wrap'>
270
-
271
- <label class="form-text">電話番号</label>
272
-
273
- <span class="indispensable">必須</span>
274
-
275
- </div>
276
-
277
- <%= f.text_field :phone, class:"input-default", id:"phone-number", placeholder:"例)09012345678",maxlength:"11"%>
278
-
279
- </div>
280
-
281
- </div>
282
-
283
- <%# /配送先の入力 %>
284
-
285
- <div class='buy-btn'>
286
-
287
- <%= f.submit "購入" ,class:"buy-red-btn" %>
288
-
289
- </div>
290
-
291
- <% end %>
292
-
293
- </div>
294
-
295
- </div>
296
-
297
- <%= render "shared/second-footer"%>
123
+ user_purchase.rb
124
+
125
+ ```ruby
126
+
127
+ class UserPurchase
128
+
129
+
130
+
131
+ include ActiveModel::Model
132
+
133
+ attr_accessor :postcode, :area_id, :city, :road, :building, :phone, :token, :user_id, :item_id, :token
134
+
135
+
136
+
137
+ validates :city, :road, presence: true
138
+
139
+ validates :token, presence: true
140
+
141
+
142
+
143
+ with_options presence: true do
144
+
145
+ validates :area_id, numericality: { other_than: 0, message: 'Select' }
146
+
147
+ validates :phone, format: { with: /\A0[0-9]+\z/, message: 'number is invalid. Include half-width numbers' }
148
+
149
+ validates :postcode, format: { with: /\A\d{3}[-]\d{4}\z/, message: 'is invalid. Include hyphen(-)' }
150
+
151
+ end
152
+
153
+
154
+
155
+ def save
156
+
157
+ Purchase.create(user_id: user_id, item_id: item_id)
158
+
159
+ Address.create(postcode: postcode, area_id: area_id, city: city, road: road, building: building, phone: phone, purchase_id: purchase.id)
160
+
161
+ end
162
+
163
+
164
+
165
+ end
298
166
 
299
167
  ```
300
168
 
301
169
 
302
170
 
303
- purchases_controller.rb
304
-
305
- ```ruby
306
-
307
- class PurchasesController < ApplicationController
308
-
309
-
310
-
311
- def index
312
-
313
- @item = Item.find(params[:item_id])
314
-
315
- @user_purchase = UserPurchase.new
316
-
317
- end
318
-
319
-
320
-
321
- def new
322
-
323
- @user_purchase = UserPurchase.new
324
-
325
- end
326
-
327
-
328
-
329
- def create
330
-
331
- @user_purchase = UserPurchase.new(purchase_params)
332
-
333
- @item = Item.find(params[:item_id])
334
-
335
- if @user_purchase.valid?
336
-
337
- pay_item
338
-
339
- @user_purchase.save
340
-
341
- return redirect_to root_path
342
-
343
- else
344
-
345
- render :index
346
-
347
- end
348
-
349
- end
350
-
351
-
352
-
353
- private
354
-
355
-
356
-
357
- #def purchase_params
358
-
359
- #params.permit(:postcode, :area_id, :city, :road, :building, :phone, :token).merge( user_id: current_user.id)
360
-
361
- #end
362
-
363
-
364
-
365
- def purchase_params
366
-
367
- params.require(:user_purchase).permit(:postcode, :area_id, :city, :road, :building, :phone).merge( user_id:      current_user.id, token: params[:token] )
368
-
369
- end
370
-
371
-
372
-
373
- def pay_item
374
-
375
- Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
376
-
377
- Payjp::Charge.create(
378
-
379
- amount: @item.price,
380
-
381
- card: purchase_params[:token],
382
-
383
- currency:'jpy'
384
-
385
- )
386
-
387
- end
388
-
389
-
390
-
391
- end
392
-
393
- ```
394
-
395
- user_purchase.rb
396
-
397
- ```ruby
398
-
399
- class UserPurchase
400
-
401
-
402
-
403
- include ActiveModel::Model
404
-
405
- attr_accessor :postcode, :area_id, :city, :road, :building, :phone, :token, :user_id, :item_id, :token
406
-
407
-
408
-
409
- validates :city, :road, presence: true
410
-
411
- validates :token, presence: true
412
-
413
-
414
-
415
- with_options presence: true do
416
-
417
- validates :area_id, numericality: { other_than: 0, message: 'Select' }
418
-
419
- validates :phone, format: { with: /\A0[0-9]+\z/, message: 'number is invalid. Include half-width numbers' }
420
-
421
- validates :postcode, format: { with: /\A\d{3}[-]\d{4}\z/, message: 'is invalid. Include hyphen(-)' }
422
-
423
- end
424
-
425
-
426
-
427
- def save
428
-
429
- Address.create(postcode: postcode, area_id: area_id, city: city, road: road, building: building, phone: phone)
430
-
431
- Purchase.create(user_id: user_id, item_id: item_id)
432
-
433
- end
434
-
435
-
436
-
437
- end
438
-
439
- ```
440
-
441
- card.js
442
-
443
- ```javascript
444
-
445
- const pay = () => {
446
-
447
- Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY);
448
-
449
- const form = document.getElementById("charge-form");
450
-
451
- form.addEventListener("submit", (e) => {
452
-
453
- e.preventDefault();
454
-
455
-
456
-
457
- const formResult = document.getElementById("charge-form");
458
-
459
- const formData = new FormData(formResult);
460
-
461
-
462
-
463
- const card = {
464
-
465
- number: formData.get("number"),
466
-
467
- cvc: formData.get("cvc"),
468
-
469
- exp_month: formData.get("exp_month"),
470
-
471
- exp_year: `20${formData.get("exp_year")}`,
472
-
473
- };
474
-
475
-
476
-
477
- Payjp.createToken(card, (status, response) => {
478
-
479
- if (status == 200) {
480
-
481
- const token = response.id;
482
-
483
- const renderDom = document.getElementById("charge-form");
484
-
485
- const tokenobj = `<input value=${token} name='token' type="hidden">`;
486
-
487
- renderDom.insertAdjacentHTML("beforeend", tokenobj);
488
-
489
- }
490
-
491
-
492
-
493
- document.getElementById("card-number").removeAttribute("name");
494
-
495
- document.getElementById("card-cvc").removeAttribute("name");
496
-
497
- document.getElementById("card-exp-month").removeAttribute("name");
498
-
499
- document.getElementById("card-exp-year").removeAttribute("name");
500
-
501
-
502
-
503
- document.getElementById("charge-form").submit();
504
-
505
- });
506
-
507
- });
508
-
509
- };
510
-
511
-
512
-
513
- window.addEventListener("load", pay);
514
-
515
- ```
516
-
517
- purchase.rb
518
-
519
- ```ruby
520
-
521
- class Purchase < ApplicationRecord
522
-
523
- attr_accessor :token
524
-
525
- has_one :address
526
-
527
- belongs_to :item
528
-
529
- belongs_to :user
530
-
531
- end
532
-
533
-
534
-
535
- ```
536
-
537
- address.rb
538
-
539
- ```ruby
540
-
541
- class Address < ApplicationRecord
542
-
543
- extend ActiveHash::Associations::ActiveRecordExtensions
544
-
545
- belongs_to_active_hash :area
546
-
547
-
548
-
549
- belongs_to :purchase
550
-
551
- end
552
-
553
-
554
-
555
- ```
556
-
557
171
 
558
172
 
559
173
  ### 試したこと

5

修正

2020/10/01 08:53

投稿

kojiro23
kojiro23

スコア0

test CHANGED
File without changes
test CHANGED
@@ -100,12 +100,6 @@
100
100
 
101
101
  <%# /支払額の表示 %>
102
102
 
103
- <%=# form_with model: @user_purchase, url: item_purchases_path, id: 'charge-form', local: true do |f| %>
104
-
105
- <%# <%= render 'shared/error_messages', model: @user_purchase %>
106
-
107
- <%=# 下記のように変更 %>
108
-
109
103
  <%= form_with model: @user_purchase, url: item_purchases_path, id: 'charge-form', local: true do |f| %>
110
104
 
111
105
  <%= render 'shared/error_messages', model: f.object %>
@@ -318,8 +312,6 @@
318
312
 
319
313
  @item = Item.find(params[:item_id])
320
314
 
321
- <#% 追記 %>
322
-
323
315
  @user_purchase = UserPurchase.new
324
316
 
325
317
  end
@@ -362,9 +354,17 @@
362
354
 
363
355
 
364
356
 
357
+ #def purchase_params
358
+
359
+ #params.permit(:postcode, :area_id, :city, :road, :building, :phone, :token).merge( user_id: current_user.id)
360
+
361
+ #end
362
+
363
+
364
+
365
- def purchase_params
365
+ def purchase_params
366
-
366
+
367
- params.permit(:postcode, :area_id, :city, :road, :building, :phone, :token).merge( user_id: current_user.id)
367
+ params.require(:user_purchase).permit(:postcode, :area_id, :city, :road, :building, :phone).merge( user_id:      current_user.id, token: params[:token] )
368
368
 
369
369
  end
370
370
 
@@ -572,79 +572,33 @@
572
572
 
573
573
  追記
574
574
 
575
- user_purchase.rbの
575
+
576
-
577
-
578
-
576
+
579
- ```ruby
577
+ 修正内容
580
-
581
- def save
578
+
582
-
583
- Address.create(postcode: postcode, area_id: area_id, city: city, road: road, building: building, phone: phone)
579
+ エラーメッセージはそのまま部分テンプレートを用いて表示することができました。
584
-
580
+
585
- Purchase.create(user_id: user_id, item_id: item_id)
581
+ コントローラーを修正するとフォームに入力した値の取得にも成功しました。(コードに修正箇所のせてます)
586
-
587
- end
582
+
588
-
589
- ```
583
+
590
-
591
- を下記に変更
584
+
592
-
593
- ```ruby
594
-
595
- def save
596
-
597
- address = Address.create(postcode: postcode, area_id: area_id, city: city, road: road, building: building, phone: phone)
598
-
599
- end
600
-
601
- ```
602
-
603
-
604
-
605
- purchases_controller.rbの
606
-
607
-
608
-
609
- ```ruby
610
-
611
- def purchase_params
612
-
613
- params.permit(:postcode, :area_id, :city, :road, :building, :phone, :token).merge( user_id: current_user.id)
614
-
615
- end
616
-
617
- ```
618
-
619
-
620
-
621
- を下記に変更
622
-
623
-
624
-
625
- ```ruby
626
-
627
- def purchase_params
628
-
629
- params.permit(:postcode, :area_id, :city, :road, :building, :phone, :token).merge( user_id: current_user.id, token: params[:token])
630
-
631
- end
632
-
633
- ```
634
-
635
-
636
-
637
- したところ以下のデータを取得できました。
638
-
639
-
640
-
641
- ![ターミナル](8c1cc49c537a05e30f9fa768a367d580.png)
585
+ 現在の状況ですが、フォームを入力して購入ボンを押してもエラメッセージは表示されません。
642
-
643
-
644
-
586
+
645
- あと一歩のところっています。
587
+ すがテーブルに値を保存できずindexへ遷移されます。
588
+
589
+
590
+
646
-
591
+ また別テーブルのitem情報を取得したいのですが、うまくいっておりません。
592
+
593
+ 私が考えているのがuser_purchase.rb内のsaveメソッド内に記述すれば取得できるのではと考えているのですが、うまくいっておりません。
594
+
595
+
596
+
647
- よろしくお願いたします。
597
+ 現在方法を調べてる段階です。
598
+
599
+ 何かいい方法はありますでしょうか?
600
+
601
+
648
602
 
649
603
 
650
604
 

4

修正

2020/10/01 08:14

投稿

kojiro23
kojiro23

スコア0

test CHANGED
File without changes
test CHANGED
@@ -100,10 +100,16 @@
100
100
 
101
101
  <%# /支払額の表示 %>
102
102
 
103
- <%= form_with model: @user_purchase, url: item_purchases_path, id: 'charge-form', local: true do |f| %>
103
+ <%=# form_with model: @user_purchase, url: item_purchases_path, id: 'charge-form', local: true do |f| %>
104
104
 
105
105
  <%# <%= render 'shared/error_messages', model: @user_purchase %>
106
106
 
107
+ <%=# 下記のように変更 %>
108
+
109
+ <%= form_with model: @user_purchase, url: item_purchases_path, id: 'charge-form', local: true do |f| %>
110
+
111
+ <%= render 'shared/error_messages', model: f.object %>
112
+
107
113
  <%# カード情報の入力 %>
108
114
 
109
115
  <div class='credit-card-form'>
@@ -312,6 +318,10 @@
312
318
 
313
319
  @item = Item.find(params[:item_id])
314
320
 
321
+ <#% 追記 %>
322
+
323
+ @user_purchase = UserPurchase.new
324
+
315
325
  end
316
326
 
317
327
 

3

書式の修正

2020/09/30 09:31

投稿

kojiro23
kojiro23

スコア0

test CHANGED
File without changes
test CHANGED
@@ -586,10 +586,6 @@
586
586
 
587
587
  address = Address.create(postcode: postcode, area_id: area_id, city: city, road: road, building: building, phone: phone)
588
588
 
589
- purchase = Purchase.create()
590
-
591
- UserPurchase.create(address_id: address.id, )
592
-
593
589
  end
594
590
 
595
591
  ```
@@ -620,7 +616,7 @@
620
616
 
621
617
  def purchase_params
622
618
 
623
- params.require(:user_purchase).permit(:postcode, :area_id, :city, :road, :building, :phone, :token).merge( user_id: current_user.id, token: params[:token])
619
+ params.permit(:postcode, :area_id, :city, :road, :building, :phone, :token).merge( user_id: current_user.id, token: params[:token])
624
620
 
625
621
  end
626
622
 

2

書式の改善

2020/09/30 07:35

投稿

kojiro23
kojiro23

スコア0

test CHANGED
File without changes
test CHANGED
@@ -558,6 +558,96 @@
558
558
 
559
559
 
560
560
 
561
+
562
+
563
+ 追記
564
+
565
+ user_purchase.rbの
566
+
567
+
568
+
569
+ ```ruby
570
+
571
+ def save
572
+
573
+ Address.create(postcode: postcode, area_id: area_id, city: city, road: road, building: building, phone: phone)
574
+
575
+ Purchase.create(user_id: user_id, item_id: item_id)
576
+
577
+ end
578
+
579
+ ```
580
+
581
+ を下記に変更
582
+
583
+ ```ruby
584
+
585
+ def save
586
+
587
+ address = Address.create(postcode: postcode, area_id: area_id, city: city, road: road, building: building, phone: phone)
588
+
589
+ purchase = Purchase.create()
590
+
591
+ UserPurchase.create(address_id: address.id, )
592
+
593
+ end
594
+
595
+ ```
596
+
597
+
598
+
599
+ purchases_controller.rbの
600
+
601
+
602
+
603
+ ```ruby
604
+
605
+ def purchase_params
606
+
607
+ params.permit(:postcode, :area_id, :city, :road, :building, :phone, :token).merge( user_id: current_user.id)
608
+
609
+ end
610
+
611
+ ```
612
+
613
+
614
+
615
+ を下記に変更
616
+
617
+
618
+
619
+ ```ruby
620
+
621
+ def purchase_params
622
+
623
+ params.require(:user_purchase).permit(:postcode, :area_id, :city, :road, :building, :phone, :token).merge( user_id: current_user.id, token: params[:token])
624
+
625
+ end
626
+
627
+ ```
628
+
629
+
630
+
631
+ したところ以下のデータを取得できました。
632
+
633
+
634
+
635
+ ![ターミナル](8c1cc49c537a05e30f9fa768a367d580.png)
636
+
637
+
638
+
639
+ あと一歩のところで詰まっています。
640
+
641
+ よろしくお願いいたします。
642
+
643
+
644
+
645
+
646
+
647
+
648
+
649
+
650
+
561
651
  ### 補足情報(FW/ツールのバージョンなど)
562
652
 
563
653
  Ruby 2.6.5

1

商品購入画面を追加しました

2020/09/30 07:27

投稿

kojiro23
kojiro23

スコア0

test CHANGED
File without changes
test CHANGED
@@ -24,6 +24,282 @@
24
24
 
25
25
 
26
26
 
27
+ 購入画面
28
+
29
+ ```
30
+
31
+ <%= render "shared/second-header"%>
32
+
33
+
34
+
35
+ <div class='transaction-contents'>
36
+
37
+ <div class='transaction-main'>
38
+
39
+ <h1 class='transaction-title-text'>
40
+
41
+ 購入内容の確認
42
+
43
+ </h1>
44
+
45
+ <%# 購入内容の表示 %>
46
+
47
+ <div class='buy-item-info'>
48
+
49
+ <%= image_tag @item.image, class: 'buy-item-img' %>
50
+
51
+ <div class='buy-item-right-content'>
52
+
53
+ <h2 class='buy-item-text'>
54
+
55
+ <%= @item.text %>
56
+
57
+ </h2>
58
+
59
+ <div class='buy-item-price'>
60
+
61
+ <p class='item-price-text'>¥<%= @item.price %></p>
62
+
63
+ <% if @item.delivery_fee.id == 1%>
64
+
65
+ <p class='item-price-sub-text'>(税込)着払い</p>
66
+
67
+ <% else %>
68
+
69
+ <p class='item-price-sub-text'>(税込)送料込み</p>
70
+
71
+ <% end %>
72
+
73
+ </div>
74
+
75
+ </div>
76
+
77
+ </div>
78
+
79
+ <%# /購入内容の表示 %>
80
+
81
+
82
+
83
+ <%# 支払額の表示 %>
84
+
85
+ <div class='item-payment'>
86
+
87
+ <h1 class='item-payment-title'>
88
+
89
+ 支払金額
90
+
91
+ </h1>
92
+
93
+ <p class='item-payment-price'>
94
+
95
+ ¥<%= @item.price %>
96
+
97
+ </p>
98
+
99
+ </div>
100
+
101
+ <%# /支払額の表示 %>
102
+
103
+ <%= form_with model: @user_purchase, url: item_purchases_path, id: 'charge-form', local: true do |f| %>
104
+
105
+ <%# <%= render 'shared/error_messages', model: @user_purchase %>
106
+
107
+ <%# カード情報の入力 %>
108
+
109
+ <div class='credit-card-form'>
110
+
111
+ <h1 class='info-input-haedline'>
112
+
113
+ クレジットカード情報入力
114
+
115
+ </h1>
116
+
117
+ <div class="form-group">
118
+
119
+ <div class='form-text-wrap'>
120
+
121
+ <label class="form-text">カード情報</label>
122
+
123
+ <span class="indispensable">必須</span>
124
+
125
+ </div>
126
+
127
+ <%= f.text_field :number, class:"input-default", id:"card-number", placeholder:"カード番号(半角英数字)", maxlength:"16", name:"number" %>
128
+
129
+ <div class='available-card'>
130
+
131
+ <%= image_tag 'card-visa.gif', class: 'card-logo'%>
132
+
133
+ <%= image_tag 'card-mastercard.gif', class: 'card-logo'%>
134
+
135
+ <%= image_tag 'card-jcb.gif', class: 'card-logo'%>
136
+
137
+ <%= image_tag 'card-amex.gif', class: 'card-logo'%>
138
+
139
+ </div>
140
+
141
+ </div>
142
+
143
+ <div class="form-group">
144
+
145
+ <div class='form-text-wrap'>
146
+
147
+ <label class="form-text">有効期限</label>
148
+
149
+ <span class="indispensable">必須</span>
150
+
151
+ </div>
152
+
153
+ <div class='input-expiration-date-wrap'>
154
+
155
+ <%= f.text_area :exe_month, class:"input-expiration-date", id:"card-exp-month", placeholder:"例)3", name:"exp_month" %>
156
+
157
+ <p>月</p>
158
+
159
+ <%= f.text_area :exe_year, class:"input-expiration-date", id:"card-exp-year", placeholder:"例)23", name:"exp_year" %>
160
+
161
+ <p>年</p>
162
+
163
+ </div>
164
+
165
+ </div>
166
+
167
+ <div class="form-group">
168
+
169
+ <div class='form-text-wrap'>
170
+
171
+ <label class="form-text">セキュリティコード</label>
172
+
173
+ <span class="indispensable">必須</span>
174
+
175
+ </div>
176
+
177
+ <%= f.text_field :cvc,class:"input-default", id:"card-cvc", placeholder:"カード背面4桁もしくは3桁の番号", maxlength:"4", name:"cvc" %>
178
+
179
+ </div>
180
+
181
+ </div>
182
+
183
+ <%# /カード情報の入力 %>
184
+
185
+
186
+
187
+ <%# 配送先の入力 %>
188
+
189
+ <div class='shipping-address-form'>
190
+
191
+ <h1 class='info-input-haedline'>
192
+
193
+ 配送先入力
194
+
195
+ </h1>
196
+
197
+ <div class="form-group">
198
+
199
+ <div class='form-text-wrap'>
200
+
201
+ <label class="form-text">郵便番号</label>
202
+
203
+ <span class="indispensable">必須</span>
204
+
205
+ </div>
206
+
207
+ <%= f.text_field :postcode, class:"input-default", id:"postal-code", placeholder:"例)123-4567", maxlength:"8" %>
208
+
209
+ </div>
210
+
211
+ <div class="form-group">
212
+
213
+ <div class='form-text-wrap'>
214
+
215
+ <label class="form-text">都道府県</label>
216
+
217
+ <span class="indispensable">必須</span>
218
+
219
+ </div>
220
+
221
+ <%= f.collection_select(:area_id, Area.all, :id, :name, {}, {class:"select-box", id:"prefecture"}) %>
222
+
223
+ </div>
224
+
225
+ <div class="form-group">
226
+
227
+ <div class='form-text-wrap'>
228
+
229
+ <label class="form-text">市区町村</label>
230
+
231
+ <span class="indispensable">必須</span>
232
+
233
+ </div>
234
+
235
+ <%= f.text_field :city, class:"input-default", id:"city", placeholder:"例)横浜市緑区"%>
236
+
237
+ </div>
238
+
239
+ <div class="form-group">
240
+
241
+ <div class='form-text-wrap'>
242
+
243
+ <label class="form-text">番地</label>
244
+
245
+ <span class="indispensable">必須</span>
246
+
247
+ </div>
248
+
249
+ <%= f.text_field :road, class:"input-default", id:"addresses", placeholder:"例)青山1-1-1"%>
250
+
251
+ </div>
252
+
253
+ <div class="form-group">
254
+
255
+ <div class='form-text-wrap'>
256
+
257
+ <label class="form-text">建物名</label>
258
+
259
+ <span class="form-any">任意</span>
260
+
261
+ </div>
262
+
263
+ <%= f.text_field :building, class:"input-default", id:"building", placeholder:"例)柳ビル103"%>
264
+
265
+ </div>
266
+
267
+ <div class="form-group">
268
+
269
+ <div class='form-text-wrap'>
270
+
271
+ <label class="form-text">電話番号</label>
272
+
273
+ <span class="indispensable">必須</span>
274
+
275
+ </div>
276
+
277
+ <%= f.text_field :phone, class:"input-default", id:"phone-number", placeholder:"例)09012345678",maxlength:"11"%>
278
+
279
+ </div>
280
+
281
+ </div>
282
+
283
+ <%# /配送先の入力 %>
284
+
285
+ <div class='buy-btn'>
286
+
287
+ <%= f.submit "購入" ,class:"buy-red-btn" %>
288
+
289
+ </div>
290
+
291
+ <% end %>
292
+
293
+ </div>
294
+
295
+ </div>
296
+
297
+ <%= render "shared/second-footer"%>
298
+
299
+ ```
300
+
301
+
302
+
27
303
  purchases_controller.rb
28
304
 
29
305
  ```ruby