SDK: The Skipify Button

Place the Skipify button before your checkout form to give consumers a faster, more streamlined payment experience

Overview

Back to Button Workflow

The Skipify button is one of the entry points for consumers to be able to pay with Skipify. This button allows a consumer who is not enrolled with Skipify to both enroll and pay. It also streamlines checkout for enrolled consumers by circumventing the need to complete form fields.

See the below image for an example of where to place the Skipify Button

1727

The Checkout with Skipify button is placed near the login and continue as guest buttons, allowing the consumer to utilize Skipify and skip filling out forms

Initialize Order & Render the Button

In a script tag, initialize the Skipify Button and the callback functions. The button can be rendered on your webpage with a call to the render function. You will need to provide a container for the button and provide it with a unique id:

<body> 
    // Place the SDK script at the end of your <body> declaration 
    <script src="https://api-staging.skipify.com/merchants/MERCHANT_ID/sdk"> 
        // Replace MERCHANT_ID with your GoCart merchant ID. 
    </script> 
   
    // Place a container for the button to be rendered in your checkout page
    <div id="my-button-container"></div> 

    <script> 
        new window.GoCartSDK.Button({ 
            orderDetailsCallback: async (actions) => { 
                actions.createOrder({ 
                   lineItems: [ // this collection is required, but can be left empty
                        {
                          name: 'some item', 
                          amount: 100, 
                          SKU: 'SKU', // for each line item, this is a required field
                          category 'some category' 
                        },
                    ], 
                    subtotal: 100, 
                    total: 100, 
                    orderId: 'your_order_id', 
                    orderDescription: 'some_description', 
                    currencyCode: 'USD'
                })
            },
            theme: 'light', // Optional parameter; see below for more details
            // details for this and other callbacks can be found in the 'Callbacks' page 
        }).render(“my-button-container”); // searches the DOM and renders the GoCart button
    </script> 
</body>

Button Theme

The Skipify button is black by default and meant to match a light theme. The button can also be displayed as white (to match a dark theme) by setting this optional parameter to dark.

Theme Examples

The default button color is black, often used against a light background:

899

The dark theme button is white, often used against a dark background:

899

👍

Best Practice!

Include the Skipify button in a visible place, before consumers see the checkout form fields. This will let them use Skipify to skip the checkout form entirely!


Updated 7 months ago