Skip to content

Commit b946965

Browse files
michellemichelle
authored
Merge pull request stripe#1 from stripe/michelle-paymentRequest
2 parents 5e9ecfc + 2a6e836 commit b946965

File tree

5 files changed

+99
-94
lines changed

5 files changed

+99
-94
lines changed

‎css/example4.css‎

Lines changed: 8 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -24,79 +24,6 @@
2424
padding: 3px;
2525
}
2626

27-
.example.example4 .amount {
28-
position: relative;
29-
display: -ms-flexbox;
30-
display: flex;
31-
height: 40px;
32-
}
33-
34-
.example.example4 .amount input[type="radio"] {
35-
display: none;
36-
}
37-
38-
.example.example4 .amount input[type="radio"]:checked + label {
39-
color: #fff;
40-
}
41-
42-
.example.example4 .amount input[type="radio"]:checked + label:active {
43-
color: #ffe0f5;
44-
}
45-
46-
.example.example4
47-
.amount
48-
input[type="radio"]:nth-of-type(2):checked
49-
~ .highlight {
50-
transform: translateX(100%);
51-
}
52-
53-
.example.example4
54-
.amount
55-
input[type="radio"]:nth-of-type(3):checked
56-
~ .highlight {
57-
transform: translateX(200%);
58-
}
59-
60-
.example.example4
61-
.amount
62-
input[type="radio"]:nth-of-type(4):checked
63-
~ .highlight {
64-
transform: translateX(300%);
65-
}
66-
67-
.example.example4
68-
.amount
69-
input[type="radio"]:nth-of-type(5):checked
70-
~ .highlight {
71-
transform: translateX(400%);
72-
}
73-
74-
.example.example4 .amount label {
75-
-ms-flex: 1;
76-
flex: 1;
77-
text-align: center;
78-
line-height: 34px;
79-
cursor: pointer;
80-
color: #32325d;
81-
z-index: 1;
82-
transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
83-
-webkit-tap-highlight-color: transparent;
84-
}
85-
86-
.example.example4 .amount label:active {
87-
color: #8898aa;
88-
}
89-
90-
.example.example4 .amount .highlight {
91-
position: absolute;
92-
width: calc(20% - 1px);
93-
height: calc(100% - 6px);
94-
left: 3px;
95-
border-radius: 2px;
96-
background-color: #d782d9;
97-
transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
98-
}
99-
10027
.example.example4 fieldset {
10128
border-style: none;
10229
padding: 5px;
@@ -115,6 +42,13 @@
11542
padding: 3px 10px 7px;
11643
}
11744

45+
.example.example4 .card-only {
46+
display: block;
47+
}
48+
.example.example4 .payment-request-available {
49+
display: none;
50+
}
51+
11852
.example.example4 fieldset legend + * {
11953
clear: both;
12054
}
@@ -136,7 +70,7 @@
13670
-webkit-animation: 1ms void-animation-out;
13771
}
13872

139-
.example.example4 .StripeElement {
73+
.example.example4 #example4-card {
14074
padding: 10px;
14175
margin-bottom: 2px;
14276
}

‎css/example5.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@
1212
padding: 0 20px;
1313
}
1414

15+
#example5-paymentRequest {
16+
max-width: 500px;
17+
width: 100%;
18+
margin-bottom: 10px;
19+
}
20+
1521
.example.example5 fieldset {
1622
border: 1px solid #b5a4ed;
1723
padding: 15px;
@@ -33,6 +39,13 @@
3339
clear: both;
3440
}
3541

