@coinbase/cbpay-js - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+## [2.2.0] - 2024-06-11
+- Added new `addresses` and `assets` initialization parameters to simplify `destinationWallets`
+- Marked the `destinationWallets` initialization parameter as deprecated
+- Added warning message about upcoming deprecation of the embedded experience
+- Simplified the `CoinbasePixel` class to improve widget initialization latency
+- Fix example code in README
+
 ## [2.1.0] - 2024-03-14
@@ -7,0 +14,0 @@ - Add `theme` parameter

dist/index.d.ts

@@ -1,14 +0,75 @@
-declare type DestinationWallet = {
+type DestinationWallet = {
+    /**
+     * Destination address where the purchased assets will be sent for the assets/networks listed in the other fields.
+     */
     address: string;
-    /** List of networks enabled for the associated address. All assets available per network are displayed to the user. */
+    /**
+     * List of networks enabled for the associated address. For any networks in this field, the user will be able to
+     * buy/send any asset that is supported on this network.
+     *
+     * If you only want to support a subset of assets, leave this empty and use the assets field instead.
+     */
     blockchains?: string[];
-    /** List of assets enabled for the associated address. They are appended to the available list of assets. */
+    /**
+     * List of assets enabled for the associated address. If blockchains is non-empty, these assets will be available in
+     * addition to all assets supported by the networks in the blockchains field. If blockchains is empty, only these
+     * asset will be available.
+     */
     assets?: string[];
-    /** Restrict the networks available for the associated assets. */
+    /**
+     * Restrict the networks available for assets in the assets field. If the blockchains field is empty, only these
+     * networks will be available. Otherwise these networks will be available in addition to the networks in blockchains.
+     */
     supportedNetworks?: string[];
 };
-declare type OnRampExperience = 'buy' | 'send';
-declare type BaseOnRampAppParams = {
-    /** The destination wallets supported by your application (BTC, ETH, etc). */
-    destinationWallets: DestinationWallet[];
+type OnRampExperience = 'buy' | 'send';
+type BaseOnRampAppParams = {
+    /**
+     * @deprecated Please use the addresses and assets params instead. This parameter will be removed in a future release.
+     *
+     * This parameter controls which crypto assets your user will be able to buy/send, which wallet address their asset
+     * will be delivered to, and which networks their assets will be delivered on. If this parameter is not provided, the
+     * {addresses} param must be provided.
+     *
+     * Some common examples:
+     *
+     * Support all assets that are available for sending on the base network, only on the base network:
+     *
+     * `[{ address: "0x1", blockchains: ["base"] }]`
+     *
+     * Support only USDC on either the base network or the ethereum network:
+     *
+     * `[{ address: "0x1", assets: ["USDC"], supportedNetworks: ["base", "ethereum"] }]`
+     *
+     */
+    destinationWallets?: DestinationWallet[];
+    /**
+     * The addresses parameter is a simpler way to provide the addresses customers funds should be delivered to. One of
+     * either {addresses} or {destinationWallets} must be provided.
+     *
+     * Each entry in the record represents a wallet address and the networks it is valid for. There should only be a
+     * single address for each network your app supports. Users will be able to buy/send any asset supported by any of
+     * the networks you specify. See the assets param if you want to restrict the avaialable assets.
+     *
+     * Some common examples:
+     *
+     * Support all assets that are available for sending on the base network, only on the base network:
+     *
+     * `{ "0x1": ["base"] }`
+     */
+    addresses?: Record<string, string[]>;
+    /**
+     * This optional parameter will restrict the assets available for the user to buy/send. It acts as a filter on the
+     * networks specified in the {addresses} param.
+     *
+     * Some common examples:
+     *
+     * Support only USDC on either the base network or the ethereum network:
+     *
+     * `addresses: { "0x1": ["base", "ethereum"] }, assets: ["USDC"]`
+     *
+     * The values in this list can either be asset symbols like BTC, ETH, or asset UUIDs that you can get from the Buy
+     * Options API {@link https://docs-cdp-onramp-preview.cbhq.net/onramp/docs/api-configurations/#buy-options}.
+     */
+    assets?: string[];
     /** The preset input amount as a crypto value. i.e. 0.1 ETH. This will be the initial default for all cryptocurrencies. */
@@ -30,3 +91,3 @@ presetCryptoAmount?: number;
 };
-declare type OnRampAggregatorAppParams = {
+type OnRampAggregatorAppParams = {
     quoteId: string;
@@ -39,33 +100,37 @@ defaultAsset: string;
 };
-declare type OnRampAppParams = BaseOnRampAppParams | (BaseOnRampAppParams & OnRampAggregatorAppParams);
+type OnRampAppParams = BaseOnRampAppParams | (BaseOnRampAppParams & OnRampAggregatorAppParams);
 
-declare type OpenEvent = {
+type OpenEvent = {
     eventName: 'open';
     widgetName: string;
 };
-declare type TransitionViewEvent = {
+type TransitionViewEvent = {
     eventName: 'transition_view';
     pageRoute: string;
 };
-declare type PublicErrorEvent = {
+type PublicErrorEvent = {
     eventName: 'error';
     error: any;
 };
-declare type ExitEvent = {
+type ExitEvent = {
     eventName: 'exit';
     error?: any;
 };
-declare type SuccessEvent = {
+type SuccessEvent = {
     eventName: 'success';
 };
-declare type RequestOpenUrlEvent = {
+type RequestOpenUrlEvent = {
     eventName: 'request_open_url';
     url: string;
 };
-declare type EventMetadata = OpenEvent | TransitionViewEvent | PublicErrorEvent | ExitEvent | SuccessEvent | RequestOpenUrlEvent;
+type EventMetadata = OpenEvent | TransitionViewEvent | PublicErrorEvent | ExitEvent | SuccessEvent | RequestOpenUrlEvent;
 
-declare type WidgetType = 'buy' | 'checkout';
-declare type Experience = 'embedded' | 'popup' | 'new_tab';
-declare type Theme = 'light' | 'dark';
-declare type EmbeddedContentStyles = {
+type WidgetType = 'buy' | 'checkout';
+/**
+ * Note: Two factor authentication does not work in an iframe, so the embedded experience should not be used. It will
+ * be removed in a future release.
+ */
+type Experience = 'embedded' | 'popup' | 'new_tab';
+type Theme = 'light' | 'dark';
+type EmbeddedContentStyles = {
     target?: string;
@@ -77,3 +142,3 @@ width?: string;
 };
-declare type CBPayExperienceOptions<T> = {
+type CBPayExperienceOptions<T> = {
     widgetParameters: T;
@@ -96,6 +161,5 @@ target?: string;
 
-declare type GenerateOnRampURLOptions = {
+type GenerateOnRampURLOptions = {
     /** This & destinationWallets or sessionToken are required. */
     appId?: string;
-    destinationWallets?: OnRampAppParams['destinationWallets'];
     host?: string;
@@ -105,4 +169,4 @@ /** This or appId & destinationWallets are required. */
     theme?: Theme;
-} & Omit<OnRampAppParams, 'destinationWallets'>;
-declare const generateOnRampURL: ({ host, destinationWallets, ...otherParams }: GenerateOnRampURLOptions) => string;
+} & OnRampAppParams;
+declare const generateOnRampURL: ({ host, ...props }: GenerateOnRampURLOptions) => string;
 
@@ -114,3 +178,3 @@ /**
 */
-declare type JsonObject = {
+type JsonObject = {
     [Key in string]?: JsonValue;
@@ -122,3 +186,3 @@ };
 */
-declare type JsonArray = JsonValue[];
+type JsonArray = JsonValue[];
 /**
@@ -128,3 +192,3 @@ Matches any valid JSON primitive value.
 */
-declare type JsonPrimitive = string | number | boolean | null;
+type JsonPrimitive = string | number | boolean | null;
 /**
@@ -135,22 +199,11 @@ Matches any valid JSON value.
 */
-declare type JsonValue = JsonPrimitive | JsonObject | JsonArray;
+type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 
-declare type CoinbasePixelConstructorParams = {
-    host?: string;
-    appId: string;
-    appParams: JsonObject;
-    onReady: (error?: Error) => void;
-    /** Fallback open callback when the pixel failed to load */
-    onFallbackOpen?: () => void;
-    debug?: boolean;
-    theme?: Theme;
-};
-
-declare type InternalExperienceOptions = Omit<CBPayExperienceOptions<JsonObject>, 'widgetParameters'> & {
+type InternalExperienceOptions = Omit<CBPayExperienceOptions<JsonObject>, 'widgetParameters'> & {
     widget: WidgetType;
     experienceLoggedIn: Experience;
 };
-declare type CBPayInstanceConstructorArguments = {
+type CBPayInstanceConstructorArguments = {
     appParams: JsonObject;
-} & InternalExperienceOptions & Pick<CoinbasePixelConstructorParams, 'onFallbackOpen' | 'onReady'>;
+} & InternalExperienceOptions;
 interface CBPayInstanceType {
@@ -168,4 +221,4 @@ open: () => void;
 
-declare type InitOnRampParams = CBPayExperienceOptions<OnRampAppParams>;
-declare type InitOnRampCallback = {
+type InitOnRampParams = CBPayExperienceOptions<OnRampAppParams>;
+type InitOnRampCallback = {
     (error: Error, instance: null): void;
@@ -188,5 +241,5 @@ (error: null, instance: CBPayInstanceType): void;
 }
-declare type MessageCode = `${MessageCodes}`;
-declare type MessageData = JsonObject;
-declare type PostMessageData = {
+type MessageCode = `${MessageCodes}`;
+type MessageData = JsonObject;
+type PostMessageData = {
     eventName: MessageCode;
@@ -196,3 +249,3 @@ data?: MessageData;
 declare const onBroadcastedPostMessage: (messageCode: MessageCode, { onMessage: callback, shouldUnsubscribe, allowedOrigin, onValidateOrigin, }: {
-    onMessage: (data?: JsonObject | undefined) => void;
+    onMessage: (data?: MessageData) => void;
     shouldUnsubscribe?: boolean | undefined;
@@ -202,3 +255,3 @@ allowedOrigin?: string | undefined;
 }) => (() => void);
-declare type SdkTarget = Window | {
+type SdkTarget = Window | {
     postMessage: typeof window.postMessage;
@@ -205,0 +258,0 @@ };

dist/index.js

 "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-var _regeneratorRuntime = /*#__PURE__*/ _interopRequireDefault(require("regenerator-runtime"));
-function _arrayLikeToArray(arr, len) {
+function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -11,4 +7,4 @@ for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
 }
-function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
 }
@@ -29,3 +25,3 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
 }
-function _asyncToGenerator(fn) {
+function _async_to_generator(fn) {
     return function() {
@@ -45,3 +41,3 @@ var self = this, args = arguments;
 }
-function _classCallCheck(instance, Constructor) {
+function _class_call_check(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -51,3 +47,3 @@ throw new TypeError("Cannot call a class as a function");
 }
-function _defineProperty(obj, key, value) {
+function _define_property(obj, key, value) {
     if (key in obj) {
@@ -65,14 +61,9 @@ Object.defineProperty(obj, key, {
 }
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _iterableToArray(iter) {
+function _iterable_to_array(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _nonIterableSpread() {
+function _non_iterable_spread() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _objectSpread(target) {
+function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
@@ -87,3 +78,3 @@ var source = arguments[i] != null ? arguments[i] : {};
         ownKeys.forEach(function(key) {
-            _defineProperty(target, key, source[key]);
+            _define_property(target, key, source[key]);
         });
@@ -106,3 +97,3 @@ }
 }
-function _objectSpreadProps(target, source) {
+function _object_spread_props(target, source) {
     source = source != null ? source : {};
@@ -118,5 +109,5 @@ if (Object.getOwnPropertyDescriptors) {
 }
-function _objectWithoutProperties(source, excluded) {
+function _object_without_properties(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var target = _object_without_properties_loose(source, excluded);
     var key, i;
@@ -134,3 +125,3 @@ if (Object.getOwnPropertySymbols) {
 }
-function _objectWithoutPropertiesLoose(source, excluded) {
+function _object_without_properties_loose(source, excluded) {
     if (source == null) return {};
@@ -147,20 +138,122 @@ var target = {};
 }
-function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
 }
-var _typeof = function(obj) {
+function _type_of(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-};
-function _unsupportedIterableToArray(o, minLen) {
+}
+function _unsupported_iterable_to_array(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
+function _ts_generator(thisArg, body) {
+    var f, y, t, g, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    };
+    return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "return": verb(2)
+    }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(_)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+function _nullishCoalesce(lhs, rhsFn) {
+    if (lhs != null) {
+        return lhs;
+    } else {
+        return rhsFn();
+    }
+}
 function _optionalChain(ops) {
@@ -174,9 +267,9 @@ var lastAccessLHS = undefined;
         i += 2;
-        if ((op === "optionalAccess" || op === "optionalCall") && value == null) {
+        if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
             return undefined;
         }
-        if (op === "access" || op === "optionalAccess") {
+        if (op === 'access' || op === 'optionalAccess') {
             lastAccessLHS = value;
             value = fn(value);
-        } else if (op === "call" || op === "optionalCall") {
+        } else if (op === 'call' || op === 'optionalCall') {
             var _value;
@@ -189,3 +282,3 @@ value = fn(function() {
                     lastAccessLHS
-                ].concat(_toConsumableArray(args)));
+                ].concat(_to_consumable_array(args)));
             });
@@ -213,3 +306,3 @@ lastAccessLHS = undefined;
 var __publicField = function(obj, key, value) {
-    __defNormalProp(obj, (typeof key === "undefined" ? "undefined" : _typeof(key)) !== "symbol" ? key + "" : key, value);
+    __defNormalProp(obj, (typeof key === "undefined" ? "undefined" : _type_of(key)) !== "symbol" ? key + "" : key, value);
     return value;
@@ -221,15 +314,24 @@ };
 var generateOnRampURL = /* @__PURE__ */ __name(function(_param) {
-    var _host = _param.host, host = _host === void 0 ? DEFAULT_HOST : _host, destinationWallets = _param.destinationWallets, otherParams = _objectWithoutProperties(_param, [
-        "host",
-        "destinationWallets"
+    var _param_host = _param.host, host = _param_host === void 0 ? DEFAULT_HOST : _param_host, props = _object_without_properties(_param, [
+        "host"
     ]);
     var url = new URL(host);
     url.pathname = "/buy/select-asset";
-    if (destinationWallets !== void 0) {
-        url.searchParams.append("destinationWallets", JSON.stringify(destinationWallets));
+    if (props.destinationWallets && props.addresses) {
+        throw new Error("Only one of destinationWallets or addresses can be provided");
+    } else if (!props.destinationWallets && !props.addresses) {
+        throw new Error("One of destinationWallets or addresses must be provided");
     }
-    Object.keys(otherParams).forEach(function(key) {
-        var value = otherParams[key];
+    Object.keys(props).forEach(function(key) {
+        var value = props[key];
         if (value !== void 0) {
-            url.searchParams.append(key, value.toString());
+            if ([
+                "string",
+                "number",
+                "boolean"
+            ].includes(typeof value === "undefined" ? "undefined" : _type_of(value))) {
+                url.searchParams.append(key, value.toString());
+            } else {
+                url.searchParams.append(key, JSON.stringify(value));
+            }
         }
@@ -243,3 +345,3 @@ });
 var createEmbeddedContent = /* @__PURE__ */ __name(function(param) {
-    var url = param.url, _width = param.width, width = _width === void 0 ? "100%" : _width, _height = param.height, height = _height === void 0 ? "100%" : _height, _position = param.position, position = _position === void 0 ? "fixed" : _position, _top = param.top, top = _top === void 0 ? "0px" : _top;
+    var url = param.url, _param_width = param.width, width = _param_width === void 0 ? "100%" : _param_width, _param_height = param.height, height = _param_height === void 0 ? "100%" : _param_height, _param_position = param.position, position = _param_position === void 0 ? "fixed" : _param_position, _param_top = param.top, top = _param_top === void 0 ? "0px" : _param_top;
     var iframe = document.createElement("iframe");
@@ -271,28 +373,28 @@ iframe.style.border = "unset";
 var onBroadcastedPostMessage = /* @__PURE__ */ __name(function(messageCode, param) {
-    var callback = param.onMessage, _shouldUnsubscribe = param.shouldUnsubscribe, shouldUnsubscribe = _shouldUnsubscribe === void 0 ? true : _shouldUnsubscribe, allowedOrigin = param.allowedOrigin, _onValidateOrigin = param.onValidateOrigin, onValidateOrigin = _onValidateOrigin === void 0 ? /* @__PURE__ */ __name(function() {
+    var callback = param.onMessage, _param_shouldUnsubscribe = param.shouldUnsubscribe, shouldUnsubscribe = _param_shouldUnsubscribe === void 0 ? true : _param_shouldUnsubscribe, allowedOrigin = param.allowedOrigin, _param_onValidateOrigin = param.onValidateOrigin, onValidateOrigin = _param_onValidateOrigin === void 0 ? /* @__PURE__ */ __name(function() {
         return Promise.resolve(true);
-    }, "onValidateOrigin") : _onValidateOrigin;
+    }, "onValidateOrigin") : _param_onValidateOrigin;
     var onMessage = /* @__PURE__ */ __name(function(e) {
-        var ref = parsePostMessage(e.data), eventName = ref.eventName, data = ref.data;
+        var _parsePostMessage = parsePostMessage(e.data), eventName = _parsePostMessage.eventName, data = _parsePostMessage.data;
         var isOriginAllowed = !allowedOrigin || e.origin === allowedOrigin;
         if (eventName === messageCode) {
-            void _asyncToGenerator(/*#__PURE__*/ _regeneratorRuntime.default.mark(function _callee() {
-                return _regeneratorRuntime.default.wrap(function _callee$(_ctx) {
-                    while(1)switch(_ctx.prev = _ctx.next){
+            void _async_to_generator(function() {
+                var _tmp;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
                         case 0:
-                            _ctx.t0 = isOriginAllowed;
-                            if (!_ctx.t0) {
-                                _ctx.next = 5;
-                                break;
-                            }
-                            _ctx.next = 4;
-                            return onValidateOrigin(e.origin);
-                        case 4:
-                            _ctx.t0 = _ctx.sent;
-                        case 5:
-                            if (!_ctx.t0) {
-                                _ctx.next = 7;
-                                break;
-                            }
-                            {
+                            _tmp = isOriginAllowed;
+                            if (!_tmp) return [
+                                3,
+                                2
+                            ];
+                            return [
+                                4,
+                                onValidateOrigin(e.origin)
+                            ];
+                        case 1:
+                            _tmp = _state.sent();
+                            _state.label = 2;
+                        case 2:
+                            if (_tmp) {
                                 callback(data);
@@ -303,8 +405,8 @@ if (shouldUnsubscribe) {
                             }
-                        case 7:
-                        case "end":
-                            return _ctx.stop();
+                            return [
+                                2
+                            ];
                     }
-                }, _callee);
-            }))();
+                });
+            })();
         }
@@ -338,7 +440,7 @@ }, "onMessage");
             win,
-            "access",
+            'access',
             function(_) {
                 return _.ReactNativeWebView;
             },
-            "optionalAccess",
+            'optionalAccess',
             function(_2) {
@@ -353,3 +455,3 @@ return _2.postMessage;
 var broadcastPostMessage = /* @__PURE__ */ __name(function(win, eventName) {
-    var ref = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, _allowedOrigin = ref.allowedOrigin, allowedOrigin = _allowedOrigin === void 0 ? "*" : _allowedOrigin, data = ref.data;
+    var _ref = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, _ref_allowedOrigin = _ref.allowedOrigin, allowedOrigin = _ref_allowedOrigin === void 0 ? "*" : _ref_allowedOrigin, data = _ref.data;
     var message = formatPostMessage(eventName, data);
@@ -377,5 +479,2 @@ win.postMessage(message, allowedOrigin);
 // src/utils/CoinbasePixel.ts
-var PIXEL_PATH = "/embed";
-var DEFAULT_MAX_LOAD_TIMEOUT = 5e3;
-var PIXEL_ID = "coinbase-sdk-connect";
 var PopupSizes = {
@@ -392,57 +491,33 @@ signin: {
 var CoinbasePixel = function CoinbasePixel(param) {
-    var _host = param.host, host = _host === void 0 ? DEFAULT_HOST : _host, appId = param.appId, appParams = param.appParams, onReady = param.onReady, onFallbackOpen = param.onFallbackOpen, debug = param.debug, theme = param.theme;
     var _this = this;
-    _classCallCheck(this, CoinbasePixel);
-    __publicField(this, "state", "loading");
-    __publicField(this, "nonce", "");
+    var _param_host = param.host, host = _param_host === void 0 ? DEFAULT_HOST : _param_host, appId = param.appId, appParams = param.appParams, debug = param.debug, theme = param.theme;
+    var _this1 = this;
+    _class_call_check(this, CoinbasePixel);
+    __publicField(this, "debug");
+    __publicField(this, "host");
+    __publicField(this, "appId");
     __publicField(this, "eventStreamListeners", {});
     __publicField(this, "unsubs", []);
-    __publicField(this, "isLoggedIn", false);
-    __publicField(this, "openExperience", /* @__PURE__ */ __name(function(options) {
-        _this.log("Attempting to open experience", {
-            state: _this.state
-        });
-        if (_this.state === "waiting_for_response") {
-            return;
-        }
-        if (_this.state === "loading") {
-            return;
-        }
-        if (_this.state === "failed") {
-            _optionalChain([
-                _this,
-                "access",
-                function(_3) {
-                    return _3.onFallbackOpen;
-                },
-                "optionalCall",
-                function(_4) {
-                    return _4();
-                }
-            ]);
-            return;
-        }
-        if (!_this.nonce) {
-            throw new Error("Attempted to open CB Pay experience without nonce");
-        }
-        var nonce = _this.nonce;
-        _this.nonce = "";
+    __publicField(this, "appParams");
+    __publicField(this, "removeEventListener");
+    __publicField(this, "theme");
+    /** Opens the CB Pay experience */ __publicField(this, "openExperience", /* @__PURE__ */ __name(function(options) {
+        _this.log("Attempting to open experience");
         _this.setupExperienceListeners(options);
-        var path = options.path, experienceLoggedIn = options.experienceLoggedIn, experienceLoggedOut = options.experienceLoggedOut, embeddedContentStyles = options.embeddedContentStyles;
-        var widgetUrl = new URL("".concat(_this.host).concat(path));
-        widgetUrl.searchParams.append("appId", _this.appId);
-        widgetUrl.searchParams.append("type", "secure_standalone");
-        if (_this.theme) {
-            widgetUrl.searchParams.append("theme", _this.theme);
-        }
-        var experience = _this.isLoggedIn ? experienceLoggedIn : experienceLoggedOut || experienceLoggedIn;
-        widgetUrl.searchParams.append("nonce", nonce);
-        var url = widgetUrl.toString();
+        var experienceLoggedIn = options.experienceLoggedIn, experienceLoggedOut = options.experienceLoggedOut, embeddedContentStyles = options.embeddedContentStyles;
+        var experience = experienceLoggedOut || experienceLoggedIn;
+        var url = generateOnRampURL(_object_spread({
+            appId: _this.appId,
+            host: _this.host,
+            theme: _nullishCoalesce(_this.theme, function() {
+                return void 0;
+            })
+        }, _this.appParams));
         _this.log("Opening experience", {
-            experience: experience,
-            isLoggedIn: _this.isLoggedIn
+            experience: experience
         });
         if (experience === "embedded") {
+            _this.log("DEPRECATION WARNING: Two factor authentication does not work in an iframe, so the embedded experience should not be used. It will be removed in a future release");
             var openEmbeddedExperience = /* @__PURE__ */ __name(function() {
-                var embedded = createEmbeddedContent(_objectSpread({
+                var embedded = createEmbeddedContent(_object_spread({
                     url: url
@@ -452,5 +527,5 @@ }, embeddedContentStyles));
                     embeddedContentStyles,
-                    "optionalAccess",
-                    function(_5) {
-                        return _5.target;
+                    'optionalAccess',
+                    function(_3) {
+                        return _3.target;
                     }
@@ -460,23 +535,23 @@ ])) {
                         document,
-                        "access",
-                        function(_6) {
-                            return _6.querySelector;
+                        'access',
+                        function(_4) {
+                            return _4.querySelector;
                         },
-                        "call",
-                        function(_7) {
-                            return _7(_optionalChain([
+                        'call',
+                        function(_5) {
+                            return _5(_optionalChain([
                                 embeddedContentStyles,
-                                "optionalAccess",
-                                function(_8) {
-                                    return _8.target;
+                                'optionalAccess',
+                                function(_6) {
+                                    return _6.target;
                                 }
                             ]));
                         },
-                        "optionalAccess",
-                        function(_9) {
-                            return _9.replaceChildren;
+                        'optionalAccess',
+                        function(_7) {
+                            return _7.replaceChildren;
                         },
-                        "call",
-                        function(_10) {
-                            return _10(embedded);
+                        'call',
+                        function(_8) {
+                            return _8(embedded);
                         }
@@ -488,20 +563,16 @@ ]);
             }, "openEmbeddedExperience");
-            if (!_this.isLoggedIn) {
-                _this.startDirectSignin(openEmbeddedExperience);
-            } else {
-                openEmbeddedExperience();
-            }
+            _this.startDirectSignin(openEmbeddedExperience);
         } else if (experience === "popup" && _optionalChain([
             window,
-            "access",
-            function(_11) {
-                return _11.chrome;
+            'access',
+            function(_9) {
+                return _9.chrome;
             },
-            "optionalAccess",
-            function(_12) {
-                return _12.windows;
+            'optionalAccess',
+            function(_10) {
+                return _10.windows;
             },
-            "optionalAccess",
-            function(_13) {
-                return _13.create;
+            'optionalAccess',
+            function(_11) {
+                return _11.create;
             }
@@ -519,8 +590,8 @@ ])) {
             }, function(winRef) {
-                _this.addEventStreamListener("open", function() {
+                var onOpenCallback = /* @__PURE__ */ __name(function() {
                     if (_optionalChain([
                         winRef,
-                        "optionalAccess",
-                        function(_14) {
-                            return _14.id;
+                        'optionalAccess',
+                        function(_12) {
+                            return _12.id;
                         }
@@ -534,18 +605,20 @@ ])) {
                         });
+                        _this.removeEventStreamListener("open", onOpenCallback);
                     }
-                });
+                }, "onOpenCallback");
+                _this.addEventStreamListener("open", onOpenCallback);
             });
         } else if (experience === "new_tab" && _optionalChain([
             window,
-            "access",
-            function(_15) {
-                return _15.chrome;
+            'access',
+            function(_13) {
+                return _13.chrome;
             },
-            "optionalAccess",
-            function(_16) {
-                return _16.tabs;
+            'optionalAccess',
+            function(_14) {
+                return _14.tabs;
             },
-            "optionalAccess",
-            function(_17) {
-                return _17.create;
+            'optionalAccess',
+            function(_15) {
+                return _15.create;
             }
@@ -559,7 +632,2 @@ ])) {
         }
-        var onOpen = /* @__PURE__ */ __name(function() {
-            _this.sendAppParams();
-            _this.removeEventStreamListener("open", onOpen);
-        }, "onOpen");
-        _this.addEventStreamListener("open", onOpen);
     }, "openExperience"));
@@ -569,17 +637,17 @@ __publicField(this, "endExperience", /* @__PURE__ */ __name(function() {
             document,
-            "access",
+            'access',
+            function(_16) {
+                return _16.getElementById;
+            },
+            'call',
+            function(_17) {
+                return _17(EMBEDDED_IFRAME_ID);
+            },
+            'optionalAccess',
             function(_18) {
-                return _18.getElementById;
+                return _18.remove;
             },
-            "call",
+            'call',
             function(_19) {
-                return _19(EMBEDDED_IFRAME_ID);
-            },
-            "optionalAccess",
-            function(_20) {
-                return _20.remove;
-            },
-            "call",
-            function(_21) {
-                return _21();
+                return _19();
             }
@@ -589,21 +657,2 @@ ]);
     __publicField(this, "destroy", /* @__PURE__ */ __name(function() {
-        _optionalChain([
-            document,
-            "access",
-            function(_22) {
-                return _22.getElementById;
-            },
-            "call",
-            function(_23) {
-                return _23(PIXEL_ID);
-            },
-            "optionalAccess",
-            function(_24) {
-                return _24.remove;
-            },
-            "call",
-            function(_25) {
-                return _25();
-            }
-        ]);
         _this.unsubs.forEach(function(unsub) {
@@ -613,181 +662,8 @@ return unsub();
     }, "destroy"));
-    __publicField(this, "addPixelReadyListener", /* @__PURE__ */ __name(function() {
-        _this.onMessage("pixel_ready", {
-            shouldUnsubscribe: false,
-            onMessage: function(data) {
-                _this.log("Received message: pixel_ready");
-                _this.isLoggedIn = !!_optionalChain([
-                    data,
-                    "optionalAccess",
-                    function(_26) {
-                        return _26.isLoggedIn;
-                    }
-                ]);
-                _optionalChain([
-                    _this,
-                    "access",
-                    function(_27) {
-                        return _27.removeErrorListener;
-                    },
-                    "optionalCall",
-                    function(_28) {
-                        return _28();
-                    }
-                ]);
-                _this.sendAppParams(function() {
-                    _optionalChain([
-                        _this,
-                        "access",
-                        function(_29) {
-                            return _29.onReadyCallback;
-                        },
-                        "optionalCall",
-                        function(_30) {
-                            return _30();
-                        }
-                    ]);
-                });
-            }
-        });
-    }, "addPixelReadyListener"));
-    __publicField(this, "addErrorListener", /* @__PURE__ */ __name(function() {
-        _this.removeErrorListener = _this.onMessage("error", {
-            shouldUnsubscribe: true,
-            onMessage: function(data) {
-                _this.log("Received message: error");
-                if (data) {
-                    var message = typeof data === "string" ? data : JSON.stringify(data);
-                    _optionalChain([
-                        _this,
-                        "access",
-                        function(_31) {
-                            return _31.onReadyCallback;
-                        },
-                        "optionalCall",
-                        function(_32) {
-                            return _32(new Error(message));
-                        }
-                    ]);
-                }
-            }
-        });
-    }, "addErrorListener"));
-    __publicField(this, "embedPixel", /* @__PURE__ */ __name(function() {
-        _optionalChain([
-            document,
-            "access",
-            function(_33) {
-                return _33.getElementById;
-            },
-            "call",
-            function(_34) {
-                return _34(PIXEL_ID);
-            },
-            "optionalAccess",
-            function(_35) {
-                return _35.remove;
-            },
-            "call",
-            function(_36) {
-                return _36();
-            }
-        ]);
-        var pixel = createPixel({
-            host: _this.host,
-            appId: _this.appId
-        });
-        pixel.onerror = _this.onFailedToLoad;
-        _this.pixelIframe = pixel;
-        document.body.appendChild(pixel);
-    }, "embedPixel"));
-    __publicField(this, "onFailedToLoad", /* @__PURE__ */ __name(function() {
-        _this.state = "failed";
-        if (_this.onFallbackOpen) {
-            if (_this.debug) {
-                console.warn("Failed to load CB Pay pixel. Falling back to opening in new tab.");
-            }
-            _optionalChain([
-                _this,
-                "access",
-                function(_37) {
-                    return _37.onReadyCallback;
-                },
-                "optionalCall",
-                function(_38) {
-                    return _38();
-                }
-            ]);
-        } else {
-            var error = new Error("Failed to load CB Pay pixel");
-            if (_this.debug) {
-                console.error(error);
-            }
-            _optionalChain([
-                _this,
-                "access",
-                function(_39) {
-                    return _39.onReadyCallback;
-                },
-                "optionalCall",
-                function(_40) {
-                    return _40(error);
-                }
-            ]);
-        }
-    }, "onFailedToLoad"));
-    __publicField(this, "sendAppParams", /* @__PURE__ */ __name(function(callback) {
-        if (_optionalChain([
-            _this,
-            "access",
-            function(_41) {
-                return _41.pixelIframe;
-            },
-            "optionalAccess",
-            function(_42) {
-                return _42.contentWindow;
-            }
-        ])) {
-            _this.log("Sending message: app_params");
-            _this.onMessage("on_app_params_nonce", {
-                onMessage: function(data) {
-                    _this.state = "ready";
-                    _this.nonce = _optionalChain([
-                        data,
-                        "optionalAccess",
-                        function(_43) {
-                            return _43.nonce;
-                        }
-                    ]) || "";
-                    _optionalChain([
-                        callback,
-                        "optionalCall",
-                        function(_44) {
-                            return _44();
-                        }
-                    ]);
-                }
-            });
-            _this.state = "waiting_for_response";
-            broadcastPostMessage(_this.pixelIframe.contentWindow, "app_params", {
-                data: _this.appParams
-            });
-        } else {
-            console.error("Failed to find pixel content window");
-            _this.state = "failed";
-            _optionalChain([
-                _this,
-                "access",
-                function(_45) {
-                    return _45.onFallbackOpen;
-                },
-                "optionalCall",
-                function(_46) {
-                    return _46();
-                }
-            ]);
-        }
-    }, "sendAppParams"));
     __publicField(this, "setupExperienceListeners", /* @__PURE__ */ __name(function(param) {
         var onSuccess = param.onSuccess, onExit = param.onExit, onEvent = param.onEvent, onRequestedUrl = param.onRequestedUrl;
-        _this.onMessage("event", {
+        if (_this.removeEventListener) {
+            _this.removeEventListener();
+        }
+        _this.removeEventListener = _this.onMessage("event", {
             shouldUnsubscribe: false,
@@ -798,22 +674,22 @@ onMessage: function(data) {
                     _this,
-                    "access",
-                    function(_47) {
-                        return _47.eventStreamListeners;
+                    'access',
+                    function(_20) {
+                        return _20.eventStreamListeners;
                     },
-                    "access",
-                    function(_48) {
-                        return _48[metadata.eventName];
+                    'access',
+                    function(_21) {
+                        return _21[metadata.eventName];
                     },
-                    "optionalAccess",
-                    function(_49) {
-                        return _49.forEach;
+                    'optionalAccess',
+                    function(_22) {
+                        return _22.forEach;
                     },
-                    "call",
-                    function(_50) {
-                        return _50(function(cb) {
+                    'call',
+                    function(_23) {
+                        return _23(function(cb) {
                             return _optionalChain([
                                 cb,
-                                "optionalCall",
-                                function(_51) {
-                                    return _51();
+                                'optionalCall',
+                                function(_24) {
+                                    return _24();
                                 }
@@ -827,5 +703,5 @@ ]);
                         onSuccess,
-                        "optionalCall",
-                        function(_52) {
-                            return _52();
+                        'optionalCall',
+                        function(_25) {
+                            return _25();
                         }
@@ -837,5 +713,5 @@ ]);
                         onExit,
-                        "optionalCall",
-                        function(_53) {
-                            return _53(metadata.error);
+                        'optionalCall',
+                        function(_26) {
+                            return _26(metadata.error);
                         }
@@ -847,5 +723,5 @@ ]);
                         onRequestedUrl,
-                        "optionalCall",
-                        function(_54) {
-                            return _54(metadata.url);
+                        'optionalCall',
+                        function(_27) {
+                            return _27(metadata.url);
                         }
@@ -856,5 +732,5 @@ ]);
                     onEvent,
-                    "optionalCall",
-                    function(_55) {
-                        return _55(data);
+                    'optionalCall',
+                    function(_28) {
+                        return _28(data);
                     }
@@ -875,9 +751,9 @@ ]);
                     signinWinRef,
-                    "optionalAccess",
-                    function(_56) {
-                        return _56.close;
+                    'optionalAccess',
+                    function(_29) {
+                        return _29.close;
                     },
-                    "call",
-                    function(_57) {
-                        return _57();
+                    'call',
+                    function(_30) {
+                        return _30();
                     }
@@ -893,17 +769,17 @@ ]);
                 _this,
-                "access",
-                function(_58) {
-                    return _58.eventStreamListeners;
+                'access',
+                function(_31) {
+                    return _31.eventStreamListeners;
                 },
-                "access",
-                function(_59) {
-                    return _59[name];
+                'access',
+                function(_32) {
+                    return _32[name];
                 },
-                "optionalAccess",
-                function(_60) {
-                    return _60.push;
+                'optionalAccess',
+                function(_33) {
+                    return _33.push;
                 },
-                "call",
-                function(_61) {
-                    return _61(cb);
+                'call',
+                function(_34) {
+                    return _34(cb);
                 }
@@ -921,17 +797,17 @@ ]);
                 _this,
-                "access",
-                function(_62) {
-                    return _62.eventStreamListeners;
+                'access',
+                function(_35) {
+                    return _35.eventStreamListeners;
                 },
-                "access",
-                function(_63) {
-                    return _63[name];
+                'access',
+                function(_36) {
+                    return _36[name];
                 },
-                "optionalAccess",
-                function(_64) {
-                    return _64.filter;
+                'optionalAccess',
+                function(_37) {
+                    return _37.filter;
                 },
-                "call",
-                function(_65) {
-                    return _65(function(cb) {
+                'call',
+                function(_38) {
+                    return _38(function(cb) {
                         return cb !== callback;
@@ -948,6 +824,6 @@ });
         }
-        var unsubFxn = onBroadcastedPostMessage(args[0], _objectSpread({
-            allowedOrigin: _this.host
+        var unsubFxn = onBroadcastedPostMessage(args[0], _object_spread({
+            allowedOrigin: _this1.host
         }, args[1]));
-        _this.unsubs.push(unsubFxn);
+        _this1.unsubs.push(unsubFxn);
         return unsubFxn;
@@ -959,7 +835,7 @@ }, "onMessage"));
         }
-        if (_this.debug) {
+        if (_this1.debug) {
             var _console;
             (_console = console).log.apply(_console, [
                 "[CBPAY]"
-            ].concat(_toConsumableArray(args)));
+            ].concat(_to_consumable_array(args)));
         }
@@ -970,31 +846,6 @@ }, "log"));
     this.appParams = appParams;
-    this.onReadyCallback = onReady;
-    this.onFallbackOpen = onFallbackOpen;
     this.debug = debug || false;
     this.theme = theme;
-    this.addPixelReadyListener();
-    this.addErrorListener();
-    this.embedPixel();
-    setTimeout(function() {
-        if (_this.state !== "ready") {
-            _this.onFailedToLoad();
-        }
-    }, DEFAULT_MAX_LOAD_TIMEOUT);
 };
 __name(CoinbasePixel, "CoinbasePixel");
-function createPixel(param) {
-    var host = param.host, appId = param.appId;
-    var pixel = document.createElement("iframe");
-    pixel.style.border = "unset";
-    pixel.style.borderWidth = "0";
-    pixel.style.width = "0";
-    pixel.style.height = "0";
-    pixel.style.height = "0";
-    pixel.id = PIXEL_ID;
-    var url = new URL("".concat(host).concat(PIXEL_PATH));
-    url.searchParams.append("appId", appId);
-    pixel.src = url.toString();
-    return pixel;
-}
-__name(createPixel, "createPixel");
 function openWindow(url, experience) {
@@ -1011,5 +862,7 @@ return window.open(url, "Coinbase", experience === "popup" ? "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, height=".concat(PopupSizes.signin.height, ",width=").concat(PopupSizes.signin.width) : void 0);
     var _this = this;
-    _classCallCheck(this, CBPayInstance);
+    _class_call_check(this, CBPayInstance);
+    __publicField(this, "pixel");
+    __publicField(this, "options");
     __publicField(this, "open", /* @__PURE__ */ __name(function() {
-        var _options = _this.options, widget = _options.widget, experienceLoggedIn = _options.experienceLoggedIn, experienceLoggedOut = _options.experienceLoggedOut, embeddedContentStyles = _options.embeddedContentStyles, onExit = _options.onExit, onSuccess = _options.onSuccess, onEvent = _options.onEvent, onRequestedUrl = _options.onRequestedUrl, closeOnSuccess = _options.closeOnSuccess, closeOnExit = _options.closeOnExit;
+        var _this_options = _this.options, widget = _this_options.widget, experienceLoggedIn = _this_options.experienceLoggedIn, experienceLoggedOut = _this_options.experienceLoggedOut, embeddedContentStyles = _this_options.embeddedContentStyles, onExit = _this_options.onExit, onSuccess = _this_options.onSuccess, onEvent = _this_options.onEvent, onRequestedUrl = _this_options.onRequestedUrl, closeOnSuccess = _this_options.closeOnSuccess, closeOnExit = _this_options.closeOnExit;
         _this.pixel.openExperience({
@@ -1023,5 +876,5 @@ path: widgetRoutes[widget],
                     onExit,
-                    "optionalCall",
-                    function(_66) {
-                        return _66();
+                    'optionalCall',
+                    function(_39) {
+                        return _39();
                     }
@@ -1036,5 +889,5 @@ ]);
                     onSuccess,
-                    "optionalCall",
-                    function(_67) {
-                        return _67();
+                    'optionalCall',
+                    function(_40) {
+                        return _40();
                     }
@@ -1054,4 +907,4 @@ ]);
     this.options = options;
-    this.pixel = new CoinbasePixel(_objectSpreadProps(_objectSpread({}, options), {
-        appParams: _objectSpread({
+    this.pixel = new CoinbasePixel(_object_spread_props(_object_spread({}, options), {
+        appParams: _object_spread({
             widget: options.widget
@@ -1070,26 +923,12 @@ }, options.appParams)
 var initOnRamp = /* @__PURE__ */ __name(function(_param, callback) {
-    var _experienceLoggedIn = _param.experienceLoggedIn, experienceLoggedIn = _experienceLoggedIn === void 0 ? "embedded" : _experienceLoggedIn, widgetParameters = _param.widgetParameters, options = _objectWithoutProperties(_param, [
+    var _param_experienceLoggedIn = _param.experienceLoggedIn, experienceLoggedIn = _param_experienceLoggedIn === void 0 ? "new_tab" : _param_experienceLoggedIn, widgetParameters = _param.widgetParameters, options = _object_without_properties(_param, [
         "experienceLoggedIn",
         "widgetParameters"
     ]);
-    var instance = new CBPayInstance(_objectSpreadProps(_objectSpread({}, options), {
+    var instance = new CBPayInstance(_object_spread_props(_object_spread({}, options), {
         widget: "buy",
         experienceLoggedIn: experienceLoggedIn,
-        appParams: widgetParameters,
-        onReady: function(error) {
-            if (error) {
-                callback(error, null);
-            } else {
-                callback(null, instance);
-            }
-        },
-        onFallbackOpen: function() {
-            var url = generateOnRampURL(_objectSpread({
-                appId: options.appId,
-                host: options.host,
-                theme: options.theme
-            }, widgetParameters));
-            window.open(url);
-        }
+        appParams: widgetParameters
     }));
+    callback(null, instance);
 }, "initOnRamp");
@@ -1096,0 +935,0 @@ // src/utils/events.ts

package.json

 {
   "name": "@coinbase/cbpay-js",
-  "version": "2.1.0",
+  "repository": "https://github.com/coinbase/cbpay-js",
+  "version": "2.2.0",
   "license": "MIT",
@@ -43,2 +44,3 @@ "main": "dist/index.js",
     "babel-jest": "^27.5.1",
+    "@babel/core": "^7.0.0",
     "eslint": "^6.8.0",
@@ -53,3 +55,4 @@ "eslint-config-prettier": "^8.4.0",
     "tsup": "^6.2.2",
-    "typescript": "^4.4.4"
+    "typescript": "^4.4.4",
+    "tslint": "^6.0.0"
   },
@@ -56,0 +59,0 @@ "engines": {

README.md

 # @coinbase/cbpay-js
 
-The Coinbase Pay JS SDK provides a fiat onramp experience for approved partners. Wallet providers and dapps can leverage Coinbase Pay and let their users top up their self-custody wallets.
+The Coinbase Onramp JS SDK contains helper methods to simplify integrating with our fiat onramp. Wallet providers and dapps can leverage Coinbase Onramp and let their users top up their self-custody wallets.
 
 ## Documentation
 
-See the [Coinbase Pay documentation](https://docs.cloud.coinbase.com/pay-sdk) for configuration options. Developers interested in using Coinbase Pay will need to contact the Coinbase Pay team to get their domains/extension IDs added to the Coinbase Pay allowlist. Please contact the Coinbase Pay team by filling [this form](https://www.coinbase.com/cloud/cloud-interest) and selecting “Coinbase Pay SDK” in the product dropdown menu.
+See the [Coinbase Onramp documentation](https://docs.cdp.coinbase.com/onramp/docs/getting-started/) for instructions on how to onboard to Coinbase Onramp and get started.
 
@@ -43,24 +43,23 @@ ## Installation
 const options = {
-  appId: 'your_app_id',
+  appId: '<Your Project ID obtained from Coinbase Developer Platform>',
   widgetParameters: {
-    destinationWallets: [{
-      address: '0xabc123',
-      blockchains: ['ethereum', 'avalanche-c-chain'],
-    }],
+    // Specify the addresses and which networks they support
+    addresses: { '0x0': ['ethereum','base'], 'bc1': ['bitcoin']},
+    // Filter the available assets on the above networks to just these ones
+    assets: ['ETH','USDC','BTC'],
   },
-  closeOnExit: true,
-  closeOnSuccess: true,
-  embeddedContentStyles: {
-    target: '#target-area',
+  onSuccess: () => {
+    console.log('success');
   },
   onExit: () => {
-    alert('On Exit');
+    console.log('exit');
   },
-  onSuccess: () => {
-    alert('On Success');
+  onEvent: (event) => {
+    console.log('event', event);
   },
-  onEvent: (metadata) => {
-    console.log(metadata);
-  },
-}
+  experienceLoggedIn: 'popup',
+  experienceLoggedOut: 'popup',
+  closeOnExit: true,
+  closeOnSuccess: true,
+};
 
@@ -75,5 +74,2 @@ // Initialize the CB Pay instance
 onrampInstance.open();
-
-// When button unmounts destroy the instance
-onrampInstance.destroy();
 ```
@@ -84,18 +80,16 @@
 ```tsx
-import type { CBPayInstanceType, InitOnRampParams } from '@coinbase/cbpay-js';
-import { initOnRamp } from '@coinbase/cbpay-js';
+import { CBPayInstanceType, initOnRamp } from "@coinbase/cbpay-js";
+import { useEffect, useState } from "react";
 
-const PayWithCoinbaseButton: React.FC = () => {
-  const [onrampInstance, setOnrampInstance] = useState<CBPayInstanceType | undefined>();
+export const PayWithCoinbaseButton: React.FC = () => {
+  const [onrampInstance, setOnrampInstance] = useState<CBPayInstanceType | null>();
 
   useEffect(() => {
     initOnRamp({
-      appId: 'your_app_id',
+      appId: '<Your Project ID obtained from Coinbase Developer Platform>',
       widgetParameters: {
-        destinationWallets: [
-          {
-            address: '0xabc123',
-            blockchains: ['ethereum', 'avalanche-c-chain'],
-          },
-        ],
+        // Specify the addresses and which networks they support
+        addresses: { '0x0': ['ethereum','base'], 'bc1': ['bitcoin']},
+        // Filter the available assets on the above networks to just these ones
+        assets: ['ETH','USDC','BTC'],
       },
@@ -119,2 +113,3 @@ onSuccess: () => {
 
+    // When button unmounts destroy the instance
     return () => {
@@ -129,3 +124,3 @@ onrampInstance?.destroy();
 
-  return <Button onClick={handleClick} disabled={!onrampInstance}>Buy with Coinbase</Button>;
+  return <button onClick={handleClick} disabled={!onrampInstance}>Buy with Coinbase</button>;
 };
@@ -151,9 +146,7 @@ ```
     const options = {
-      appId: 'your_app_id',
-      destinationWallets: [
-        {
-          address: destinationAddress,
-          blockchains: ['solana', 'ethereum'],
-        },
-      ],
+      appId: '<Your Project ID obtained from Coinbase Developer Platform>',
+      // Specify the addresses and which networks they support
+      addresses: { '0x0': ['ethereum','base'], 'bc1': ['bitcoin']},
+      // Filter the available assets on the above networks to just these ones
+      assets: ['ETH','USDC','BTC'],
       handlingRequestedUrls: true,
@@ -188,28 +181,27 @@ presetCryptoAmount: currentAmount,
 ## Aggregator Example
-Review the [Coinbase Cloud docs](https://docs.cloud.coinbase.com/pay-sdk/) for how to produce the parameters for use within an on ramp aggregator.
+Review the [Coinbase Developer docs](https://docs.cdp.coinbase.com/onramp/docs/api-aggregating/) for how to produce the parameters for use within an on ramp aggregator.
+
 ```tsx
-import type { CBPayInstanceType, InitOnRampParams } from '@coinbase/cbpay-js';
-import { initOnRamp } from '@coinbase/cbpay-js';
+import { CBPayInstanceType, initOnRamp } from "@coinbase/cbpay-js";
+import { useEffect, useState } from "react";
 
-const PayWithCoinbaseButton: React.FC = () => {
-  const [onrampInstance, setOnrampInstance] = useState<CBPayInstanceType | undefined>();
+export const PayWithCoinbaseButton: React.FC = () => {
+  const [onrampInstance, setOnrampInstance] = useState<CBPayInstanceType | null>();
 
   useEffect(() => {
     initOnRamp({
-      appId: 'your_app_id',
+      appId: '<Your Project ID obtained from Coinbase Developer Platform>',
       widgetParameters: {
-        destinationWallets: [
-          {
-            address: '0xabc123',
-            blockchains: ['ethereum', 'avalanche-c-chain'],
-          },
-        ],
+        // Specify the addresses and which networks they support
+        addresses: { '0x0': ['ethereum','base'], 'bc1': ['bitcoin']},
+        // Filter the available assets on the above networks to just these ones
+        assets: ['ETH','USDC','BTC'],
         // Aggregator params are ignored unless they are all provided.
         // defaultNetwork is the exception - it's optional.
-        quoteId: 'quote_id_from_buy_quote_api',
-        defaultAsset: 'asset_uuid_from_buy_options_api',
-        defaultNetwork: 'network_name_from_buy_options_api',
-        defaultPaymentMethod: 'payment_method_from_buy_options_api',
-        presetFiatAmount: 50,
-        fiatCurrency: 'payment_currency_from_buy_options_api',
+        quoteId: '<quote_id from the Buy Quote API>',
+        defaultAsset: 'USDC',
+        defaultNetwork: 'base',
+        defaultPaymentMethod: 'CARD',
+        presetFiatAmount: 20,
+        fiatCurrency: 'USD',
       },
@@ -233,2 +225,3 @@ onSuccess: () => {
 
+    // When button unmounts destroy the instance
     return () => {
@@ -243,9 +236,8 @@ onrampInstance?.destroy();
 
-  return <Button onClick={handleClick} disabled={!onrampInstance}>Buy with Coinbase</Button>;
+  return <button onClick={handleClick} disabled={!onrampInstance}>Buy with Coinbase</button>;
 };
 ```
 
-
 ## Contributing
 
 Commit signing is required for contributing to this repo. For details, see the docs on [contributing](./CONTRIBUTING.md) and [commit-signing](./docs/commit-signing.md).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

119172

decreased by-16.81%

Dev dependency count

20

increased by11.11%

Lines of code

1519

decreased by-12.95%

Number of lines in readme file

235

decreased by-3.29%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes