【JAVASCRIPT】Integration Stripe checking out with the payment request API

index.html

<div>
  <h1>Cart</h1>
  <img src="https://via.placeholder.com/150?text=Chillis"/>
  
  <h3 class="product">Product:<span>Bag of red chillis</span></h3>
  <h3 class="price">Price:<span>$4.99</span></h3>
  <label for="amount">Quantity</label>
  <input id="amount" type="number" value="5" min="0">
  <h3 class="price">SubTotal:</h3>
  <h3><div class="currency">$</div><div id="subTotalText">24.95</div></h3>
  <button type="button" class="btn btn-primary" id="payment-request-button">
    <span class="default">
      <i class="fas fa-lg fa-credit-card"></i>
      Buy Chillis
    </span>
  </button>
  <div id="message"></div>
</div>

<div id="payment-token-message" class="mt-2" style="display:none;" >
  Token Created! <strong><pre id="payment-token">FOO</pre></strong>
</div>

javascript-integration-stripe-checking-out-with-the-payment-request-api.markdown

【JAVASCRIPT】Integration Stripe checking out with the payment request API

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

(function () {
  // Switch out the test key here with your own
  let stripe = Stripe('pk_test_WUZWHWgf54rbnfwcO4rkPfCJ');
  let paymentRequest = stripe.paymentRequest({
    country: 'US',
    currency: 'usd',
    total: {
      label: 'Total to pay',
      amount: 2495,
    },
    requestPayerName: true,
    requestPayerEmail: true,
    requestShipping: true,            
    shippingOptions: [
      {
        id: 'free-shipping',
        label: 'Free shipping',
        detail: 'Arrives in 5 to 7 days',
        amount: 0,
      },
      ],
  });
  
  // Check the availability of the Payment Request API first.
  paymentRequest.canMakePayment().then(function(result) {
    console.log(result)
    let button = document.getElementById('payment-request-button');
    if (result) {
      button.style.display = 'inline-block';
      button.addEventListener('click', paymentRequest.show);      
    } else {
      button.style.display = 'none';
    }
  });
  
  paymentRequest.on('token', function(ev) {
    console.log(ev)
    document.getElementById('payment-token').innerText = ev.token.id;
    document.getElementById('payment-token-message').style.display = 'block';
    
    ev.complete('success');
  });
})();

scripts

<script src="https://js.stripe.com/v3/"></script>

style.css

body, html {
  background-color: #fff;
  height: 100%;
  width: 335px;
  font-family: 'Montserrat', sans-serif;
  margin: 0 auto;
}

img, div {
  margin: 0 auto;
  display: block;
}

div {
  margin-bottom: 20px;
}

h1 {
  display: block;
  border-bottom: 1px solid #c21807;
}

h3, label {
  font-weight: 700;
  font-size: 23px;
}

img {
  width: 261px;  
}

input {
  width: 50px; 
  float: right;
}

span {
  float: right;
}

span.default {
  color: #ffffff;
  font-size: 18px;
}

.currency {
  margin-top: -50px;
  margin-left: 240px;
  position: absolute;
  color: #c21807;
}

#subTotalText {
  margin-top: -50px;
  float: right;
  color: #c21807;
}

#message {
  float: left;
  margin-top: 10px;
  width: 320px;
  display: none;
  padding: 10px;
  font-weight: bold;
  border-radius: 5px;
}

#message.success {
  background-color: #ace1af;
  color: #008000;
  display: block;
}

#message.success > span {
  float: left;
  font-size: 30px;
  color: #008000;
  padding: 0px 10px;
  line-height: 40px;
}

#message.failure {
  background-color: #FFD1DC;
  color: #ff0000;
  display: block;
}

#message.failure > span {
  float: left;
  font-size: 30px;
  color: red;
  padding: 0px 10px;
  line-height: 40px;
}

#message.info {
  background-color: #FCF75E;
  display: block;
  color: #000000;
  line-height: 20px;
}

#message.info > span {
  float: left;
  font-size: 30px;
  color: #000000;
  padding: 0px 10px;    
  line-height: 20px;
}

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary {
  color: #fff;
  background-color: #c21807;
  border-color: #c21807;
  display: inline-block;
  float: right;
  height: 60px;
  width: 169px;
  text-align: center;
  padding: 15px 30px;
  border-radius: 30px;
  outline: none;
}

.btn-primary:hover {
  color: #fff;
  background-color: #f31e09;
  border-color: #f31e09;
}