PaymentsAPI
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
StatefulRemoteSubscribable<[]>
required
All available payment options.
Anchor to selectedPaymentOptions
selectedPaymentOptions
StatefulRemoteSubscribable<[]>
required
Payment options selected by the buyer.
Was this section helpful?
Anchor to useAvailablePaymentOptionsuse
use
Returns all available payment options.
[]
Was this section helpful?
Anchor to useSelectedPaymentOptionsuse
use
Returns payment options selected by the buyer.
[]
Was this section helpful?
Available payment options
React
import {
reactExtension,
Banner,
useAvailablePaymentOptions,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const options = useAvailablePaymentOptions();
if (
options.some(
(option) => option.type === 'wallet',
)
) {
return (
<Banner>
Select an express payment method for
faster checkout
</Banner>
);
}
return null;
}
Anchor to examplesExamples
Anchor to example-selected-payment-optionsSelected payment options
Was this section helpful?
Selected payment options
React
import {
reactExtension,
Banner,
useSelectedPaymentOptions,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const options = useSelectedPaymentOptions();
if (
options.some(
(option) => option.type === 'creditCard',
)
) {
return (
<Banner>
All credit card transactions are secure
</Banner>
);
}
return null;
}
