Refactor Stripe V3 Intents, Elements and cart checkout JS code

README.md

@@ -73,10 +73,20 @@ Using Stripe Payment Intents API
 --------------------------------
 
 If you want to use the new SCA-ready Stripe Payment Intents API you need
-to change the `v3_intents` preference from the code above to true and,
-if you want to allow also Apple Pay and Google Pay payments, set the
-`stripe_country` preference, which represents the two-letter country
-code of your Stripe account:
+to change the `v3_intents` preference from the code above to true.
+
+Also, if you want to allow Apple Pay and Google Pay payments using the
+Stripe  payment request button API, you only need to set the `stripe_country`
+preference, which represents the two-letter country code of your Stripe
+account. Conversely, if you need to disable the button you can simply remove
+the `stripe_country` preference.
+
+Please refer to Stripe official
+[documentation](https://stripe.com/docs/stripe-js/elements/payment-request-button)
+for further instructions on how to make this work properly.
+
+The following configuration will use both Payment Intents and the
+payment request button API on the store payment page:
 
 
 ```ruby
@@ -120,8 +130,8 @@ payment method configured for Stripe via the local variable
 <%= render 'stripe_payment_request_button', cart_checkout_payment_method: Spree::PaymentMethod::StripeCreditCard.first %>
 ```
 
-Of course, rules stated in the paragraph above (remember to add the stripe country
-config value, for example) apply also for this payment method.
+Of course, the rules listed in the Payment Intents section (adding the stripe
+country config value, for example) apply also for this feature.
 
 
 Migrating from solidus_gateway

app/assets/javascripts/spree/stripe-payments/stripe-cart-page-checkout.js

@@ -0,0 +1,88 @@
+SolidusStripe.CartPageCheckout = function() {
+  SolidusStripe.Payment.call(this);
+
+  this.errorElement = $('#card-errors');
+};
+
+SolidusStripe.CartPageCheckout.prototype = Object.create(SolidusStripe.Payment.prototype);
+Object.defineProperty(SolidusStripe.CartPageCheckout.prototype, 'constructor', {
+  value: SolidusStripe.CartPageCheckout,
+  enumerable: false,
+  writable: true
+});
+
+SolidusStripe.CartPageCheckout.prototype.init = function() {
+  this.setUpPaymentRequest({requestShipping: true});
+};
+
+SolidusStripe.CartPageCheckout.prototype.showError = function(error) {
+  this.errorElement.text(error).show();
+};
+
+SolidusStripe.CartPageCheckout.prototype.submitPayment = function(payment) {
+  var showError = this.showError.bind(this);
+
+  $.ajax({
+    url: $('[data-submit-url]').data('submit-url'),
+    headers: {
+      'X-Spree-Order-Token': $('[data-order-token]').data('order-token')
+    },
+    type: 'PATCH',
+    contentType: 'application/json',
+    data: JSON.stringify(this.prTokenHandler(payment.paymentMethod)),
+    success: function() {
+      window.location = $('[data-complete-url]').data('complete-url');
+    },
+    error: function(xhr,status,error) {
+      showError(xhr.responseJSON.error);
+    }
+  });
+};
+
+SolidusStripe.CartPageCheckout.prototype.onPrPayment = function(result) {
+  var handleServerResponse = this.handleServerResponse.bind(this);
+
+  fetch('/stripe/update_order', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      shipping_address: result.shippingAddress,
+      shipping_option: result.shippingOption,
+      email: result.payerEmail,
+      name: result.payerName,
+      authenticity_token: this.authToken
+    })
+  }).then(function(response) {
+    response.json().then(function(json) {
+      handleServerResponse(json, result);
+    })
+  });
+};
+
+SolidusStripe.CartPageCheckout.prototype.onPrButtonMounted = function(buttonId, success) {
+  var container = document.getElementById(buttonId).parentElement;
+
+  if (success) {
+    container.style.display = '';
+  } else {
+    container.style.display = 'none';
+  }
+};
+
+SolidusStripe.CartPageCheckout.prototype.prTokenHandler = function(token) {
+  return {
+    order: {
+      payments_attributes: [
+        {
+          payment_method_id: this.config.id,
+          source_attributes: {
+            gateway_payment_profile_id: token.id,
+            last_digits: token.card.last4,
+            month: token.card.exp_month,
+            year: token.card.exp_year
+          }
+        }
+      ]
+    }
+  }
+};