42+
.example.example5 .card-only {
43+
display: block;
44+
}
45+
.example.example5 .payment-request-available {
46+
display: none;
47+
}
48+
3649
.example.example5 .row {
3750
display: -ms-flexbox;
3851
display: flex;

‎index.html‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -219,24 +219,12 @@ <h3 class="title">Payment successful</h3>
219219
<!--Example 4-->
220220
<div class="cell example example4">
221221
<form>
222-
<div class="amount container">
223-
<input id="example4-amount-1" type="radio" name="amount" value="1">
224-
<label for="example4-amount-1">$1</label>
225-
<input id="example4-amount-5" type="radio" name="amount" value="5" checked="">
226-
<label for="example4-amount-5">$5</label>
227-
<input id="example4-amount-20" type="radio" name="amount" value="20">
228-
<label for="example4-amount-20">$20</label>
229-
<input id="example4-amount-50" type="radio" name="amount" value="50">
230-
<label for="example4-amount-50">$50</label>
231-
<input id="example4-amount-100" type="radio" name="amount" value="100">
232-
<label for="example4-amount-100">$100</label>
233-
<div class="highlight"></div>
234-
</div>
235-
<div id="example4-apple-pay">
222+
<div id="example4-paymentRequest">
236223
<!--Stripe Apple Pay element inserted here-->
237224
</div>
238225
<fieldset>
239-
<legend>Pay with card</legend>
226+
<legend class="card-only">Pay with card</legend>
227+
<legend class="payment-request-available">Or enter card details</legend>
240228
<div class="container">
241229
<div id="example4-card"></div>
242230
<input type="submit" value="Donate">
@@ -271,12 +259,13 @@ <h3 class="title">Payment successful</h3>
271259

272260
<!--Example 5-->
273261
<div class="cell example example5">
262+
<div id="example5-paymentRequest">
263+
<!--Stripe payment request API element inserted here-->
264+
</div>
274265
<form>
275-
<div id="example5-payment-request">
276-
<!--Stripe payment request API element inserted here-->
277-
</div>
278266
<fieldset>
279-
<legend>Pay with card</legend>
267+
<legend class="card-only">Pay with card</legend>
268+
<legend class="payment-request-available">Or enter card details</legend>
280269
<div class="row">
281270
<div class="field">
282271
<label for="example5-name">Name</label>

‎js/example4.js‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
cssSrc: 'https://rsms.me/interface/interface.css',
66
});
77

8+
/**
9+
* Card Element
10+
*/
811
var card = elements.create('card', {
912
style: {
1013
base: {
@@ -23,7 +26,39 @@
2326
},
2427
},
2528
});
29+
2630
card.mount('#example4-card');
2731

28-
registerElements([card], 'example4');
32+
/**
33+
* Payment Request Element
34+
*/
35+
var paymentRequest = stripe.paymentRequest({
36+
country: 'US',
37+
currency: 'USD',
38+
total: {
39+
amount: 2000,
40+
label: 'Total',
41+
},
42+
});
43+
var paymentRequestElement = elements.create('paymentRequestButton', {
44+
paymentRequest: paymentRequest,
45+
style: {
46+
paymentRequestButton: {
47+
type: 'donate',
48+
},
49+
},
50+
});
51+
52+
paymentRequest.canMakePayment().then(function(result) {
53+
if (result) {
54+
document.querySelector('.example4 .card-only').style.display = 'none';
55+
document.querySelector(
56+
'.example4 .payment-request-available'
57+
).style.display =
58+
'block';
59+
paymentRequestElement.mount('#example4-paymentRequest');
60+
}
61+
});
62+
63+
registerElements([card, paymentRequestElement], 'example4');
2964
})();

‎js/example5.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33

44
var elements = stripe.elements();
55

6+
/**
7+
* Card Element
8+
*/
69
var card = elements.create('card', {
710
style: {
811
iconStyle: 'solid',
@@ -29,5 +32,36 @@
2932
});
3033
card.mount('#example5-card');
3134

35+
/**
36+
* Payment Request Element
37+
*/
38+
var paymentRequest = stripe.paymentRequest({
39+
country: 'US',
40+
currency: 'USD',
41+
total: {
42+
amount: 2500,
43+
label: 'Total',
44+
},
45+
});
46+
var paymentRequestElement = elements.create('paymentRequestButton', {
47+
paymentRequest: paymentRequest,
48+
style: {
49+
paymentRequestButton: {
50+
theme: 'light',
51+
},
52+
},
53+
});
54+
55+
paymentRequest.canMakePayment().then(function(result) {
56+
if (result) {
57+
document.querySelector('.example5 .card-only').style.display = 'none';
58+
document.querySelector(
59+
'.example5 .payment-request-available'
60+
).style.display =
61+
'block';
62+
paymentRequestElement.mount('#example5-paymentRequest');
63+
}
64+
});
65+
3266
registerElements([card], 'example5');
3367
})();

0 commit comments

Comments
 (0)