Express Checkout

Use this page to learn how you can utilize the Skipify Button modal experience without rendering the Skipify Button.

This function allows greater flexibility around how users can enroll and pay by allowing you to display the Skipify Checkout Modal and related flows (see Flow: The Skipify Button) at any point in your code. This function in the SDK is called expressCheckout().

Example Flow

Instead of utilizing the Skipify Button to launch the Button flow, you may launch the modal flow by calling expressCheckout() at any point in your code.

960

Setup

To initialize the expressCheckout(), you will need to initialize our SDK as you would for the Skipify Button or Expedited Guest Checkout experiences.

You will need to:

  • Set up the SDK
  • Set up the function to create an order
  • Set up Shipping or Tax settings
  • Set up callbacks

Details on this process can be found in the 'Required SDK Features' section of the Skipify Button flow or the Expedited Guest Checkout flow.

Displaying the Skipify Modal

To display the Skipify Modal you will use the expressCheckout() function.
This can be called from anywhere in your code, such as within the onClick function for a button.

For this flow, a user does not need to be a registered Skipify user. If they are not already registered we will handle enrolling them as they make their payment.

Sample code can be found below:

new window.GoCartSDK.Button({          
            orderDetailsCallback: async (actions) => {
                actions.createOrder({
                    lineItems: [
                        {
                          name: 'some item', 
                          amount: 100, 
                          SKU: 'SKU', 
                          category: 'some category' 
                        },
                    ], 
                    subtotal: 100, 
                    total: 100, 
                    orderId: 'your_order_id', 
                    orderDescription: 'some_description', 
                    currencyCode: 'USD' 
                });
            },
            success: (orderId, customerInfo, shippingInfo, billingInfo, shippingMethod, taxes, transactionDetails) => { 
                console.log(`Successfully processed order ${orderId}`); 
            }, 
            error: (orderId, errorCode, errorMessage) => { 
                console.log(`Error processing order ${orderId}.`); 
            },
            getOrderId: (orderId) => { console.log(orderId); }, // Optional
       }).expressCheckout();