What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Using Shopify for Payments on Custom Website?

Solved

Using Shopify for Payments on Custom Website?

geoffreywiseman
Tourist
4 0 2

Almost all the examples I can find about integrating a custom site with Shopify end up redirecting to Shopify at some point in the process. For instance, I can use (oddly named) JS Buy SDK to create a cart and add products to it, but not to actually buy (take payment) for those items — I would still need to redirect to Shopify for that part.

 

If I have a website and I just want to use an API for payments, without redirecting to a Shopify page, is that an option with Shopify or is that still something that I have to use a different payment gateway for?

 

I found a similar question from 2015 and the answer was to use a payment gateway like Stripe instead — is that still the correct answer?

 

Accepted Solution (1)

KarlOffenberger
Shopify Partner
1873 184 903

This is an accepted solution.

Pretty much yes. You won't be able to use JS Buy SDK or the underlying Storefront API to complete a checkout i.e. you can create a checkout and prepare it for the final step of taking payment details, but that step must happen in Shopify's checkout via the webUrl field from the checkout. Shopify cite security reasons and PCI compliance for that constraint.

 

So for entirely custom storefronts where you wish to capture payments from within your custom storefront, a 3rd party payment gateway + that payment gateways checkout API or component would be necessary as would be an app to sync orders from the payment gateway with Shopify.

View solution in original post

Replies 7 (7)

KarlOffenberger
Shopify Partner
1873 184 903

This is an accepted solution.

Pretty much yes. You won't be able to use JS Buy SDK or the underlying Storefront API to complete a checkout i.e. you can create a checkout and prepare it for the final step of taking payment details, but that step must happen in Shopify's checkout via the webUrl field from the checkout. Shopify cite security reasons and PCI compliance for that constraint.

 

So for entirely custom storefronts where you wish to capture payments from within your custom storefront, a 3rd party payment gateway + that payment gateways checkout API or component would be necessary as would be an app to sync orders from the payment gateway with Shopify.

Doom_Virus
Shopify Partner
3 0 0

Hi @KarlOffenberger,

I am trying to do same but I am open to use the shopify checkout page. Is there any way that the originating source can verify the status of checkout? i.e. was checkout completed and converted into an order? How can a non-shopify website/app track checkout to order placed to take subsequent steps? One way is Webhooks but there is no time guarantee on the availability of the data from webhook.

 

 

KarlOffenberger
Shopify Partner
1873 184 903

@Doom_Virus

 

When using Shopify checkout, once your customer reaches the checkout order summary i.e. all done and dusted, you can redirect them back to your store. That can be done using Checkout Additional scripts where you can add JS and Liquid or even HTML using

 

Shopify.Checkout.OrderStatus.addContentBox(htmlString);

 

Same way you'd be placing GA scripts (or otherwise) in there, you can add tracking for your non-Shopify page/app too if that's what you meant. Not sure what you meant with "subsequent steps" though?

Doom_Virus
Shopify Partner
3 0 0

Thanks for your reply @KarlOffenberger.

Here is an explanation of subsequent steps

In my custom storefront User chose to buy a service. (The product is NOT marked as Physical product)

I create a check-out(123)

redirect the user to Shopify Payment page.

The user completes the transaction.

I need to know(on custom storefront) that the checkout 123 was converted to an order by successful payment, so I can automatically enable the service in checkout for the user.

 

I want to avoid manual intervention at this stage

 

Hope that helps.

 

PS: I like the signature line "I turn coffee in to code - since 1998"

KarlOffenberger
Shopify Partner
1873 184 903

Hmm... not 100% sure about such a use case without thinking it through some more and actually trying it out so please don't take my word for it and verify, test and make sure it is safe and tamper proof - but I believe you could use the checkout.paymentDue to check any outstanding amounts have been covered before activating your service.

 

You could also do "something" with the checkout order status because you'd have access to the checkout object which has transactions and thus more detail about the state of the transaction. How you'd tie that back in to an activation on your end - no idea 😉

geoffreywiseman
Tourist
4 0 2

TBH, you kinda have to go through hoops to great Shopify as a sort of glorified payment provider this way, it's clearly not what it's intended for. Having said that, since I have looked into this path for a project where Shopify was already selected, I agree, you'd have to look at the Checkout, and you'd have to be prepared for the possibility of multiple checkouts getting started, which you'd want to be careful of, since you'd presumably want to avoid double payments.

 

Anyway -- I think this is possible, but it's definitely something to tread carefully on, and if this is all you really want Shopify for, you should very likely be looking at a payment provider instead. But if Shopify is the right fit for other parts of your solution  and you just want to make this particular part work with a custom integration, I believe it's possible that there's a viable path through here, but tread carefully and test well.

Doom_Virus
Shopify Partner
3 0 0

Thanks for both your inputs @geoffreywiseman and @KarlOffenberger. Let me try what can be done. Will update if i get on a success track.

 

Quick question. The checkout object has two attributes mentioned below. Would you know if 'note' flows from checkout to order and when woudl 'order_id' get populated? I can poll on this.

order_id  
note