Standard Checkout

Overview

Items you will need:

• The Zip React Native SDK
• The Start Checkout call in your React Native app
• An order confirmation endpoint on your server

Implementation

1. Please visit the following link to our SDK to verify the current version number: https://www.npmjs.com/package/quadpay-merchant-sdk-react-native/v/2.1.0.

📘

iOS Only

Go to your iOs folder and run pod install.

2. Import our package

import { QuadPay } from "quadpay-merchant-sdk-react-native";

How to start a Zip checkout in your React Native App

Initialize the Zip SDK

• Your Merchant ID will be provided by your Zip account manager.
• Please make sure you are using the production merchantId with environment "production" and the sandbox merchantId with environment "sandbox".
• For enablement in other markets, set locale with your locale variable ("US" for the United States).

// Be sure to init the QuadPay library before making any calls!
merchantId = "44444444-4444-4444-4444-444444444444";

// Be sure to make sure your Merchant ID is for the correct environment!
environment = "SANDBOX"; // "SANDBOX" or "PRODUCTION"

locale = "US";
QuadPay.initialize(merchantId, environment, locale);

Start the Zip Checkout
Once presented the customer will be shown the Zip checkout flow.

// Add details about the customer and their order
//  these will be used to autofill fields during the QuadPay checkout
order = {
  amount: "44.44",
  merchantReference: "custom-order-id",
  customerFirstName: "Quincy",
  customerEmail: "<use a unique email>@<test>.com",
  customerLastName: "Payman",
  customerPhoneNumber: "+14076901147",
  customerAddressLine1: "240 Meeker Ave",
  customerAddressLine2: "Apt 35",
  customerPostalCode: "11211",
  customerCity: "Brooklyn",
  customerState: "NY",
  customerCountry: "US",
  merchantFeeForPaymentPlan: "0",
};

Implement the Callbacks

These functions give your application information regarding the result of the Zip checkout flow.

// Register callbacks with the QuadPay library -- these will fire when the customer
//  completes or cancels checkout
//  There is no need to "unregister" any of the callbacks
QuadPay.onCheckoutSuccessful(successfulCheckout => console.log(successfulCheckout));
// The user has completed checkout -- successfulCheckout.orderId must be used to confirm the transaction from the backend


// Handle edge cases
QuadPay.onCheckoutCancelled(reason => console.log(reason));
QuadPay.onCheckoutError(errorMessage => console.log(errorMessage));

// Open the QuadPay checkout view
QuadPay.startCheckout(order);

Confirming your Zip orders

As soon as your customer has completed checkout, an Order Id will be issued. To finalize the transaction this Order ID must be submitted to Zip's confirmation endpoint. The Order Id will last for 24 hours under default settings to be confirmed.

The timing of your shipping can be any time after you have confirmed the order. When submitting the Order ID, you will have a chance to finalize the order amount.

Post the Order Id to the confirmation endpoint

See https://docs.us.zip.co/docs/api-implementation#signing-requests for information regarding signing requests

Post:

curl -X post https://gateway.us.zip.co/orders/{orderId}/confirm
  -H 'content-type: application/json' 
  -H 'X-QP-Signature: [signature]'
  -d '{
    "orderId": [orderId],
    "totalOrderAmount": <number>, (optional)
    "taxAmount": <number>, (optional),
    "shippingAmount": <number>, (optional)
  }'

An order ID will be returned:

{
  "orderId": [order id]
}

Service after confirmation

Once the order has been confirmed and an order ID has been received the user should be guided to a success page.

This order ID can also be used to update the order using our normal orders integration API at https://docs.us.zip.co/docs/api-implementation.