How to integrate a custom checkout with Postscript

1. Add the Postscript javascript SDK

Add the Postscript SDK to your root page’s <head> tag:

Postscript sdk tag:

<script type="application/javascript" async src="https://sdk.postscript.io/integrations/sdk-min.js"></script>

2. Add the custom elements for SMS subscribers (screenshot at end of article)

Add the following elements to your checkout page:

  1. Phone input field (you may already have a phone field for shipping)
  2. Checkbox (unchecked) to agree to receive text messages
  3. SMS opt-in terms: 

“I agree to receive recurring automated text messages at the phone number provided. Consent is not a condition to purchase. Msg & data rates may apply. View our terms of service for details.”

Note: You can use different placement than shown in the screenshot at the end of the article.

3. Send Postscript events

Send Postscript checkout events in order to add subscribers and attribute purchases. Send events using the following syntax:

postscript.event(event_name, data_object);

Available events: 

  1. ‘checkout_started’ - Typically sent when they continue to the next page after checkout, so that you can collect their phone number and SMS consent
  2. ‘payment_started’ - Typically sent on the payment page load if you have a separate payment page after they’ve started checkout and subscribed to receive text messages
  3. ‘purchase’ - Typically sent on the order confirmation page load

Here are examples of each:

postscript.event(‘checkout_started’, {

‘myshopify_domain’: ‘my-shopify-store.myshopify.com’,

‘accepts_sms’: true, 

‘phone_number’: ‘2025550116’, 

‘source’: ‘Custom Checkout’

});

(Sending this event will also create the Postscript subscriber. The SDK will cookie the user with their subscriber ID, which is automatically used for each subsequent Postscript event.)

postscript.event(‘payment_started’, { ‘source’: ‘Custom Checkout’});

postscript.event(‘purchase’, {‘order_id’:’1234567890’, ‘source’: ‘Custom Checkout’});

(Please note that the order_id refers to the Shopify order id, not the order number)

Screenshot:

Did this answer your question?