How to handle WebCheckouts

[donedgardo]

I'm trying to handle webcheckout, looking into the SDK documentation I don't see a posible way to do this.

The only interesting line (I'm not an iOS developer) is this one webPaymentProvider.delegate = self; inside the RNShopify.m

I'm working a pull request to add Web Checkouts on Android implementing something like this:

@ReactMethod
  public void webCheckout(ReadableArray cartItems, final Promise promise) {
    Cart cart;

    try {
      cart = new Cart();
      for (int i = 0; i < cartItems.size(); i++) {
        ReadableMap cartItem = cartItems.getMap(i);
        ReadableMap variantDictionary = cartItem.getMap("variant");
        int quantity = cartItem.getInt("quantity");

        JSONObject variantAsJsonObject = convertMapToJson(variantDictionary);
        ProductVariant variant = fromVariantJson(variantAsJsonObject.toString());

        for(int j = 0; j < quantity; j++) {
          cart.addVariant(variant);
        }
      }
    } catch (JSONException e) {
      promise.reject("", e);
      return;
    }

    checkout = new Checkout(cart);

    // Sync the checkout with Shopify
    buyClient.createCheckout(checkout, new Callback<Checkout>() {

      @Override
      public void success(Checkout checkout) {
          checkout.setWebReturnToUrl("myscheme://home"); // the custom URL for your app
          checkout.setWebReturnToLabel("Return to App");
        RNShopifyModule.this.checkout = checkout;
          String uri = checkout.getWebUrl();

          promise.resolve(uri);

      }

      @Override
      public void failure(BuyClientError error) {
        promise.reject("", error.getRetrofitErrorBody());
      }
    });

  }

And then catching the checkout uri in the react app:

const cart = [{
      variant: variant,
      quantity: 1,
    }];
    Shopify.webCheckout(cart)
    .then(url => {
      if(url){
        console.log(url);
        Linking.openURL(url);
      }
    })
    .catch(err => {
      console.log(err);
    })

Had to add this to the node_module/react-native-shopify/index.js:

....
  webCheckout: (cart) =>{
    return RNShopify.webCheckout(cart)
      .catch((error) => {
        throw new Error(getCheckoutError(error.message, cart));
      });
  },
...

But I have no idea how to handle after user cancels or completes order. One Idea was to return the checkout token and then at a later time do an api call to check the status.

Any ideas?

[Air-Miha]

Hi Edgardo,

The web checkout works. The only thing that's missing is being notified about when the checkout is complete and the user closes Safari.

Check out line 241 in RNShopify.m and this issue:

https://github.com/Shopify/mobile-buy-sdk-ios/issues/428

We never got the time to test this out since we went with native checkout. Could you try to follow their instructions and see if the callback gets called? If so, then we have completed the web checkout functionality for iOS.

As for Android,

You need to save the promise you got in webCheckout as a private member. Then you need to start an activity. When you get the result, you need to resolve or reject the promise.

Intent intent = new Intent(Intent.ACTION_VIEW);
intent.setData(Uri.parse(checkout.getWebUrl()));
intent.setPackage("com.android.chrome");
startActivity(intent);

Check this issue:

https://github.com/Shopify/mobile-buy-sdk-android/issues/341

You can avoid doing anything in index.js. You have the return to web URL, which gets triggered after a successful checkout, and the issue above explains what to do when the user just navigates back. You then just resolve or reject the promise and JS will take it from there :).

[Air-Miha]

@donedgardo

Any updates on this? It would be great to add this to the bridge :)

[webmaster100]

Hello, I am using webCheckout and want to trigger some actions in React Native code when the order is completed in Safari or when user return back by pressing Done button after completing the order, but I see that webCheckout then callback is not called. Is there some way to get notified when the order is completed in Safari?

Thanks!

[tamdesktop]

i'm waiting for the next release. Please finish web checkout for both android and ios. 💃