@storecraft/payments-stripe 1.2.5 → 1.3.0

package/adapter.html.js

@@ -13,7 +13,7 @@
  * Or use the following dummy details:
  * https://docs.stripe.com/testing?testing-method=card-numbers
  * - Card number: 4242424242424242
- * - Expiry date: 12/2027
+ * - Expiry date:   
  * - CVC code: 897
  * 
  * @param {Config} config 
@@ -37,7 +37,33 @@ export default function html_buy_ui(config, order_data) {
     <script defer>
       // This is your test publishable API key.
       const stripe = new Stripe("${config.publishable_key}");
+      const dispatchEvent = (event, data) => {
+        window?.parent?.postMessage(
+          {
+            who: "storecraft",
+            event,
+            data
+          },
+          "*"
+        );
+      }
+      // Override console.log to send messages to the parent window
+      console.log = function(...args) {
+        // Log to console
+        dispatchEvent(
+          "storecraft/checkout-log",
+          args
+        );
+      };
 
+      console.error = function(...args) {
+        // Log to console
+        dispatchEvent(
+          "storecraft/checkout-error",
+          args
+        );
+      };
+              
       let elements;
 
       window.onload = function() {
@@ -73,20 +99,34 @@ export default function html_buy_ui(config, order_data) {
         const { error } = await stripe.confirmPayment({
           elements,
           confirmParams: {
-            // Make sure to change this to your payment completion page
-            return_url: "https://storecraft.app/",
+            // return to this same page, which can also interpret the
+            // payment intent status from the URL parameters
+            return_url: window.location.href,
           },
+          redirect: 'if_required'
         });
 
         // This point will only be reached if there is an immediate error when
         // confirming the payment. Otherwise, your customer will be redirected to
-        // your \`return_url\`. For some payment methods like iDEAL, your customer will
+        // your \`return_url\` unless 'if_required' ise set. For some payment methods like iDEAL, your customer will
         // be redirected to an intermediate site first to authorize the payment, then
         // redirected to the \`return_url\`.
-        if (error.type === "card_error" || error.type === "validation_error") {
-          showMessage(error.message);
+        if(error) {
+          dispatchEvent("storecraft/checkout-error", {
+            order_id: "${order_data.id}"
+          }); 
+
+          if (error.type === "card_error" || error.type === "validation_error") {
+            showMessage(error.message);
+          } else if(error) {
+            showMessage("An unexpected error occurred.");
+          }
         } else {
-          showMessage("An unexpected error occurred.");
+          // if 'if_required' is set and no redirect is needed,
+          // Payment succeeded, you can show a success message to your customer
+          dispatchEvent("storecraft/checkout-complete", {
+            order_id: "${order_data.id}"
+          }); 
         }
 
         setLoading(false);
@@ -107,6 +147,10 @@ export default function html_buy_ui(config, order_data) {
         switch (paymentIntent.status) {
           case "succeeded":
             showMessage("Payment succeeded!");
+            dispatchEvent("storecraft/checkout-complete", {
+              order_id: "${order_data.id}"
+            }); 
+
             break;
           case "processing":
             showMessage("Your payment is processing.");
@@ -116,6 +160,9 @@ export default function html_buy_ui(config, order_data) {
             break;
           default:
             showMessage("Something went wrong.");
+            dispatchEvent("storecraft/checkout-error", {
+              order_id: "${order_data.id}"
+            }); 
             break;
         }
       }
@@ -128,6 +175,8 @@ export default function html_buy_ui(config, order_data) {
         messageContainer.classList.remove("hidden");
         messageContainer.textContent = messageText;
 
+        console.log(messageText);
+
         setTimeout(function () {
           messageContainer.classList.add("hidden");
           messageContainer.textContent = "";
@@ -158,23 +207,21 @@ export default function html_buy_ui(config, order_data) {
 
       body {
         font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-        font-size: 16px;
+        font-size: 10px;
         -webkit-font-smoothing: antialiased;
+        height: content;
+        background-color: white;
         display: flex;
-        justify-content: center;
-        align-content: center;
-        height: 100vh;
-        width: 100vw;
+        flex-direction: column;
+        justify-content: start;
+        align-items: center;
       }
 
       form {
-        width: 30vw;
-        min-width: 500px;
+        width: 100%;
+        max-width: 500px;
+        mmmin-width: 500px;
         align-self: center;
-        box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
-          0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
-        border-radius: 7px;
-        padding: 40px;
       }
 
       .hidden {
@@ -287,12 +334,6 @@ export default function html_buy_ui(config, order_data) {
         }
       }
 
-      @media only screen and (max-width: 600px) {
-        form {
-          width: 80vw;
-          min-width: initial;
-        }
-      }
 
     </style>
   </head>

package/adapter.js

@@ -20,15 +20,17 @@ import { Stripe as StripeCls } from 'stripe'
  */
 
 /**
- * @description in a {@link StripeCls.PaymentIntent}, is a `metadata` key-value
- * storage where we store the `order_id` of the `storecraft` order.
+ * @description in a {@link StripeCls.PaymentIntent}, 
+ * is a `metadata` key-value storage where we store the 
+ * `order_id` of the `storecraft` order.
  */
 export const metadata_storecraft_order_id = 'storecraft_order_id'
 
 /**
  * @implements {Impl}
  * 
- * @description **Stripe** gateway (https://docs.stripe.com/payments/place-a-hold-on-a-payment-method)
+ * @description **Stripe** gateway 
+ * (https://docs.stripe.com/payments/place-a-hold-on-a-payment-method)
  */
 export class Stripe {
   
@@ -55,6 +57,7 @@ export class Stripe {
         automatic_payment_methods: {
           enabled: true,
         },
+        capture_method: 'manual',
         payment_method_options: {
           card: {
             capture_method: 'manual',
@@ -98,7 +101,7 @@ export class Stripe {
   get info() {
     return {
       name: 'Stripe',
-      description: `Stripe powers online and in-person payment processing and financial solutions for businesses of all sizes.`,
+      description: `Pay with Credit Card and other payment methods`,
       url: 'https://docs.stripe.com/payments/place-a-hold-on-a-payment-method',
       logo_url: 'https://images.ctfassets.net/fzn2n1nzq965/HTTOloNPhisV9P4hlMPNA/cacf1bb88b9fc492dfad34378d844280/Stripe_icon_-_square.svg?q=80&w=256'
     }
@@ -129,7 +132,6 @@ export class Stripe {
   }
 
   /**
-   * 
    * @type {Impl["invokeAction"]}
    */
   invokeAction(action_handle) {
@@ -148,7 +150,6 @@ export class Stripe {
 
   /**
    * @description (Optional) buy link ui
-   * 
    * @type {Impl["onBuyLinkHtml"]}
    */
   async onBuyLinkHtml(order) {
@@ -160,7 +161,6 @@ export class Stripe {
 
   /**
    * @description on checkout create `hook`
-   * 
    * @type {Impl["onCheckoutCreate"]}
    */
   async onCheckoutCreate(order) {
@@ -184,7 +184,6 @@ export class Stripe {
    * They advocate async flows where confirmation happens async from
    * client side into their servers, and then you are notified via a
    * webhook.
-   * 
    * @type {Impl["onCheckoutComplete"]}  
    */
   async onCheckoutComplete(create_result) {
@@ -228,7 +227,6 @@ export class Stripe {
 
   /**
    * @description Fetch the order and analyze it's status
-   * 
    * @type {Impl["status"]}
    */
   async status(create_result) {
@@ -257,7 +255,10 @@ export class Stripe {
       );
     }
     if(lc?.refunded) {
-      const date = lc?.refunds?.data?.[0]?.created ? (new Date(lc?.refunds?.data?.[0]?.created).toUTCString()) : 'unknown time';
+      const date = lc?.refunds?.data?.[0]?.created ? 
+        (new Date(lc?.refunds?.data?.[0]?.created).toUTCString()) : 
+        'unknown time';
+
       stat.messages.push(
         `**${fmt(lc.amount_refunded)}** was \`REFUNDED\` at \`${date}\``,
       );
@@ -268,7 +269,8 @@ export class Stripe {
       stat.messages.push(
         ...[
           `Intent was \`CANCELLED\` at \`${date}\`.`,
-          o.cancellation_reason && `Cancellation reason is ${o.cancellation_reason}`
+          o.cancellation_reason && 
+            `Cancellation reason is ${o.cancellation_reason}`
         ].filter(Boolean)
       );
     }
@@ -283,9 +285,7 @@ export class Stripe {
   async webhook(request, response) {
     const sig = request.headers.get('Stripe-Signature');
 
-    let event;
-  
-    event = await this.stripe.webhooks.constructEventAsync(
+    let event = await this.stripe.webhooks.constructEventAsync(
       request.rawBody, sig, this.config.webhook_endpoint_secret, undefined,
       StripeCls.createSubtleCryptoProvider()
     );
@@ -293,7 +293,7 @@ export class Stripe {
     /** @type {string} */
     let order_id = undefined;
 
-    /** @type {PaymentOptionsEnum[keyof PaymentOptionsEnum]} */
+    /** @type {typeof PaymentOptionsEnum[keyof typeof PaymentOptionsEnum]} */
     let payment_status = PaymentOptionsEnum.unpaid;
     
     // Handle the event
@@ -309,13 +309,14 @@ export class Stripe {
         if(payment_intent.status==='requires_capture')
           payment_status = PaymentOptionsEnum.authorized;
         else if(payment_intent.status==='canceled')
-          payment_status = PaymentOptionsEnum.unpaid;
+          payment_status = PaymentOptionsEnum.cancelled;
         else if(payment_intent.status==='processing')
           payment_status = PaymentOptionsEnum.unpaid;
         else if(payment_intent.status==='requires_action')
           payment_status = PaymentOptionsEnum.unpaid;
         else if(payment_intent.status==='succeeded')
           payment_status = PaymentOptionsEnum.captured;
+
         break;
       }
       case 'charge.refunded':
@@ -351,9 +352,8 @@ export class Stripe {
 
   /**
    * @description Retrieve latest order payload
-   * 
-   * @param {CheckoutCreateResult} create_result first create result, holds `Stripe` intent
-   * 
+   * @param {CheckoutCreateResult} create_result 
+   * first create result, holds `Stripe` intent
    */
   retrieve_order = (create_result) => {
     return this.stripe.paymentIntents.retrieve(
@@ -368,7 +368,6 @@ export class Stripe {
 
   /**
    * @description todo: logic for if user wanted capture at approval
-   * 
    * @param {CheckoutCreateResult} create_result 
    */
   async cancel(create_result) {
@@ -384,7 +383,6 @@ export class Stripe {
 
   /**
    * @description todo: logic for if user wanted capture at approval
-   * 
    * @param {CheckoutCreateResult} create_result 
    */
   async capture(create_result) {
@@ -400,7 +398,6 @@ export class Stripe {
 
   /**
    * @description todo: logic for if user wanted capture at approval
-   * 
    * @param {CheckoutCreateResult} create_result 
    */
   async refund(create_result) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storecraft/payments-stripe",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "Official Storecraft <-> Stripe integration",
   "license": "MIT",
   "author": "Tomer Shalev (https://github.com/store-craft)",