Skip to main content

Payments
API

The API for interacting with the payment options.

Anchor to standardapiStandardApi

The base API object provided to purchase extension targets.

Anchor to availablePaymentOptions
availablePaymentOptions
<[]>
required

All available payment options.

Anchor to selectedPaymentOptions
selectedPaymentOptions
<[]>
required

Payment options selected by the buyer.

Was this section helpful?

Anchor to useAvailablePaymentOptions
useAvailablePaymentOptions()

Returns all available payment options.

Anchor to useAvailablePaymentOptions-returnsReturns

[]
Was this section helpful?

Anchor to useSelectedPaymentOptions
useSelectedPaymentOptions()

Returns payment options selected by the buyer.

Anchor to useSelectedPaymentOptions-returnsReturns

[]
Was this section helpful?

Available payment options

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
render(<Extension />, document.body);
}

function Extension() {
if (
shopify.availablePaymentOptions.value.some(
(option) => option.type === 'wallet',
)
) {
return (
<s-banner>
Select an express payment method for
faster checkout
</s-banner>
);
}

return null;
}

Anchor to examplesExamples

Was this section helpful?

Selected payment options

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
render(<Extension />, document.body);
}

function Extension() {
if (
shopify.selectedPaymentOptions.value.some(
(option) => option.type === 'creditCard',
)
) {
return (
<s-banner>
All credit card transactions are secure
</s-banner>
);
}

return null;
}

Anchor to relatedRelated

ReferenceTargets
ReferenceComponents
ReferenceConfiguration
LearnTutorials